How to add Shop The Look widget on Homepage of OS 1.0 Theme?
Please go to Shopify > Online Store > Themes > Edit your theme where you want to add section:
Expand the Section folder and create a new section:
Use name "shopthelook" and set the file extension to 'liquid'. Once you've created the file please copy and paste the following code and press save from top right corner:
<script type="text/javascript"> (function() { function asyncLoad() { var urls = ["https://shopify.shopthelook.app/shopthelook.js?shop=myfashionbranddemo.myshopify.com&widget=1&mainProductId={{section.settings.postId}}&definedTemplate=inpage_r""]; for (var i = 0; i < urls.length; i++) { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = urls[i]; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); } }; if(window.attachEvent) { window.attachEvent('onload', asyncLoad); } else { window.addEventListener('load', asyncLoad, false); } })(); </script> <div class="ShopTheLook-section" data-product-id="{{section.settings.postId}}"></div> {% schema %} { "name": "Shop The Look", "settings": [ { "id": "postId", "type": "text", "label": "Add Look ID", "default": "123456" } ], "presets": [{ "name": "Shop The Look Section", "category": "ShopTheLook" }] } {% endschema %}
Now, in order to add this section to your theme's pages please open Shopify's customizer:
Once you're on Customizer, click on "Add section" and search for "Shop the Look"
This section needs a 'Look id' to work, so please go to Shopify > Apps > Shop The Look and copy the look id and paste it in the field:
Please check the Look video on how you can get the Look id and add it to the section: