How to change the default variant that is selected upon page load?

Shopify Partner
5 0 1

For all my products I have one variant called "Size". It includes small, medium, and large.

When a product page loads the default variant is small. I would like the default variant be medium and also have the price reflect the medium selection as well.

I have been messing around with the JS on the page.liquid and can't seem to figure this out.

Any help would be appreciated.

Thanks in advance!

0 Likes
Shopify Staff
Shopify Staff
145 0 18

Hello there!

Jordan here from Shopify :)

Although I'm not totally sure on the exact steps to do this myself, I found a forum thread that might help point you in the right direction:

https://ecommerce.shopify.com/c/shopify-discussion/t/can-default-variant-be-2nd-item-in-dropdown-ins...

This thread is a bit out of date; you might now find the relevant code in the product.liquid template file in your theme's HTML/CSS editor by searching for 'selector' here. When I tried in a test shop, adding this line of code near the bottom of the script seemed to work:

jQuery(".single-option-selector").prop('selectedIndex', 1).trigger('change');

For example, it might look like this near the script's end:

However, if you have a product with only one variant from a given option (e.g. only one size or one color), the customer may have to click into the drop-down to choose the variant, before it can be added to their cart.

I thought I'd also mention our guide for asking customers to 'Pick an option' through the variant drop-downs, before an item can be added to their cart - if that's useful to you:

https://docs.shopify.com/themes/customization/products/how-to-add-a-pick-an-option-to-drop-downs

Hope this helps! Cheers,
Jordan

Shopify Guru
support@shopify.com

0 Likes
Shopify Partner
3 0 5

Hi Jordan - in a similar scenario, if someone adds a "Large" product to their cart, we can now infer that this is their size - is there a way we can default every product to "Large" now when they view it. I'm thinking about the same thing for shoe sizes, as an example.

Thanks!

0 Likes
Tourist
9 0 3

We'd love to be able to set default variants. Any updates to this would be great.

Again, all we want to do is set default variant. Can't figure out how to do this :(

Graham 

0 Likes
New Member
2 0 1

I was investigating this as well, and the following worked for me.

Viewing the source of a product page, I saw that the select box had an ID of "SingleOptionSelector-0", so in my custom .js file I added:

$(document).ready(function() {
  $("#SingleOptionSelector-0").val("<the value of the option I wanted selected>")
});
 

1 Like
New Member
7 0 0

Brooklyn topic how to modify?

0 Likes
Tourist
3 0 4

I found the following to work best given that you may have different types of products with variants in orders that vary. For instance, you might have a shirt that only comes in white so the first selection is the size compared to a shirt that comes in different colors, where now the first selection is the color etc. which may cause an issue when targeting a specific id.

 

In this case, I'm removing the selection of Small shirts and selecting Large shirts, while keeping the sizes in the drop-down in proper order.

 

I added the following to the very bottom of theme.js:

$(document).ready(function() {
   $("select option[value=S]").removeAttr("selected");
   $("select option[value=L]").attr('selected', 'selected').change();
});

3 Likes
Tourist
3 0 1

Thank you mrl2010 - this works for me.

0 Likes
Tourist
3 0 1

Well, with further testing this appears to work when browsing via the desktop but mobile defaults to XS instead of M, as specified.

0 Likes
Tourist
3 0 4

select-prints, I see, yeah, mobile is glitchy. Add this to your your code:

$("select option[value=L]").text("L");

 

The entire script should now be:

$(document).ready(function() {
   $("select option[value=S]").removeAttr("selected");
   $("select option[value=L]").attr('selected', 'selected').change();
   $("select option[value=L]").text("L");
});

1 Like