How Do I Disable Auto Select Variant - Spotlight Theme

How Do I Disable Auto Select Variant - Spotlight Theme

markproducts
Visitor
2 0 1

Title says it all. I would like my customer to be forced to select a variant on the products they purchase, rather than the first variant be auto-selected.

 

Thank you!

Replies 9 (9)

ThePrimeWeb
Shopify Partner
2139 616 519

Hey @markproducts,

 

The first variant has to be auto selected because the pricing needs to be shown. Without a variant selected, the pricing cannot be shown, and other parts of the product as well, so likely you will break the theme.

We could however make it more obvious that the customer needs to select a variant. Can I have the link to your store please? 

After looking at it, I will share my recommendations.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
markproducts
Visitor
2 0 1

There is no price associated with the item either way as it is acting as a pre-order form. There are plenty of other solutions using other themes so I don't see why it won't work with a simple theme like Spotlight. Below is the link!

 

https://nationalgrid.myshopify.com/

ThePrimeWeb
Shopify Partner
2139 616 519

Hey @markproducts,

 

The details like that are important. I do have a solution, I just spent some time writing and testing it out. Please note that this will work for dropdowns only. I would have to spend alot more time to make sure it works on other type of variant pickers. 

 

If you haven't changed any of the code, the line numbers should be the same

 

In your theme's "Edit code" option, search for "product-variant-picker.liquid" and it should be in the Snippets folder.

Before the code '{% render 'product-variant-options','

 

add the following line

<option class="disabled-option" selected disabled>Select an option</option>

Screenshot below

ThePrimeWeb_0-1707842362422.png

 

 

Next search for "product-variant-options.liquid" and delete lines 106-108 (inclusive)

 

Screenshow highlighting the parts to delete.

ThePrimeWeb_1-1707842506344.png

 

 

Finally, search for "theme.liquid' and below the tag "<head>" tag paste the following.

 

    <style>
      body:has(.disabled-option:checked) .product-form__buttons button {
          display: none !important;
      }
      
      body:has(.disabled-option:checked) .product-form__buttons:after {
          content: 'Please select the options above!'
      }
    </style>

Screenshot below

ThePrimeWeb_2-1707842625281.png

 

 

You should have a similar look in the product page

ThePrimeWeb_3-1707842664770.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
DonD
Tourist
8 1 6

Thanks, this is helpful and it works up until the point where the shopper selects an option from one of multiple list boxes. At that point it breaks because the other list box now displays "null - Unavailable" rather than the original "Please select".

 

https://4c2fff-3.myshopify.com/products/vintage-look-sweater

 

password: dontest

 

Do you have any idea how to fix this? Thanks again,

Don

ThePrimeWeb
Shopify Partner
2139 616 519

Hey @DonD,

 

You could add some Javascript to handle that. 

Go to your theme.liquid file and add this add the bottom of your file ABOVE the </body> tag

<script>
try {
    let selectMenus = document.querySelectorAll('.product-form__input select');

    selectMenus.forEach(selectMenu => {
      selectMenu.addEventListener('change', (event) => {
        document.querySelectorAll('.disabled-option').forEach(function(value, index){
            setTimeout(() =>{
                value.innerHTML = 'Please select an option'    
            }, 300);     
        });
      });
    });
} catch {
    console.log('Menu not found');
}
</script>

 

Screenshot for reference

ThePrimeWeb_0-1707965751833.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
DonD
Tourist
8 1 6

Great! I tweaked your solution a bit because I want the prompt to be specific to the option (e.g. "Select a Size" and "Select a Color"). Your idea of adding a timed event listener to the list box is exactly what I needed to restore the prompts. I had tried using the onchange event with the same objective but it didn't work. Perhaps you can educate me about why that is...I suspect the 300 millisecond delay matters!

 

Coffee coming your way, thanks for your help.

 

Don

ThePrimeWeb
Shopify Partner
2139 616 519

Oh hey @DonD,

 

Thank you for your generosity first of all!

 

Regarding the timer, that's just a way of letting every other JavaScript in the theme run first and then run this particular script so that there are no clashes. When all run at the same time you can't really tell which script is going to be the last to execute. Basically the last one to run is the one that makes the final change. The delayed 300ms just makes sure this script is always the last to run and has the final say. I would think that reducing the time would still work assuming every other JS events are not written with a delay, but 300ms was just to be safe.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
p_and_p
New Member
7 0 0

Hi, I was trying to use this method on my shop, and I have some follow up questions if you don't mind.

 

I have many products with multiple variants, and followed your directions which solved the auto variant select issue. However, it seems to have disconnected my variant options (in this case, colors) to their assigned images. Instead, now it just keeps the same photo (which was the one for the variant that always was auto selected). This doesn't seem fixable from the product page at all.

 

Any ideas?

EasifyApps
Shopify Partner
635 19 52

Hi @markproducts,

For your requirement, utilizing the Easify Product Options app , including the free plan, could be a suitable solution. This app allows you to create all your product options without needing to set them up as regular Shopify variants. Thanks to that, you can ensure that no default options are pre-selected 🤗.

  • Storefront:

EasifyApps_0-1708102866809.png

cd.png

  • App Settings:

EasifyApps_1-1708103005555.png

EasifyApps_2-1708103026038.png

 

If you have any questions or if something's unclear, just let me know. Alternatively, you can reach out to the Easify team through the in-app live chat for quick assistance.

Easify Product Options: Any product options app can help you create custom options, but Easify turns those options into sales and conversions!
Easify Inventory Sync: Automate inventory syncing for Bundles, Duplicates, and Raw Materials. Say goodbye to manual tracking headaches.
Easify Product Attachments: Enrich your store with downloadable content. Easily add PDFs and other files to product or any page.
>>> Try Apps for Free | 24/7 Live Chat Support