CMVICINI Posted April 15, 2021 Posted April 15, 2021 (edited) 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 April 15, 2021 by CMVICINI
sruss76 Posted April 15, 2021 Posted April 15, 2021 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.
CMVICINI Posted April 15, 2021 Author Posted April 15, 2021 @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...
paul2009 Posted April 18, 2021 Posted April 18, 2021 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. BekarHaus and creedon 2 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
dreyahbohlen Posted March 28, 2022 Posted March 28, 2022 @paul2009 Do you happen to have access to the custom code for the faux color selector jumping to different products? www.dreyahbohlen.comInstagram | Facebook | TikTokBuy Me A Coffee
paul2009 Posted March 28, 2022 Posted March 28, 2022 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. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
ale3is Posted November 21, 2023 Posted November 21, 2023 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?
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment