Hi,
It is my understanding that you cannot have product colour swatches on the collection page and ALSO have colour swatches on the product page that link to other products.
So what I would like is:
I want my different colour variations to link to a different page so that only that colour shows up. Eg - Dolly Knit comes in red & blue. So when you click on the knit you see the two colour swatch options. If you click on blue then it only shows you blue photos and if you click on red, it only shows you red photos.
I followed the instructions on this page to set that up: https://support.maestrooo.com/article/307-product-creating-product-variations-that-link-to-different-pages
That seems to work fine.
But now I want colour swatches to appear on the collection page under the image. AND I want the image to change to the corresponding colour of the swatches
Eg - The Dolly Knit comes in Blue & Red, so on the collection page, there is a red & blue circle under it to indicate it comes in different colours. If I click on blue swatch, it shows blue knit, if I click red knit, it shows red knit.
So, to do this, I need to set up variants in your product.
Eg. Size 1/Red
Size 1/Blue
and so on.
To make the images toggle between colours in the product page, I need to upload a red image to the blue knit product and assign that to the variant image.
As a reminder, I have two products set up - one for blue with all blue images and one with red images and they are linked. As I said at the start of my question.
So my first problem, is that I now have a random red image in my blue product so it will show on the collection page with the corresponding colour swatches. Please see below.
How do I get around this??? If the customer is wanting to look at blue, I just want images of blue.
So, now I have colour variants and size variants set up in my products, and I also have variant picker which is the selector that links to the other coloured product pages.
These being called:
- Product Variantions
- Varient Picker
So I now on my product page have two different colour swatch options.
If I hide Product Variantions then I lose the ability to swap to the linked colour variation product page.
But then if I hide Varient Picker then the customer cannot choose a size as the size is in as a variant.
I am just very very confused about how to achieve this. Please take a look at the collection page and product page of this website, I need it to function like this - https://friendswithfrank.com/collections/shopall
I need to have the colours set up as variants under the one product so then the colours/sizes will show up as sold out on the product page & collection page as that is how inventory is managed.
BUT I need to have it function that when the customer clicks on a colour swatch, it only shows them images of that colour.
Thank you so SO SO SO much.