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 }}"> {% include '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 %}
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 ]
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.
Faizan
- Edit
Cany you tell me how i can open the Ajax cart drawer from right side when we add the product in cart in Debut theme?
Luke Tran
- Edit
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
Kirstie
- Edit
This is amazing. Thank you so much for the clear instructions and code, it took less than a minute to implement!
Troy T
- Edit
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?
Luke Tran
- Edit
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
KAD
- Edit
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!
Daniel
- Edit
Beautiful! Thank you so much for your post. Could not find a decent plugin for this.
Steve
- Edit
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.
Luke Tran
- Edit
You placed to in the wrong place, let’s put it to bellow Product main content
hokoatu.com
- Edit
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.
Luke Tran
- Edit
Wow, your question is a great idea for related products section. Keep track on my site, I’ll post update in another post
Thomas
- Edit
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?
Luke Tran
- Edit
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
Luke Tran
- Edit
Check this tutorial from me: http://easycodeguide.com/how-to-add-related-products-using-product-tag-in-debut-theme.html