How to show Related Products in Shopify Debut Theme
![How to show Related Products in Shopify Debut Theme](https://cdn.shopify.com/s/files/1/0277/2870/7619/files/Snip20180120_11_x500.png)
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:
- Show dropdown menu on hover
- Show related products by collection
- Show related products by tags
- Weird opacity on product hover
- Product image sometime not fit in grid
- Missing some normal section
- Ajax cart – drawer cart
- Quickview function
And today, I will show you how to add related products to this theme
![Related products in Debut Theme](https://cdn.shopify.com/s/files/1/0277/2870/7619/files/Snip20180120_11.png)
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](https://cdn.shopify.com/s/files/1/0277/2870/7619/files/edit-code-in-shopify.png)
From code editor, in left sidebar, scroll down and hit on Add a new snippet
![Add new snippet in Shopify Debut Theme](https://cdn.shopify.com/s/files/1/0277/2870/7619/files/add-new-snippet.png)
Enter the correct snippet name: shopifyexplorer-related-by-collection
![Enter snippet name](https://cdn.shopify.com/s/files/1/0277/2870/7619/files/enter-snippet-name.png)
Select Create snippet.
![Create new snippet](https://cdn.shopify.com/s/files/1/0277/2870/7619/files/create-new-snippet.png)
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 }}">
{%- render 'product-card-grid', max_height: max_height -%}
</div>
{%- endunless -%}
{%- endif -%}
{%- endfor -%}
</div>
</div>
</section>
{%- assign product = current_product -%}
{%- endif -%}
![Save new snippet](https://cdn.shopify.com/s/files/1/0277/2870/7619/files/save-new-snippet.png)
Step 2: Edit product template section
Now under Sections, find product-template.liquid file
![Find the product template](https://cdn.shopify.com/s/files/1/0277/2870/7619/files/find-product-template.png)
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 template](https://cdn.shopify.com/s/files/1/0277/2870/7619/files/include-snippets-to-product-template.png)
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](https://cdn.shopify.com/s/files/1/0277/2870/7619/files/find-close-bracket.png)
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
}
![Save the settings](https://cdn.shopify.com/s/files/1/0277/2870/7619/files/add-settings.png)
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.