Make middle variant the default

[btwu10]

 

How do I keep the same order of the variants but have the middle variant (12-pack) the default variant selected upon first visiting the page?

[marcuswebexp]

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 <style></style> 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.

[Shadab_dev]

I think this will most probably need code modifications not sure but probably because by default Shopify will select the first available variant. In that case it will only be selected when the first variant inventory is 0 which will not be the case everytime.