d
Topic
Posts:
9
12 months ago
g
4
upvotes

Collection View-Show ALL product variants (color)

HI All,

Wondering if anyone has experience with this type of request.  I have a single product available in say 3 colors, (each set up as a separate sku # within 1 product, as variants (as I'm sure most would have it set up) Additionally, I would like to have each color image show as it's own featured image/product in the collection view grid, but then still show as a product with color variants when the customer clicks into the product page. Hope this makes sense!  

D

Daphne Rose – Awesome, disruptive company featuring trend forward jewelry & accessories...no funny business "We might be funny but we don't like funny business"
i
Replies
Posts:
4
9 months ago

I would be interested in this exact same thing. Anybody know if there's a way to customize the product-loop to achieve this?

Cheers

AV

Posts:
7
9 months ago

Ditto.

 

Posts:
9
9 months ago

Glad to see there is other interest in this!  

Daphne Rose – Awesome, disruptive company featuring trend forward jewelry & accessories...no funny business "We might be funny but we don't like funny business"
Posts:
7
9 months ago

I've re-read the original request here. And I think what I want is something different. I would like to merely show on the collection pages, attached to each product...IF the product has variants, show it on the listing. 

Like: Multiple Options available

Multiple Colors available

But only if it has a variant. If no variant, it just stays blank. I don't need to create multiple product listings.

 

Jason Shopify Expert freakdesign.com.au
Posts:
2213
9 months ago

@Brian. You'd be wanting to check the products variant size.

{% if product.variants.size > 1 %}
     do something...
{% else %}
     do something else...
{% endif %}

 

http://experts.shopify.com/freakdesign [#] http://freakdesign.com.au [#] https://twitter.com/freakdesign
Posts:
5
4 months ago

Has anyone been able to achieve this? It is pretty common on a lot of e-commerce sites and i'd love to be able to implement the feature on my own site.

Jason Shopify Expert freakdesign.com.au
Posts:
2213
4 months ago
g
1
upvotes

If you've got the coding skills you can add this in now.

  1. Loop over products in collection adding them to the screen
  2. Check for multiple variants on each product as you go...
  3. If you have multiples loop over those and add to screen as well (adding a id hash to the url)

On the product page, add some code to check if there url has a hash so you can auto select the right variant. Auto selecting a variant by hash:

http://experts.shopify.com/freakdesign [#] http://freakdesign.com.au [#] https://twitter.com/freakdesign
Posts:
5
4 months ago

Brilliant. Thanks for the fast response, Jason. My coding skills aren't the greatest but I should be able to work it out from your break down.

Barleysugar Member
Posts:
1
3 months ago

Hi Daphne Rose,

Just wondering how you solved your original requirement above?  I am new to shopify and coding and want to achieve the same thing with my product variant images as you requested (I would like each product variant to show as its own featured image in the product grid, but still show as a product with color variants when the customer clicks into the product page).  Is there any chance please you can share the step by step process you took to achieve this result?

Thanks so much, really appreciate the help.


Kate

boardnz Member
Posts:
7
3 months ago

Also interested in this

I have the concept that within the collection grid liquid file

Load the product as usual
Check if product.options = colour & options > 1
If yes create loop and build product x many times using a new image with the same order they photos are arranged in shopify admin or by 'alt' tags

but I haven't done much liquid coding so not sure on all the in's and out's...

Log in or sign up for an account to reply.

f
Your Reply