Shopify themes, liquid, logos, and UX
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!
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.
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!
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
Next search for "product-variant-options.liquid" and delete lines 106-108 (inclusive)
Screenshow highlighting the parts to delete.
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
You should have a similar look in the product page
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
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
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
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.
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?
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 🤗.
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.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025