Set default variant?

My site: https://www.lagovistafilmlab.com/shop/developandscan

I would love to set the default variant of "Select Scanning Size:" to default to "Enhanced JPG [included].

How do I go about doing that?

Same. Would love this feature.

Same here! That would definitely speed up the checkout process 

You don't need to pay for an app: use this code

<script>

function setValue() 
  
{
     var dropdown = document.querySelectorAll('[data-variant-option-name="Type"]')[0];
    dropdown.value = 'Summer Flap';
    Y.one(dropdown).simulate('change');
  
  var dropdown2 = document.querySelectorAll('[data-variant-option-name="Colour"]')[0];
    dropdown2.value = 'Orange $89';
    Y.one(dropdown).simulate('change');
  
}
  
  window.onload = setValue;

</script>

<script>
function setValue() {
document.querySelectorAll('div.variant-option select').forEach(function(dropdown){
  dropdown.selectedIndex = '1';
  Y.one(dropdown).simulate('change');
});
}
 window.onload = setValue ;
</script>

The above code can put in `Page Header Code Injection` and it will select the first variant option and displays its price as well

I modified @DomBrady answer to work with any product variant without having to specify variant details in code

On 8/8/2023 at 6:28 AM, AshAb said:

<script>
function setValue() {
document.querySelectorAll('div.variant-option select').forEach(function(dropdown){
  dropdown.selectedIndex = '1';
  Y.one(dropdown).simulate('change');
});
}
 window.onload = setValue ;
</script>

The above code can put in `Page Header Code Injection` and it will select the first variant option and displays its price as well

I modified @DomBrady answer to work with any product variant without having to specify variant details in code

Thanks for this!! 🙌🏼

On 8/8/2023 at 7:28 AM, AshAb said:

<script>
function setValue() {
document.querySelectorAll('div.variant-option select').forEach(function(dropdown){
  dropdown.selectedIndex = '1';
  Y.one(dropdown).simulate('change');
});
}
 window.onload = setValue ;
</script>

The above code can put in `Page Header Code Injection` and it will select the first variant option and displays its price as well

I modified @DomBrady answer to work with any product variant without having to specify variant details in code

Hey Ash, this one doesn't seem to be working for me. Would you be able to take a look for me?

product example: https://clementine-salamander-j4rd.squarespace.com/producten/p/eiken-tafel-oluf

password: JELSAN2024

What if I'm not using the variant dropdown but rather squarespace's variant "button"

site: creative-jewelers.squarespace.com

pw: abc123

13 minutes ago, austinalltheway21 said:

What if I'm not using the variant dropdown but rather squarespace's variant "button" [how can I set the default variant]

You should be able to select the first variant button using JavaScript. Try this:

<!-- Select first variant when using variant buttons -------------------->
<!-- Copyright Soundfocus Digital [https://sf.digital] ------------------>
<!-- Use freely in your code injection. Do NOT re-publish. -------------->
<script>
document.addEventListener('DOMContentLoaded', function() {
  var sfpv = document.querySelector('.product-variants');
  if (sfpv) {
    var sfvo = sfpv.querySelectorAll('.variant-option');
    sfvo.forEach(function(option) {
      // Find the first element with the class variant-radiobtn-wrapper within the current variant-option
      var sfrbw = option.querySelector('.variant-radiobtn-wrapper .sqs-button-element--secondary');
      if (sfrbw) {
        sfrbw.click();
      }
    });
  }
});
</script>

Did this help? Please give feedback by clicking an icon below  ⬇️

48 minutes ago, paul2009 said:

You should be able to select the first variant button using JavaScript. Try this:

<!-- Select first variant when using variant buttons -------------------->
<!-- Copyright Soundfocus Digital [https://sf.digital] ------------------>
<!-- Use freely in your code injection. Do NOT re-publish. -------------->
<script>
document.addEventListener('DOMContentLoaded', function() {
  var sfpv = document.querySelector('.product-variants');
  if (sfpv) {
    var sfvo = sfpv.querySelectorAll('.variant-option');
    sfvo.forEach(function(option) {
      // Find the first element with the class variant-radiobtn-wrapper within the current variant-option
      var sfrbw = option.querySelector('.variant-radiobtn-wrapper .sqs-button-element--secondary');
      if (sfrbw) {
        sfrbw.click();
      }
    });
  }
});
</script>

Did this help? Please give feedback by clicking an icon below  ⬇️

Thank you so much! That worked!

48 minutes ago, austinalltheway21 said:

Thank you so much! That worked!

Great! It's looking good.