I have a product which has three variants. The option is size, and the three variants of this size option are 4, 6 & 8. On product page load the value of product.selected_or_first_available_variant is set to the 4 variant, presumably because this is the first variants listed in the product variant’s table in admin. I want the product to load on the 6 variant. But I do not want to change the order of the variants in the admin product variants table as this will have other undesired effects also (changing order of variant selector option values in UI).
How can I load this product so that it by default renders my 6 variant, as well as all of it’s attributes (price, stock) and images etc?
I would like to be able to be able to select a default variant to show on product page load for all of my products which have an option and have variants. Currently some of my products have zero options, and the others have only 1 option (set size), this may change in future. For my products which do have an option, they only have that one option, and that one option has three variations (4, 6 & 8). Hope this helps clarify the cases.
I’ve been wanting to do this too and it would be great if Shopify would introduce a default variant feature in the backend.
Example: Shopify Shop has T-shirts in Sizes S,M,L,XL,XXL. If the customer clicks on a product, they will be presented with the first variant. How many customers actually want a small T-shirt? Almost any product that has sizes will have a somewhat Gaussian distribution to the sizes required, yet by ordering the variants by size means that any user that opens the product, and is presented with the first variant, will be presented with a variant which is in one of the tails of the distribution. It makes very little sense and leads to problems.
Listen to this please. If the first variant (xtra-small) is out of stock the customer gets an immediate “Not Available” message when traveling from the thumbnail to the product page. It makes sense for xtra-small to be first on the size list, but not the default selection. Thank you.
While a default variant would get around your issue, if you are able and confident to edit the website code yourself, you can get around the specific issue that you have by using the following variable: selected_or_first_available_variant
Also if you don’t know coding → You can re order the variants in the product settings and make sure the option you want as default is first. Heres a pic of my store so you know where you go to order them.
The easiest way to make any option as the selected variant is:
Change the order from the product admin.
Through css add a flex propery to order, and assign it to your selected variant.
This way it we don’t need to make any javascript changes and on front end our selected variant comes in the order we wanted it to be.
Let say we have 3 option of Small, Medium, and Large. And we wanted to make the Medium one to be our selected variant. Firstly, from the admin make it 1st variant option, and then from css apply style of order:2 to that option. Hope that makes sense. Let me know if that helps someone to tackle the issue.
