Shopify Venture Theme Related Products using Sections

Shopify Venture Theme Related Products using Sections

We wrote a post about Related Products for the Venture theme a while ago. Since then Shopify have introduced a nice new feature called sections to their themes which allows for even more theme customization.

 

When ever new features are added to code it normally means that previous versions need to be changed slightly to accommodate this new method. This means that our old needs to be updated to. The code that we linked to still works but the placement of the code is slightly different.  

 

I thought that related products would be added to the newer version of the theme, as it is probably the most requested feature, but for some reason they decided not too.  Hopefully this tutorial will help you. 

 

IMPORTANT: This involves editing the theme files for your site and is a based on this original article. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is recommended. If you are not comfortable editing the themes files we can do this for you. Just use the Contact Us page or Live Chat.

  1. From your Shopify admin, click Online Store, then click Themes :
    Click Online Store then Themes
  2. Find the theme you want to edit, click the ... button, then click Edit HTML/CSS:
    Click Edit HTML CSS button
  3. Create a new snippet called related-products.
    • In the left-hand side pane, scroll down and left-click Snippets. Then, scroll further and click on the add a new snippet button:
    Related products 3
    • Name your snippet “related-products”. Shopify will add the .liquid extension, so you don’t have to.
    • Click on related-products.liquid to open the snippet in the online code editor.
    • Copy the content of this bitbucket file  into your snippet, and click save.
  4. Include your snippet in product.liquid
    • Still on the Edit HTML/CSS page in your shop admin, click on product.liquid under Templates to open the product template in the online code editor. At line 8 of your product.liquid file, after the {% if collection %} command add the following code:
          <div class="page-width">
             {% include 'related-products'%}
          </div>
      
    • Click Save.
Loading Facebook Comments ...