Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

List product color variants as individual items on a shop page


Recommended Posts

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?

Edited by CMVICINI
Link to post
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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 l

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.

Link to post
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. 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include. Pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.  Squarespace. I've been a loyal supporter of the platform since 2007. 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...