Handpicked related products

Hi! 

Based on the related products by Collection solution documented here by Caroline Schnapp (https://docs.shopify.com/support/your-store/products/can-i-recommend-related-products), here's a variation that give you the option to handpick related product.

 

Basically, if you add a tag to a product (A) by starting this tag with "goWith:"  followed by the product title of a product (B), this product (B) will show in the product (A) related section. If there's no tag on product (A) that start with "goWith:", the standard related products by Collection solution documented here by Caroline Schnapp will run.

 

Just before 

  {% capture related_items %}

 you need to add this code:

  {% for tag in product.tags %}
	{% if tag contains "goWith:" %}
		{% assign product_hand_picked =  'hand_picked'  %}
    {% else %}
    	{% assign product_hand_picked =  'automatic'  %}
    {% endif %}
  {% endfor %}
  {% if product_hand_picked ==  'hand_picked' %}
    {% capture related_items %}
        {% for tag in product.tags %}
            {% if tag contains "goWith:" %}
              {% assign product_title_to_find =  tag | remove: "goWith:"  %}
              {% for product in collections.all.products %}
                  {% if product.title == product_title_to_find %}
                     {% include 'product-grid-item' %}
                     {% assign counter = counter | plus: 1 %}
                     {% if counter == break_at %}
                       {% break %}
                     {% endif %} 
                  {% endif %}
              {% endfor %}
            {% endif %}
        {% endfor %}
    {% endcapture %}
  {% else %}

!!!and dont forget to close the "if" tag by adding {% endif %} just before the {% assign related_items = related_items | trim %} (almost at the ed of the original code documented b yCaroline Schnapp !!!!

> Shopify Partner
> Digital Marketing, Ecommerce and Business SaaS Consultant
> Blue Ocean Strategy Consultant > blueoceanstrategy.com
> MPO Certified Consultant > creacor.com

T 514.826.8404
>>bélé solutions
bele.io
1 Like

OUPS!!! Small error:

remove 

    {% else %}
    	{% assign product_hand_picked =  'automatic'  %}

in the code!!!

 


@Titoiso wrote:

Hi! 

Based on the related products by Collection solution documented here by Caroline Schnapp (https://docs.shopify.com/support/your-store/products/can-i-recommend-related-products), here's a variation that give you the option to handpick related product.

 

Basically, if you add a tag to a product (A) by starting this tag with "goWith:"  followed by the product title of a product (B), this product (B) will show in the product (A) related section. If there's no tag on product (A) that start with "goWith:", the standard related products by Collection solution documented here by Caroline Schnapp will run.

 

Just before 

  {% capture related_items %}

 you need to add this code:

  {% for tag in product.tags %}
	{% if tag contains "goWith:" %}
		{% assign product_hand_picked =  'hand_picked'  %}
    {% else %}
    	{% assign product_hand_picked =  'automatic'  %}
    {% endif %}
  {% endfor %}
  {% if product_hand_picked ==  'hand_picked' %}
    {% capture related_items %}
        {% for tag in product.tags %}
            {% if tag contains "goWith:" %}
              {% assign product_title_to_find =  tag | remove: "goWith:"  %}
              {% for product in collections.all.products %}
                  {% if product.title == product_title_to_find %}
                     {% include 'product-grid-item' %}
                     {% assign counter = counter | plus: 1 %}
                     {% if counter == break_at %}
                       {% break %}
                     {% endif %} 
                  {% endif %}
              {% endfor %}
            {% endif %}
        {% endfor %}
    {% endcapture %}
  {% else %}

!!!and dont forget to close the "if" tag by adding {% endif %} just before the {% assign related_items = related_items | trim %} (almost at the ed of the original code documented b yCaroline Schnapp !!!!



 

> Shopify Partner
> Digital Marketing, Ecommerce and Business SaaS Consultant
> Blue Ocean Strategy Consultant > blueoceanstrategy.com
> MPO Certified Consultant > creacor.com

T 514.826.8404
>>bélé solutions
bele.io
0 Likes
New Member
1 0 0

Hi,

 

Thank you for posting this!! This is exactly what I'm trying to do...

 

So where exactly do we need to paste this code?

 

And regarding the product tags..... so let's say I have 3 products in a particular set.... eg. one is "Blue Plastic Chair" one is "Green Plastic Chair", and the third is called "Red Plastic Chair". I'd like them to show up in each other's related items.

 

So does this mean in the product page for "Blue Plastic Chair", I need to add "goWith Green Plastic Chair" as a tag... and then "goWith Red Plastic Chair" as another separate tag? Is this correct?

 

Thanks so much for clarifying :)

0 Likes
Hi CazE,
You are right about the tag. If you want the Green and Red plastic chairs to shows up in the related section of the Blue Plastic Chair, to need to add one tag called “goWith:Green Plastic Chair” and another one called “goWith:Red Plastic Chair”.

As for the integration to your Shopify’s theme, it really depends on wich theme you are using on your store. A lot of themes already have some version of this code: https://help.shopify.com/en/themes/customization/products/features/recommend-related-products#edit-y...
It’s within this code that you will make the customization.
> Shopify Partner
> Digital Marketing, Ecommerce and Business SaaS Consultant
> Blue Ocean Strategy Consultant > blueoceanstrategy.com
> MPO Certified Consultant > creacor.com

T 514.826.8404
>>bélé solutions
bele.io
0 Likes

new version using "all_products" because "{% for product in collections.all.products %}" have a maximum of 50 queries:

 

  {% for tag in product.tags %}
	{% if tag contains "with:" %}
		{% assign product_hand_picked =  'hand_picked'  %}
    {% endif %}
  {% endfor %}
  {% if product_hand_picked ==  'hand_picked' %}
    {% capture related_items %}
        {% for tag in product.tags %}
            {% if tag contains "with:" %}
				{% assign product_title_to_find =  tag | downcase | remove: "with:" | lstrip | replace: " ", "-" %}
                  {% if all_products[product_title_to_find].available %}
                     {% include 'product-grid-item' %}
                     {% assign counter = counter | plus: 1 %}
                     {% if counter == break_at %}
                       {% break %}
                     {% endif %} 
                  {% endif %}
            {% endif %}
        {% endfor %}
    {% endcapture %}
  {% else %}

 

 

> Shopify Partner
> Digital Marketing, Ecommerce and Business SaaS Consultant
> Blue Ocean Strategy Consultant > blueoceanstrategy.com
> MPO Certified Consultant > creacor.com

T 514.826.8404
>>bélé solutions
bele.io
0 Likes