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?
Topic summary
A user wants to set the middle variant (12-pack) as the default selection on a product page while maintaining the current visual order (6-pack, 12-pack, 24-pack).
Proposed Solution:
One approach suggests reordering variants in the backend to make 12-pack first (which Shopify selects by default), then using CSS order properties to visually rearrange the display back to the original sequence. This involves:
- Making 12-pack the first variant in Shopify admin
- Adding custom CSS with
ordervalues to control visual positioning - Code can be placed in CSS file or custom Liquid section (wrapped in
<style>tags)
Alternative Perspective:
Another contributor notes this likely requires code modifications since Shopify automatically selects the first available variant by default. The workaround would only naturally select a non-first variant when earlier variants are out of stock.
The discussion remains open with no confirmed implementation or resolution.
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.
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.