List product color variants as individual items on a shop page

Site URL: https://www.aquariusswim.com/

Hello, 

I am trying to list each product color variant as a separate item on a shop page. Right now its is listing as one product and the product page shows the color options. I would like to display each color on just the shop page.

e.g. Bodysuit that comes in white, black, orange, purple as 4 items on the shop page and then when clicked goes to the correct color option for that bodysuit. Is that possible?

you would need to create separate products if you want to display them separately instead of using the variant feature. white bodysuit = 1 product; black bodysuit = 1 product; orange bodysuit = 1 product; purple bodysuit = product. you can duplicate a product and simply change the title and modify the description to reflect the color. add product thumbnail too that corresponds to the color of bodysuit.

@sruss76Thank you for this. But then I would also add each color variation to that product? Here is an example. https://coverswim.com/collections/swimsuits

This site lists each separate product on their shop page but then when you select one you see the color selected but also the ability to choose the other color on that same page. Just worried I might have duplicate variants/inventory...

On 4/15/2021 at 9:13 PM, CMVICINI said:

I am trying to list each product color variant as a separate item on a shop page. Right now its is listing as one product and the product page shows the color options.

There isn't a built-in feature to do this, but a number of workarounds may be possible. Each will have different advantages and disadvantages that would need to be considered. Also, custom code will likely be necessary to make it user-friendly. 

Here are some ideas:

1. Create a separate product for each color, so you'll have 4 products for the 4 colors of the bodysuit. This will meet your requirement for four products on the Product List Page (shop-swim).

Then, add a faux color selector on the Product Detail Page so that the user can switch between the different products (the white, black, orange and purple versions). The color selector will need to be custom coded for this site, as it will actually switch between product detail pages, not variants.

OR

2. Create one product for the base product, such as the bodysuit. Add a variant for each color (and a variant for each size in each color). This will give you a Product Detail Page that meets your needs. The default variant dropdowns will allow customers to select the required color and size.

Then, create a faux Product List Page with thumbnails for each of the product colors. You can create this page using a hidden collection (Gallery, Blog or Store page) that feeds a Summary Block on the page. When a customer clicks on the 'black bodysuit' they'll be sent to the 'bodysuit' Product Detail Page. Some code could preselect the correct color from the variant dropdown when they arrive on the page.

I hope this helps to get you started. 

@paul2009 

Do you happen to have access to the custom code for the faux color selector jumping to different products?

8 hours ago, dreyahb said:

Do you happen to have access to the custom code

When I said "custom" I was referring to code written for a specific site, not generic code that would be posted on the forum.

On 4/16/2021 at 12:36 AM, CMVICINI said:

@sruss76Thank you for this. But then I would also add each color variation to that product? Here is an example. https://coverswim.com/collections/swimsuits

This site lists each separate product on their shop page but then when you select one you see the color selected but also the ability to choose the other color on that same page. Just worried I might have duplicate variants/inventory...

I checked your site and saw that you fixed your issue. Can you tell me how you did it, even though this is an old thread?