Orbitvu Public Support Site

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

Updated May 19, 2021

Caution! Orbitvu SUN plugin for Shopify is connected to your E-Commerce plan. You need to keep the E-commerce plan valid for the Shopify integration to work properly.

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.

Previous Article Connecting plugin with SUN account
Next Article Usage
Still Need Help? Contact Us