Last Updated on by Dan S
Originally Published November 18, 2021.
How to turn automatic selection off for product variants on a Shopify product page
If you are a Shopify merchant who sells multiple variants on a product, Shopify automatically selects a variant when a consumer lands on your product page. An example of this would be if you sell socks. You might have different colours that your customers can choose between, such as yellow, blue, red, green etc.
When a consumer lands on your product page, the first variant of that product is automatically selected. If you’d like to turn automatic selection off for a product, this can be done.
How to turn automatic selection off for product variants
To turn automatic selection off for product variants, you’ll need to add prompts to the drop-down menu. Here’s how to do this:
- Go to the Snippets directory and click on Add a new snippet
- Keep its name ‘pick-an-option’
- Paste this code in the new snippet file and save it
- Go to the Layout directory and select theme.liquid
- Look for the </body> tag at the end of the file
- Paste this code {% render ‘pick-an-option’ %} on a line above this tag
- Click Save
- Next, find the file containing the form for ‘add to cart.’ The action attribute in this file will be /cart/add
- Once you locate the file, look for one of the following codes
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>Or…
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>- Replace this with the following code
<option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>- Lastly, click Save
How to change add to cart settings
You can change these settings to ensure that the products don’t appear unavailable before the customer makes a selection.
- Go to Online Store and Themes
- Select the theme you want to edit and choose Actions
- Select Edit Language and go to the Filter items box
- Type ‘unavailable.’ It will show you the translation
- Change Unavailable to Make a selection
If you want to hide certain product variants without deleting them, this can be done also.
