How to show Related Products in Shopify Debut Theme

Posted 20. January 2018.

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
}

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.