Any way to set a default product option?

I've changed dropdown options on product pages to display as buttons but when you open a product page nothing is preselected and doesn't look obvious that a customer is supposed to even make any selections before hitting "add to cart" button.

So my goal is to make my preselected option be default when the product page is first opened. Is there a way of making it work? Or a third-party plug in?

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

20 hours ago, creedon said:

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Thanks so much for your response!

https://www.htwtr.com/store/p/whole-bean-brazil-pedra-branca-natural-rlj7t-ktbk8
 

This product has various grinding options available but my goal is to have it default to a highlighted "whole bean" button. Currently you can "add to cart" without even selecting any variants. On my other product template that I am building https://www.htwtr.com/store/p/photo-of-baxter-by-mr-baxter-2bmd5 with multiple options when you "add to cart" without selecting one of the options it chooses the first available options automatically (size: small; frame: black) but they aren't highlighted when you load the product page. That's just not the best UX.

On 8/16/2023 at 3:30 AM, creedon said:

The following code is causing the UI issues.

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

Without this code the normal UI works as expected.

 

 

 

I think the following code would be closer to what you want.

const selector = '.ProductItem-details .variant-radiobtn-wrapper label:nth-of-type( 1 )';

document

  .querySelectorAll ( selector )
  
  .forEach ( e => e.click ( ) );

Let us know how it goes.

Hi Creedon,

I've been trying to achieve the same, where as soon as a customer opens a product page, the first variant options are preselected. The above code doesn't seem to be working for me. If you'd be able to assist me that'd be very much appreciated!

website: https://clementine-salamander-j4rd.squarespace.com
password: JELSAN2024