Jump to content

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 comment

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 comment
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. 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

Link to comment
  • 11 months later...
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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.