Orbitvu Public Support SiteEcommerce integrations Shopify SUN Product TeleportingPreparing frontend product gallery for displaying 360°/3D spins

Preparing frontend product gallery for displaying 360°/3D spins

You have to modify your frontend product template file in order to display assigned Orbitvu presentations to your products. This modification requires some knowledge of HTML.

Creating a backup file

1. Go to your store's admin panel: "Sales Channel -> Online store -> Themes". In the current theme click "Actions -> Edit code".

2. Pick a file "product-template.liquid" from the sidebar in the "Sections" folder. Let's first create a backup of this file. Select all the content and copy it.

3. On the left side panel under the "Sections" folder, click "Add a new section". Call it "product-template-bk.liquid" and click "Create section".

4. In the newly created file, remove all the default content and paste the code from the "product-template.liquid".

5. Save the file. At this point we have a backup so if something goes wrong with modification of our source product template file, we can always copy back the content from the backup.

Please note that below example is based on the default "Debut" theme files. The source code may vary depending theme installed in your store.

1. On the left sidebar under the "Sections" folder click "product-template.liquid". Copy below Orbtivu snippet code.

{% include 'orbitvu-gallery' %}

2. Remove everything between lines 35 and 97 and paste the Orbitvu snippet code. The source should look like on the screenshot below. When you are sure that everything is properly modified, then click "Save".

3. Go to your frontend store and open any product page to test if gallery works as expected.

The next guide will show you how to assign (link) Orbitvu presentations to Shopify  products and display 360°/3D spins.