Show all product colour variants within collection page

Highlighted
New Member
8 0 0

Hi There

We would like to show all available colour variants for a product within the collection page. Currently the customer can only see other colour options for Garment if they click into the primary product.

I.e

Product: "Rad T-Shirt"
Colours: Red(Primary), Green, Blue

On the collection page instead of the product appearing just once with the primary image red, we would like to repeat the product again with the green image and also the blue.

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?

I have a background in php/html, but don't know my way around liquid or JS very so wondering if someone might be able to give me some guidance

Cheers

0 Likes
Highlighted
New Member
3 0 0

Hello boardnz,

Please check out this link:

http://czarto.com/2012/03/02/adding-color-swatches-to-your-shopify-collections-page/

Here you can learn how to show all the available colours for each specific product on the collection page.

Cheers.

0 Likes
Highlighted
New Member
2 0 0

Hi, I too would like to know how to do this, and I'm pretty sure the answer above isn't the right thing that I'm looking for. I need to show all product variants on the collection page, as if they were each their own product. Then once you click into that variant, it would be loaded in the swatches already as the selected product. 

Thanks in advance for any help!

0 Likes
Highlighted
New Member
8 0 0

@catherine - yep that's what we're after too! No luck so far...

0 Likes
Highlighted
Shopify Expert
9978 110 1787

It's possible to do but it brings weird display quirk along with it. Let's say your normal layout shows 10 items per page and you have 30 items in that collection. If you add the extra code to use variants instead, page one could show more than 10 items. Let's say that:

  • page 1 show 200 variants
  • page 2 shows 29 variants
  • page 3 shows 100 variants

Since the first page was so big and the second is not a neat number, your chances of someone realizing there is a third page drops dramatically. This might not be a big deal for you, but it's worth noting.

Now you could also load every variant for the collection via JavaScript and create your own pagination. This helps avoid the quirk above but takes a lot more code and will be a bit slower to load on massive collections.

Keep in mind that a lot of themes are not built to handle variable items numbers - especially on responsive theme - so you'd be looking at making changes to both the html/liquid and the css.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
2 0 0

@Jason thanks for writing back. We don't have too many products so this shouldn't be an issue for us. Any Idea what the code would look like to output this. We are fine with editing the html and css to make it look right. 

Thanks!

0 Likes
Highlighted
Shopify Expert
9978 110 1787

Each theme has different code so you will need to do a lot of figuring out what code to add. You'd start by getting familiar with how to loop over variants. As you loop over the variants, you'd output product boxes in the place of the current product box. As a very (very) simple example:

{% for product in collection.products %}
   {% for variant in product.variants %}
      <! -- some html product box layout here -->
   {% endfor %}
{% endfor %}

 

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