Any way to set a default product option?

updosed · August 14, 2023

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?

creedon · August 15, 2023

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.

updosed · August 15, 2023

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.

Edited August 15, 2023 by updosed

creedon · August 16, 2023

Quote

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.

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.

Edited August 16, 2023 by creedon

Any way to set a default product option?

Recommended Posts

updosed

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

creedon

Link to comment

updosed

Link to comment

creedon

Link to comment

Create an account or sign in to comment

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources