Make middle variant the default

Technical Q&A
,
2

Hi @btwu10 ,

If you make the 12 pack variant the first variant on the page (so that it is preselected), and then add the following code to your homepage’s css file or a custom liquid section on the home page (this will change how the order looks, even though you would have the 12 pack as the first option in the backend), you should be able to have the 12 pack be preselected and still show up in the same order:

label[for="swatch-template--23970574467361__featured_product_mVX7gR-product-form-9448779710753-template--23970574467361__featured_product_mVX7gR--option1-6-pack"]{
order: 1;
}

label[for="swatch-template--23970574467361__featured_product_mVX7gR-product-form-9448779710753-template--23970574467361__featured_product_mVX7gR--option1-12-pack"]{
order:2;
}

label[for="swatch-template--23970574467361__featured_product_mVX7gR-product-form-9448779710753-template--23970574467361__featured_product_mVX7gR--option1-24-pack"]{
order: 3;
}

Note: If you are going with the custom liquid section route (instead of the css file), you’ll need to wrap this in tags.

Hope this helps!

If this was useful, a Like or marking it as a Solution is appreciated. Need more help? Feel free to reach out anytime using the email address/phone number in my signature.