fbpx

BOOST your sales 50% with upsells 💸Show me

Increase sales by 50%... 💸Boost my sales!

Limited Time: 14 day free trial + pay only $1 for your first monthClaim!

14 day free trial + pay only $1 for your first monthClaim!

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

automatic selection off

Want to increase conversions?

Show a beautiful visual countdown timer to increase conversions, manage customer expectation and reduce customer service.

Last Updated on January 7, 2022 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, even whilst you sleep.

More To Explore