Adding a "see more options" or "more colors" to collection pages in Minimal theme:

maslo_jewelry
New Member
3 0 0

I am trying to add a "see more colors" option to my products on the collection pages. Some product have the option for different cord colors and I'd like a customer to know that without having to visit each product page. I am using the Minimal theme.

I've tried to use this code:

 {% if product.options contains 'Cord Color' %}
          <a href="{{ product.url | within: collection }}">see more colors</a>
        {% endif %}

But I can't seem to find the proper placement for it. I tried putting it in the product-grid-item.liquid snippet and it does show up, but it isn't directly below the product title - it shows up within the grid but in the bottom left corner. 

How do I make that text show up centered under my product title and price? 

I am also open to just having "see more colors" in the product title if I am able to put a break in the title, so it is a subtitle. I've tried using the <br> tag but it shows up.

0 Likes
Sunhye_Kee
Tourist
2 0 2

I've finally found the answer and have successfully added a "more colors>" text at the bottom of the items that have 2 or more color variants. 

I found the product loop in snippets> product-grid- item.liquid, However depending on your theme it can be different, just find the folder in snippets that has the words "product" "grid" "listing" "thumbnail" in it and see if the code looks like its describing the product on the collection page. 

Then, i scrolled to the bottom and right between the last two "divs" i added a code which i got from https://www.blackbeltcommerce.com/shopify-show-colours-product-multiple-colour-variants/. But i found that the words "more colors" were not centered so i changed it a little bit by adding a centering code to it.

Here is the code:

{% assign option_index = 0 %}
{% for option in product.options %}
{% capture downcased_option %}{{ option | downcase }}{% endcapture %}
{% assign option_index = forloop.index0 %}
{% assign how_many_options = 0 %}
{% assign current_options = '' %}
{% for variant in product.variants %}
{% assign current_option = variant.options[option_index] %}
{% unless current_options contains current_option %}
{% if how_many_options > 0 %}
{% assign current_options = current_options | join: '|' | append: '|' %}
{% endif %}
{% assign current_options = current_options | append: current_option %}
{% assign current_options = current_options | split: '|' | sort %}
{% assign how_many_options = current_options | size %}
{% endunless %}
{% endfor %}

{% unless option == "Title" %}
{% if current_options.size > 1 and option contains "Colo"%}
  <center> More Colors ></center>
{% endif %}
{% endunless %}
{% endfor %}

 

hope it works for u too! cheers

Melissa_dela_Ro
Tourist
3 0 1

Hi Sunhee,

I'm so new/bad to all this code stuff and want to make sure I'm doing it right. Are you able to send a screenshot of the code and where it goes in between the last two divs? Thank you!

0 Likes
Daniel_Cecchin
New Member
1 0 0

Sunhye Kee,

Your code works by placing the words there, but is there a line of code that would allow the words "More Colours" to be a clickable link to the product page itself?

- Dan

0 Likes
junebriones
Tourist
5 0 1

Hi I'm interested in the same thing. where you able to figure it out?

0 Likes
junebriones
Tourist
5 0 1

Hello I'm on the minimal theme. Where exactly do I place this code and is it this entire code?

0 Likes
junebriones
Tourist
5 0 1

I TRIED IT AND IT WORKED. THANK YOU SOOO MUCH!!!!!

0 Likes
wbirkas
Excursionist
18 2 6

PLEASE help. I'm using the theme Debut, and I've pasted the exact code under the line for product.price and it said the file contains the following errors: "Liquid syntax error: Unknown tag '{% assign option_index = 0'" 

I have no idea what that means. So I deleted the '{% assign option_index = 0' and it kept saying there was an error for each line of the code. You know what I mean? 

Hope to hear from you, or anyone else who may be able to help

 

Thank You!

skormy
Tourist
7 0 1

I found the referenced instructions after a Google search and couldn't get the code to work.  Subsequently, I found this thread in the forum. After putting the referenced code many places within product.grid.item.liquid, it still didn't work.  Is there a specific place I should be putting the code snippet?  I am using the Supply theme, btw. I don't get an error, there is no change to the product grid.  Any help would be greatly appreciated. 

Any recommendations on where specifically to insert the code @Sunhye_Kee @junebriones 

0 Likes
ChiChaTeauCo
New Member
1 0 2

I am using Debut Theme and I had to go to "product-card-grid.liquid" snippet and I pasted the above code at the bottom between the two "<div>"s . See below image:

 

ChiChaTeauCo_0-1618527643221.png

Hope this helps