How to show Related Products in Shopify Debut Theme

Shopify Debut is a free theme developed by Shopify. In my opinion, this theme is good for starter shop with multi homepage section, product section,… almost everything is controlled from section.

But it still lack some functions which I tried to listed bellow and trying to give you all quick solution for it:

  1. Show dropdown menu on hover
  2. Show related products by collection
  3. Show related products by tags
  4. Weird opacity on product hover
  5. Product image sometime not fit in grid
  6. Missing some normal section
  7. Ajax cart – drawer cart
  8. Quickview function

And today, I will show you how to add related products to this theme

Related products in Debut Theme

How to show Related Products in Shopify Debut Theme

Step 1: Adding new snippet

The very first step is adding new snippet in Debut theme. From Shopify Dashboard, navigate to your Theme editor

Edit theme code in Shopify Debut Theme

From code editor, in left sidebar, scroll down and hit on Add a new snippet

Add new snippet in Shopify Debut Theme

Enter the correct snippet name: shopifyexplorer-related-by-collection

Enter snippet name

Select Create snippet.

Sreate new snippet

Copy the following content and paste into newly created snippet:

<!-- /snippets/shopifyexplorer-related-by-collection.liquid -->
{% assign number_of_related_products = section.settings.number_of_related_products | plus:1 %}
{% if collection == null or collection.handle == 'frontpage' or collection.handle == 'all' %}
{% assign found_a_collection = false %}
{% for c in product.collections %}
  {% if found_a_collection == false and c.handle != 'frontpage' and c.handle != 'all' and c.all_products_count > 1 %}
    {% assign found_a_collection = true %}
    {% assign collection = c %}
  {% endif %}
{% endfor %}
{% endif %}

{% if collection and collection.products_count > 1 %}


<section class="related-products" style="padding-top: 30px;">
  

<div class="page-width">
    {% if section.settings.related_products_title != blank %}
    

<div class="section-header text-center">
      

<h2>{{ section.settings.related_products_title }}</h2>


    </div>


    {% endif %}
    

<div class="grid grid--uniform{% if collection.products_count >
 0 %} grid--view-items{% endif %}">
    {% assign current_product = product %}
    {% assign current_product_found = false %}
    {% for product in collection.products limit: number_of_related_products %}
      {% if product.handle == current_product.handle %}
         {% assign current_product_found = true %}
      {% else %}
         {% unless current_product_found == false and forloop.last %}
          {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
          {%- assign max_height = 350 -%}

          

<div class="grid__item {{ grid_item_width }}">
            {% include 'product-card-grid', max_height: max_height %}
          </div>



         {% endunless %}
      {% endif %}
    {% endfor %}
    </div>


  </div>


</section>


{% assign product = current_product %}
{% endif %}

Save new snippet

Step 2: Edit product template section

Now under Sections, find product-template.liquid file

Find product template file

Now scrolldown and find around line 202-204. add the following line

{% if section.settings.show_related_products %}
 {% include 'shopifyexplorer-related-by-collection' %}
{% endif %}

Include snippets

And hit Save to save section.

Step 3: Add template section settings

Still editing product-template.liquid file above. Scroll down to bottom.

Find the last bracket before ]

Find close bracket

Add the following code after it:


,
{
"type": "header",
"content": "Related products"
},
{
"type": "checkbox",
"id": "show_related_products",
"label": "Show related products",
"default": true
},
{
"type": "text",
"id": "related_products_title",
"label": "Related products title",
"default": "You might also like"
},
{
"type": "number",
"id": "number_of_related_products",
"label": "Related products number",
"default": 8
}

Add section new settings

Hit Save to save content. And that’s all. open a product to view this section

Conclusion:

That’s all, you can see my live theme example here. Hope that my detail tut can help you a little in launching your shop. You also can change section title by changing hardcoded string in code snippet.

Thank you all for reading my tutorial. If you like it, share it to your friends and don’t forget to help me a bit by clicking ads or donate to helps me maintain this site.


14 thoughts on “How to show Related Products in Shopify Debut Theme

    1. Thank you so much for your response. I’ll create a new post about “How to open Ajax cart drawer in Shopify Debut theme” later. Right now, I have no post about this!

      I know that this is a bit late, but hope that I can still help you anyway

  1. Thanks for the information Luke. Work wonderfully. I have a question, how do you link the items you may also like back to the lead item?

    1. Your question seems to mention about Recently viewed products. There is no way we can do this using Shopify Liquid, or it will be complicated setup with product tags relation.
      I’ll try to do Recently viewed module in another post

  2. This was VERY helpful… is there any way to center the related product grid? Everything is appearing as it should, I’m struggling with adjusting the styling. Thanks!

  3. Hi Luke,

    Many thanks for this great bit of advice which is very easy to implement and very well explained.

    I’ve put it into my shop but I can only get the ‘Related Products’ displayed on the right hand side of the page:

    https://nortyboy.com/collections/t-shirts/products/nortyboy-red-embroidered-lightweight-soft-stretchy-t-shirt

    Is there something I can do to get the related products across the whole width of the page?

    Any advice would be greatly appreciated.

    Thanks.

  4. Thank you for your tutorials. Great job! Just curious, what we need to add to show the next items after the one chosen instead of the first 8 in the collection? Again, thank you so much for what you do.

  5. Hi there!
    Thanks a lot for this useful tutorial! Works very well!

    I was wondering which part of your code I should modify to only show specific products (for example all t-shirts with the same pattern).
    Do you have any idea?

    1. Hi, I am going to publish a new tutorial to show you all about adding Related Product By Tag. Using Product tag you can have narrow related products range. I’ll update post link right then I publish it.

      Hope it still help

Add Comment