How to embed published projects to your Shopify store

8 MIN READ

 

Summary: Learn how to add BRIO scenes to different sections of your Shopify store.

---

Contents:

1. Copy Embed Code from BRIO
2. Embed In Shopify
   1. Embed in the Header
   2. Embed on the Homepage
   3. Embed on a Product or Collection Page
   4. Embed on a Single Page or Post
   5. Embed in every page
   6. Embed in the Footer
   7. Custom HTML Section

---

 BRIO scenes are a powerful tool for displaying products on your eCommerce and bringing them to life though 3D display, 

1. Copy Embed Code from BRIO

After you publish a scene, BRIO will generate an embed code. 

To display the scene in your Shopify store, click "copy code" and follow the instructions below to paste it in the correct location. 

 

2. Embed in Shopify 

 

A. To embed in the header:

1. In your Shopify Dashboard select Themes, then click on Actions and select Edit code.
   
   
   
   
2. Find the header.liquid file, or navigate to it directly here.
   
   
3. 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:

1. In your Shopify Dashboard select Themes, then click on Actions and select Edit code.
   
   
   
   
2. Find the index.liquid file, or navigate to it directly here.
   
   
3. 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: 

 

1. In your Shopify Dashboard select Products or Collections.
   
   
   
   
2. Select the product or collection you want to edit and click on the <> icon to switch to HTML view.
   
   
   
   
3. 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.

1. In your Shopify Dashboard select Online Store, then Pages or Blog posts.
   
   
   
   
2. Select the page or post you want to edit and click on the <> icon to switch to HTML view.
   
   
   
   
3. 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. 

1.  In your Shopify Dashboard select Themes, then click on Actions and select Edit code.
   
   
   
   
2.  Find the theme.liquid file, or navigate to it directly here.
   
   
3. 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.

1.  In your Shopify Dashboard select Themes, then click on Actions and select Edit code.
   
   
   
   
2. Find the footer.liquid file, or navigate to it directly here.
   
   
3. 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. 

1. In your Shopify Dashboard select Themes, then click on Customize.
   
   
   
   
2.  Select the Add section option.
   
   
   
   
3. Select the last item called Custom content.
   
   
   
   
4. Select Add content.
   
   
   
   
5. Select Custom HTML.
   
   
   
   
6. 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.