How to add related products to product page

Highlighted
Tourist
11 0 2

Hello everyone!

I'm trying to add a related products section at the bottom of the product page as seen in the picture attached below.

I'm currently using the debut theme. I've googled and tried everything that I've found on the web but the products have never appeared. Sadly, I've only managed to get the header to appear....... so I've deleted everything and I'm trying my luck here for some advice or help.

I'm good with having related products / recommended products sorted by collections, tags or anything really. Thanks in advance!

 

1 Like
Highlighted
Excursionist
59 0 8

This link will help you :-

https://help.shopify.com/themes/customization/products/recommend-related-products



 

If you need any more help then shoot mail at jaygandhi0692@gmail.com
0 Likes
Highlighted
Tourist
11 0 2

Hi Jay, 

Thanks for your reply. I have already tried the method in the link previously but unfortunately it did not work. I'm looking to try to solve this by getting some help from the community first. Thanks for your offer though!

0 Likes
Highlighted
Shopify Expert
9887 101 1731

If the link to the help docs didn't work, can you share some insight into what the problem was? Also seeing a page with the code in place - but not working - is also quite useful to see.

Hard to give much help without a better understanding of the problem.

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
Excursionist
59 0 8

Hi Karina Ji,

I can help you to sort out.

Give us grant as staff account at: jay.gandhi@rapidops.com

Best Regards,
Jay Gandhi - PSDCenter

If you need any more help then shoot mail at jaygandhi0692@gmail.com
0 Likes
Highlighted
Shopify Expert
9887 101 1731

^ Not sure why staff account access would be needed here. 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like
Highlighted
Tourist
11 0 2

Hi Jason! 

I've followed the instructions on the help docs but nothing appears on the products page. 

This is the code (for the debut theme) that I have pasted into the new related-products.liquid file that I've created after removing the default code.

{% if section.settings.show_related_products == true %}
<hr>
<div class="product-template__container page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true">
 
{% comment %}
  Number of related items per row,
  and number of rows.
{% endcomment %}

{% assign number_of_related_products_per_row = section.settings.related_grid_num %}
{% assign number_of_rows = section.settings.related_grid_row %}

{% comment %}
  Heading.
  Leave blank if you don't need one.
{% endcomment %}

{% assign heading = section.settings.related_title %}

{% comment %}
  Set either or both to true, if you want
  to limit yourself to items with same vendor, and/or type.
{% endcomment %}

{% assign same_vendor = false %}
{% assign same_type = false %}

{% comment %}
  Collections to ignore.
  Never pick related items from those.
{% endcomment %}

{% assign exclusions = 'frontpage,all' | split: ',' %}

{% comment %}
  Looking for a relevant collection.
{% endcomment %}

{% if product.metafields.c_f['Related Products'] %}
  {% assign collection = collections[product.metafields.c_f['Related Products']] %}
{% endif %}

{% assign found_a_collection = false %}
{% if collection and collection.all_products_count > 1 %}
  {% unless exclusions contains collection.handle %}
    {% assign found_a_collection = true %}
  {% endunless %}
{% endif %}
{% unless found_a_collection %}
  {% for c in product.collections %}
    {% unless exclusions contains c.handle or c.all_products_count < 2 %}
      {% assign found_a_collection = true %}
      {% assign collection = c %}
      {% break %}
    {% endunless %}
  {% endfor %}
{% endunless %}

{% comment %}
  If we have a relevant collection.
{% endcomment %}

{% if found_a_collection %}

  {% assign counter = 0 %}
  {% assign break_at = number_of_rows | times: number_of_related_products_per_row %}
  {% assign current_product = product %}
  
  {% case number_of_related_products_per_row %}
    {% when '1' %}
      {% assign grid_item_width = '' %}
    {% when '2' %}
      {% assign grid_item_width = 'small--one-half medium-up--one-half' %}
    {% when '3' %}
      {% assign grid_item_width = 'small--one-half medium-up--one-third' %}
    {% when '4' %}
      {% assign grid_item_width = 'small--one-half medium-up--one-quarter' %}
    {% when '5' %}
      {% assign grid_item_width = 'small--one-half medium-up--one-fifth' %}
    {% when '6' %}
      {% assign grid_item_width = 'small--one-half medium-up--one-sixth' %}
    {% else %}
      {% assign grid_item_width = 'small--one-half medium-up--one-quarter' %}
  {% endcase %}


  {% capture related_items %}
<div class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">

  {% for product in collection.products %}
  {% unless product.handle == current_product.handle %}
  {% unless same_vendor and current_product.vendor != product.vendor %}
  {% unless same_type and current_product.type != product.type %}
  <div class="grid__item {{ grid_item_width }}">
    {% include 'product-card-grid' %}
  </div>
  {% assign counter = counter | plus: 1 %}
  {% if counter == break_at %}
  {% break %}
  {% endif %}
  {% endunless %}
  {% endunless %}
  {% endunless %}
  {% endfor %}
</div>
  {% endcapture %}

  {% assign related_items = related_items | trim %}

  {% unless related_items == blank %}

  <aside class="grid">
    <div class="grid__item">
      {% unless heading == blank %}
      <header class="section-header">
        <h2 class="section-header__title">{{ heading }}</h2>
      </header>
      {% endunless %}
      <div class="grid-uniform">
        {{ related_items }}
      </div>
    </div>
  </aside>

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

{% schema %}
{
  "name": "Related products",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_related_products",
      "label": "Show related products",
      "default": false
    },
    {
      "id": "related_title",
      "type": "text",
      "label": "Section title",
      "default": "Other fine products"
    },
    {
      "type": "select",
      "id": "related_grid_num",
      "label": "Products per row (Desktop)",
      "default": "4",
      "options": [
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        },
        {
          "value": "4",
          "label": "4"
        },
        {
          "value": "5",
          "label": "5"
        }
      ]
    },
    {
      "type": "select",
      "id": "related_grid_row",
      "label": "Number of rows (Desktop)",
      "default": "1",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        }
      ]
    }
  ]
}
{% endschema %}

 

This is how my product.liquid file looks like after I've added in {% section 'related-products' %} as specified on the help docs.

 

{% comment %}
  The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section 'product-template' %}
{% section 'related-products' %}

<script>
  // Override default values of shop.strings for each template.
  // Alternate product templates can change values of
  // add to cart button, sold out, and unavailable states here.
  theme.productStrings = {
    addToCart: {{ 'products.product.add_to_cart' | t | json }},
    soldOut: {{ 'products.product.sold_out' | t | json }},
    unavailable: {{ 'products.product.unavailable' | t | json }}
  }
</script>
 

I have also removed the password page for now. Feel free to take a look at the website and check the codes. Thank you! 

0 Likes
Highlighted
Tourist
11 0 2

I've also tried to change the {% assign same_type = false %} in the related-products.liquid file to  {% assign same_type = true %}  but nothing occurs.

0 Likes
Highlighted
Shopify Expert
2684 67 792

HI Karina,

just to be sure -- have you checked the checkbox "Show related products" in Related products Section properties in theme customizer?

Because it is off by default.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
Tourist
11 0 2

Hi Tim, 

There doesn't seem to be a Related Products Section in the theme customiser. I can add everything ranging from sliders to images to blogs but I do not see a section for Related Products. There is only 'Featured Product' under the section for Products in the theme customiser. I'm using the Debut theme. Is there anyway that I can turn it on using some sort of code or can I add the Related Products section into my theme customiser?

0 Likes