fbpx

BOOST your sales 50% with upsells Learn more

Increase sales by 50% Learn more

How to turn automatic selection off for product variants on a Shopify product page

automatic selection off

Last Updated on by LAUNCHTIP

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.

Shopify product variants

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  

automatic selection off

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.

 

Want bigger orders?

Unlock instant revenue from your Shopify store with SellUp. Set and forget upsells that work 24/7 on autopilot.

More To Explore

Join over 30,000 merchants growing their stores with LAUNCHTIP