How do I separate color and size for variants picker dawn theme?

Shopify Discussion
1

Hi,

I am trying to sort out this problem im having.

I would like it to be like - [Color] [Size]

And the colors be - [Grey] [Brown] [Pink]

And sizes be - [Small] [Medium] [Large]

But cannot seem to figure it out!

Please help, thanks.

1212121.PNG
1212121.PNG664×499 34.1 KB

2

Also yes I am aware of how to add options and make it like how i want, but i have all the products pre-loaded ready to go how it is, I just need to split them. Thanks

3

Hi @jackvalentinex ,

This problem can be solved using metafield which will contain the list of metaobject which will contain the name and product URL.

You will create the separate product for every color with required other variants.

Metaobject will have the list color and available at product these option will be clickable if user click on GREY user will be redirected to grey product page which will have the rest of variant.

Please refer the below URL where we have implement the same thing but not for color but Brand

https://kaaf-nun.com/products/the-beloved-eco-phonecase

Please refer to the below video for more detailed implementation.

4

Hi @jackvalentinex
Since it is the one option, it can’t be shown as 2 options on frontend as the final variant is combination of the chosen options, so in your case, even after showing them as 2 separate option, we still have only one option
Although you can do it like this

  • You can split the variant title by “-” and store the information in line item properties
    It will require knowledge of liquid to do that, also, on product page, after splitting with liquid you can show them separately, but still it will be a single option

Have a great day!

Thanks!