Learn how to add BRIO scenes to different sections of your Shopify store.
This article specifically shows the Shopify flow, however, many of the embedding steps are the same for any website, including WordPress, WooCommerce, BigCommerce, Magento, Salesforce, Wix etc.
Contents
BRIO scenes are a powerful tool for displaying products on your eCommerce and bringing them to life though 3D display. Follow the steps below to embed scenes to your Shopify store.
1. Copy Embed Code from BRIO
After you click share, BRIO will automatically package your scene for both iOS and Android and generate an embed code.
NOTE: Since BRIO hosts all your scene data and traffic, to unlock sharing you must be subscribed to a plan.
To learn more about sharing, including exports failing and branding, look at this article https://help.briovr.com/hc/en-us/articles/360049164873
To display the scene in your Shopify store, click "copy code" and follow the instructions below to paste it into the correct location.
2. Embed in Shopify
A. To embed in the header:
- In your Shopify Dashboard select Themes, then click on Actions and select Edit code.
- Find the header.liquid file, or navigate to it directly here.
- Search for /header, paste the embed code before it and click Save. See the changes by clicking on Preview in the top menu.
B. To embed on the homepage:
- In your Shopify Dashboard select Themes, then click on Actions and select Edit code.
- Find the index.liquid file, or navigate to it directly here.
- Search for content_for_index, paste the embed code outside the div and click Save. See the changes by clicking on Preview in the top menu.
C. To embed on a Product or Collection page:
- In your Shopify Dashboard select Products or Collections.
- Select the product or collection you want to edit and click on the <> icon to switch to HTML view.
- Paste the embed code where you want the app to load. Save the changes and click on View below the title to see the updated page.
D. Embed on a Single Page or Post
To add an app to a page or on your blog, copy the embed code.
- In your Shopify Dashboard select Online Store, then Pages or Blog posts.
- Select the page or post you want to edit and click on the <> icon to switch to HTML view.
- Paste the embed code anywhere on the page or post, where you want the app to load. Save the changes and click on View Page below the title to see the updated page.
E. To embed in every page:
Copy the embed code.
- In your Shopify Dashboard select Themes, then click on Actions and select Edit code.
- Find the theme.liquid file, or navigate to it directly here.
- Search for content_for_layout, paste the embed code outside the main div and click Save. See the changes by clicking on Preview in the top menu.
F. To embed in the footer:
To add an app to your footer copy the embed code.
- In your Shopify Dashboard select Themes, then click on Actions and select Edit code.
- Find the footer.liquid file, or navigate to it directly here.
- Search for footer and paste the embed code between an ending and a starting div. Experiment until you position it where you need. Click Save then see the changes by clicking on Preview in the top menu.
H. Custom HTML Section
To add an app as an individual HTML section, copy the embed code and follow these steps.
- In your Shopify Dashboard select Themes, then click on Customize.
- Select the Add section option.
- Select the last item called Custom content.
- Select Add content.
- Select Custom HTML.
- Paste the embed code in the box that just appeared. You can set the container width to 100% if you need. You can also remove the previous sections by clicking on them and selecting Remove Section. Save the changes and view the updated page.
