Display Variant Choice on Collections Page

Highlighted
Tourist
3 0 1

Hey guys,

 

I hope you're having a great day

 

Like the title says, I would like my collections page to display a drop down menu for selecting the variant for the products. Right now, it displays the "add to cart" button, which I added, but people think there's only the variant in the main picture.

Also, if the image in the collections page could change based on the variant chosen, it would be great

 

Please let me know if you need more info. I use the Supply theme

 

Thank you!

 

P.S. Jason seemed to have answered part of this question here, but as a beginner, I'm not sure where I'm supposed to put the code, or if it would include image switching based on variant: https://ecommerce.shopify.com/c/ecommerce-design/t/working-with-varients-and-sizes-on-collection-pag...

0 Likes
Highlighted
Shopify Staff
Shopify Staff
182 0 12

Hi Abdelaziz, 

I don't know how to code this and hopefully someone else can help out, but I recommend checking out the Quick View app. Customers will be able to see products in a pop up on the collection page and choose variants before adding the item to their cart: https://apps.shopify.com/quick-view

Hope this helps! 

0 Likes
Highlighted
Tourist
3 0 1

Thank you Yasmin for the tip on that app, but it doesn't really solve my issue, because the customer still has to click on the product for that to come up, so they might as well click and go to the page

What happens to me is people just scroll through the page and don't click in the first place because the color on the picture does not appeal to them

At this point, even if it's not ideal, even including (3 colors) under the name of the product in the collections page would be better than they way it is now

1 Like
Highlighted
Shopify Staff
Shopify Staff
182 0 12

Hi Abdelaziz, 

You could list the variants as colour swatches on the collection page, here are themes that have this feature:

I think that's the best workaround :) 

 

0 Likes
Highlighted
Tourist
3 0 1

Thanks again for your help.

I don't want to be disrespectful, but what you posted is not the bes workaround. The best workaround is to just insert a code in the HTML/CSS that would display the option I'm looking for, the same way those themes you posted have that code in their theme.

So I was looking for that type of help here

Again, I don't want to sound mean. Just saying that the suggestions are not what I'm looking for

Thanks!

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
182 0 12

Hi Aziz, 

That's totally understandable, sometimes our suggestions aren't the best solution and your feedback can help us learn more about which features merchants need :) I hope someone else is able to help with coding this! 

0 Likes
Highlighted

Hi Aziz 

Variation selection on the collection page we have coded this feature for our other client.  Just drop an email on info@ecommercewebguru.com

Thanks

 

 

 

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: ecommercewebguru@gmail.com
Skype: ecommercewebguru
0 Likes
Highlighted
Shopify Partner
13 0 1

Hi Aziz

Were you able to solve this?

I tried emailing info@ecommercewebguru.com but the message bounce saying info@ecommercewebguru.com no longer exist.

0 Likes
Highlighted
New Member
3 0 0

Hey, I was trying to find a way to exactly what you are trying to do. However I was unable to find a good answer to that, so for now I've decided to just leave a "more colors" or "more styles" text below the price for the items that have 2 or more color variants. It works fine for me and If you'd like a temporary solution until you can find the answer then here you go:

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 helps!

0 Likes
Highlighted
Shopify Partner
13 0 1

Hi Sunhye Kee

Thank you for your response. 

I actually saw the feature on grovemade.com. They are a shopify store. At the time of my old post, they had a feature where on their "collections" page, if you select a particular dropdown menu option of a product (size or color), the product image changes to the selected option and the price updates.

This feature is usually already in a "product" page, but I am hoping to get the feature out to the "collections" page. Here is the example in the "product" page where if you change the size of the planter the image changes. 

I will try to look for internet archives of that page to see if I can still find that feature in the collections page. Thanks

 

Hi Sunhye 

I tried looking for a copy on the archives but can not find it. If you know of a solution. Please let me know!. Thanks for also keepthing this thread alive.

0 Likes