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:
- 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
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
From code editor, in left sidebar, scroll down and hit on Add a new snippet
Enter the correct snippet name: shopifyexplorer-related-by-collection
Select Create 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 }}">
{%- render 'product-card-grid', max_height: max_height -%}
</div>
{%- endunless -%}
{%- endif -%}
{%- endfor -%}
</div>
</div>
</section>
{%- assign product = current_product -%}
{%- endif -%}
Step 2: Edit product template section
Now under Sections, find product-template.liquid 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 %}
Step 3: Add template section settings
Still editing product-template.liquid file above. Scroll down to bottom.
Find the last bracket before ]
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
}
