Removing Automatic Variant Selection

Hi everyone.

When going on my shopify store and into a product, its variants are automatically selected to be the first available options. I do not want this to be the case, I want the customer to be presented with no pre-selected variants and them having to select before adding to cart. My store uses the Flow theme.

Thank you for assistance in advance.

For this it requires the custom code into it. I mean that it need to add the custom logic code. So that when the customer land to the website it’s initially doesn’t select any variant.
And when customer try to click on the buy now button then it supposed to say “Please select the variant First“. Once the customer select the variant then they can able to make the Purchase.

Could you please share your store url and collab code in the p/m so that I can take a look.
Waiting to hear back from you.
Thanks

Hi @The_Lychee,

Please send the website link, I will check it for you

I think you can solve this by not assigning any images to your variants in Shopify admin page.

In the Flow theme, variants are auto-selected by default. You’d need to customize the theme code or use an app to show a ‘Please select’ option instead of a pre-selected variant.

Hi @The_Lychee

It’s true that Shopify themes (like Flow) always auto-select the first available variant by default. If you’d like to avoid touching code, one option is to use an app such as Easify Product Options. With it, you can rebuild your variant selectors so that nothing is preselected, meaning customers have to actively choose before adding to cart.

This is a great approach for store owners who aren’t comfortable editing Liquid or JS. Here’s how it works:

  • This is the result:

  • This is the app setting:

You’ll find this app easy to use, so I hope you give it a try. If you need assistance, just let me know or reach out to Easify! :blush:

Hello @The_Lychee

I hope you’re doing well. Since you prefer customers to make their own selections before adding a product to the cart, you’ll need to add some custom code for that. However, if you’d like to do this without coding, you can consider using the Inkybay Product Personalizer app.

Inkybay’s Product Option feature allows you to add options that are not preselected, so customers must manually pick their preferred choice before adding the product to the cart. This ensures shoppers must choose their preferred options manually. You can also display these options as dropdowns, swatches, or radio buttons, giving your product pages a clean and flexible look.

Setting up a product is very simple. Inkybay also offers a 21-day free trial, so you can check whether it meets your needs before committing. If you’d like, we can share a demo product with you.

Try to find this line in assets/product-form.js

this.currentVariant = this.getVariantData()[0];

and just comment it. (with //)

Do some tests after changes, maybe add to cart will not work corectlly.

ah in this theme is in :
component-product-information.js ,look there