Automatically change variant order with code

Technical Q&A
1

Hello, working with a very large brand with over 1000 sku’s

I’m wanting to mass change the order of variant options (ex: I want them to choose a color first, then a size)

Is there code I can add to our theme that will automatically put ‘color’ as the first variant choice?

Editing this for 1000+ sku’s will take a very, very long time.

Thanks for the help!

2

Hello @romiller211 , good evening.

Yes, there is actually a way of changing the order of appearance through coding using CSS. But there are a few different ways this can be done, it depends on the theme you’re using

3

Thank you for your help!

We’re using the ‘symmetry’ theme

4

Yes, it is possible to adjust that through simple css. Although it is not much friendly code to people outside of the coding world. Do you have a developer in your team? Or are you one?

5

Hi @romiller211 ,

Please send me the code of main-product.liquid file, I will check it for you.

6

I have intermediate coding experience - I add/edit many other features to the site this problem was just too advanced for me.

7

Hi @romiller211 ,

Please send me the code of main-product.liquid file, I will check it for you.

8

Ok. Go to Shopify Admin, and then try to do the following:

Online Store > Themes > Click on the button ‘Actions’ of your current theme > Edit code
Search for the ‘styles.css’ file on your Assets folder, or any other place that you assume will be a good place to do the styling.

On the end of that file, write:

.product-detail .option-selectors {
   display: flex;
   flex-direction: column;
}

.product-detail .option-selectors .option-selector[data-option-index="0"] {
   order: -1;
}

PS: in the code, the part where it says ‘[data-option-index=“0”]’, you have to use the current position of the color variant as the selector, as in:

If the color variant was currently the first variant selector that appears, you would leave this 0 on, if it is the the second, you would change the 0 to 1, if it is the third, the 0 to 2, and so on.

Let me know if this works