Get customers to choose an option
When a customer visits a product page in your online store, the first available variant is selected by default. You can use this customization to disable the auto-selecting of the first available variant. That way, the customer will be prompted to manually select a variant before one is shown.
Sectioned and non-sectioned themes
- Sectioned themes
- Non-sectioned themes
Select your theme
The steps for this customization vary depending on your theme. Click the button for your theme before following the instructions below:
- Boundless
- Debut
- Minimal
- Narrative
- Simple
- Supply
- Venture
Steps for Boundless
Follow these steps to apply the customization to Boundless:
Edit your theme's JavaScript file
To show a featured image on a product page, you have to edit the code to your theme's JavaScript file:
- Desktop
- iPhone
- Android
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Assets directory, click
theme.js
ortheme.js.liquid
.Add the following code to the bottom of the file:
$(document).ready(function() { if( typeof(productOptions ) != "undefined" ){ for(i=0;i<productOptions.length;i++) { const vowels = ['a', 'e', 'i', 'o', 'u']; let indef = 'a'; const firstOptionLetter = productOptions[i][i][0].toLowerCase(); if(vowels.includes(firstOptionLetter)) { indef = 'an'; }; $('.single-option-selector:eq('+ i +')') .filter(function() { return $(this).find('option').length > 1 }) .prepend(`<option value="">Pick ${indef} ${productOptions[i][i]}</option>`) .val('') .trigger('change'); } } });
Find the following line of code:
var imageId = variant.featured_image.id;
Replace it with:
var imageId = variant.image.id;
Find the following line of code:
$(selectors.addToCartText).html(theme.strings.soldOut);
There are two instances of this line of code, both found within the productVariantCallback function. Replace only the second instance with:
$(selectors.addToCartText).html('Make a Selection');
Click Save.
Edit your product page template
To edit your product page template:
In the Sections directory, click
product-template.liquid
.Find the following code:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign current_variant = product.selected_variant %}
Find the following code:
selected="selected"
Delete the above code, along with the Liquid logic tags that surround it. The code to be deleted looks like this:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Paste the following code at the bottom of the file:
<script> var productOptions = []; {% for option in product.options %} var optionObj = {}; optionObj[ {{ forloop.index0 }} ] = "{{ product.options[forloop.index0] }}"; productOptions.push(optionObj); {% endfor %} </script>
Click Save.
Change the Add to cart button language settings
You can change the language settings for the Add to cart button so that products do not appear as "Unavailable" before a selection is made.
- Desktop
- iPhone
- Android
- From your Shopify admin, go to Online Store > Themes.
- From the Shopify app, tap Store.
- In the Sales channels section, tap Online Store.
- Tap Manage themes.
- From the Shopify app, tap Store.
- In the Sales channels section, tap Online Store.
- Tap Manage themes.
Find the theme that you want to edit, and then click Actions > Edit languages.
In the Filter box, start typing
unavailable
to show the "Unavailable" translation.Replace the text Unavailable to
Make a selection
.Click Save.
Steps for Debut
Follow these steps to apply the customization to Debut:
Edit your theme's JavaScript file
To show a featured image on a product page, you have to edit the code to your theme's JavaScript file:
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Assets directory, click
theme.js
ortheme.js.liquid
.Add the following code to the bottom of the file:
(function() { if( typeof(productOptions ) != "undefined" ){ for(i=0; i < productOptions.length; i++) { var select = document.getElementById('SingleOptionSelector-' + i ); select.filter = function () { return this.find('option').length > 1 } var option = new Option('Pick a ' +productOptions [i][i], ''); select.add(option, select.firstChild); select.selectedIndex = 0; } } })();
Find the code
_updatePrice: function(variant)
. Replace the following code:if (variant.price === this.currentVariant.price && variant.compare_at_price === this.currentVariant.compare_at_price) { return; }
with:
/* if (variant.price === this.currentVariant.price && variant.compare_at_price === this.currentVariant.compare_at_price) { return; } */
Find the code
this.currentVariant = variant;
Add the following code below:
this._updatePaymentButton(variant);
The result should look something like this:
this.currentVariant = variant; this._updatePaymentButton(variant);
Find the code
_updateImages: function(variant)
. Replace the following code:var currentVariantImage = this.currentVariant.featured_image || {};
with:
if( this.currentVariant != undefined ) { var currentVariantImage = this.currentVariant.featured_image || {}; }
Just below, find and replace the following code:
if ( !variant.featured_image || variantImage.src === currentVariantImage.src ) { return; }
with:
/* if ( !variant.featured_image || variantImage.src === currentVariantImage.src ) { return; } */
Find the code
_updateSKU: function(variant)
. Replace the following code:if (variant.sku === this.currentVariant.sku) { return; }
with:
if (this.currentVariant != undefined ) { if (variant.sku === this.currentVariant.sku) { return; } }
Find the code
_updateSKU: function(variant)
. Replace the following code:if (this.storeAvailability && this.variants.currentVariant.available) { this.storeAvailability.updateContent(this.variants.currentVariant.id); }
with:
/*if (this.storeAvailability && this.variants.currentVariant.available) { this.storeAvailability.updateContent(this.variants.currentVariant.id); }*/
Just below the
_updateSKU
function, add the following code:_updatePaymentButton: function(variant) { if (this.currentVariant != undefined) { document.querySelector('.payment-button').removeAttribute('class', 'visually-hidden'); } else { document.querySelector('.payment-button').setAttribute('class', 'visually-hidden'); } },
The code should look something like this:
_updateSKU: function(variant) { if (this.currentVariant != undefined ) { if (variant.sku === this.currentVariant.sku) { return; } } this.container.dispatchEvent( new CustomEvent('variantSKUChange', { detail: { variant: variant }, bubbles: true, cancelable: true }) ); }, _updatePaymentButton: function(variant) { if (this.currentVariant != undefined) { document.querySelector('.payment-button').removeAttribute('class', 'visually-hidden'); } else { document.querySelector('.payment-button').setAttribute('class', 'visually-hidden'); } },
Click Save.
Edit your product page template
To edit your product page template:
In the Sections directory, click
product-template.liquid
.Find the following code:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Replace it with:
{% if product.variants.size > 1 %} {% assign current_variant = product.selected_variant %} {% else %} {% assign current_variant = product.first_available_variant %} {% endif %}
Find the following code:
selected="selected"
Delete the above code, along with the Liquid logic tags that surround it. The code to be deleted looks like this:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
or this:
{%- if variant == current_variant %} selected="selected" {%- endif -%}
Find the following code:
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
Replace it with:
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
or find this code:
{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
Replace it with:
{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}
Find and replace the following code:
{% unless current_variant.available %} {{ 'products.product.sold_out' | t }} {% else %} {{ 'products.product.add_to_cart' | t }} {% endunless %}
with:
{% if current_variant == null %} {{ 'products.product.unavailable' | t }} {% elsif current_variant.available %} {{ 'products.product.add_to_cart' | t }} {% else %} {{ 'products.product.sold_out' | t }} {% endif %}
Find and replace the following code:
{% if section.settings.enable_payment_button %} {{ form | payment_button }} {% endif %}
with:
<div class="payment-button {% if current_variant == null %}visually-hidden {% endif %}"> {% if section.settings.enable_payment_button %} {{ form | payment_button }} {% endif %} </div>
Paste the following code at the bottom of the file:
{% if current_variant == null %} <script> var productOptions = []; {% for option in product.options %} var optionObj = {}; optionObj[ {{ forloop.index0 }} ] = "{{ product.options[forloop.index0] }}"; productOptions.push(optionObj); {% endfor %} </script> {% endif %}
Click Save.
Edit your product price snippet
To edit your product price snippet:
In the Snippets directory, click
product-price.liquid
.Find and replace the following code:
{%- liquid if variant.title assign compare_at_price = variant.compare_at_price assign price = variant.price assign available = variant.available else assign compare_at_price = 1999 assign price = 1999 assign available = true endif assign money_price = price | money -%}
with:
{%- liquid if variant.title assign compare_at_price = variant.compare_at_price assign price = variant.price assign available = variant.available elsif product.title assign compare_at_price = product.compare_at_price assign price = product.price assign available = product.available else assign compare_at_price = 1999 assign price = 1999 assign available = true endif assign money_price = price | money -%}
Change the Add to cart button language settings
You can change the language settings for the Add to cart button so that products do not appear as "Unavailable" before a selection is made.
- Desktop
- iPhone
- Android
- From your Shopify admin, go to Online Store > Themes.
- From the Shopify app, tap Store.
- In the Sales channels section, tap Online Store.
- Tap Manage themes.
- From the Shopify app, tap Store.
- In the Sales channels section, tap Online Store.
- Tap Manage themes.
Find the theme that you want to edit, and then click Actions > Edit languages.
In the Filter translations box, start typing
unavailable
to show the "Unavailable" translation:Change the text Unavailable to Make a selection:
Click Save.
Steps for Minimal
Follow these steps to apply the customization to Minimal:
Edit your theme's JavaScript file
To show a featured image on a product page, you have to edit the code to your theme's JavaScript file:
- Desktop
- iPhone
- Android
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Assets directory, click
theme.js
ortheme.js.liquid
.Add the following code to the bottom of the file:
$(document).ready(function() { if( typeof(productOptions ) != "undefined" ){ for(i=0;i<productOptions.length;i++) { $('.single-option-selector:eq('+ i +')') .filter(function() { return $(this).find('option').length > 1 }) .prepend('<option value="">Pick a ' + productOptions[i][i] + '</option>') .val('') .trigger('change'); } } });
Click Save.
Edit your product page template:
To edit your product page template:
In the Sections directory, click
product-template.liquid
.Find the following code:
{% assign variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign variant = product.selected_variant %}
Find the following code:
selected="selected"
Delete the above code, along with the Liquid logic tags that surround it. The code to be deleted looks like this:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Find all occurrences of this code:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Replace with:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
Paste the following code at the bottom of the file:
<script> var productOptions = []; {% for option in product.options %} var optionObj = {}; optionObj[ {{ forloop.index0 }} ] = "{{ product.options[forloop.index0] }}"; productOptions.push(optionObj); {% endfor %} </script>
Click Save.
Change the Add to cart button language settings
You can change the language settings for the Add to cart button so that products do not appear as "Unavailable" before a selection is made.
- Desktop
- iPhone
- Android
- From your Shopify admin, go to Online Store > Themes.
- From the Shopify app, tap Store.
- In the Sales channels section, tap Online Store.
- Tap Manage themes.
- From the Shopify app, tap Store.
- In the Sales channels section, tap Online Store.
- Tap Manage themes.
Find the theme that you want to edit, and then click Actions > Edit languages.
In the Filter translations box, start typing
unavailable
to show the "Unavailable" translation:Change the text Unavailable to Make a selection:
Click Save.
Steps for Narrative
Follow these steps to apply the customization to Narrative:
Edit your theme's JavaScript file
To show a featured image on a product page, you have to edit the code to your theme's JavaScript file:
- Desktop
- iPhone
- Android
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Assets directory, click
custom.js
.Add the following code to the bottom of the file:
$(document).ready(function() { if( typeof(productOptions ) != "undefined" ){ for(i=0;i<productOptions.length;i++) { $('.single-option-selector:eq('+ i +')') .filter(function() { return $(this).find('option').length > 1 }) .prepend('<option value="">Pick a ' + productOptions[i][i] + '</option>') .val('') .trigger('change'); } } });
Click Save.
Edit your product page template
To edit your product page template:
In the Sections directory, click
product-template.liquid
.Find the following code:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% if product.variants.size > 1 %} {% assign current_variant = product.selected_variant %} {% else %} {% assign current_variant = product.first_available_variant %} {% endif %}
Paste the following code at the bottom of the file:
<script> var productOptions = []; {% for option in product.options %} var optionObj = {}; optionObj[ {{ forloop.index0 }} ] = "{{ product.options[forloop.index0] }}"; productOptions.push(optionObj); {% endfor %} </script>
Click Save.
Change the Add to cart button language settings
You can change the language settings for the Add to cart button so that products do not appear as "Unavailable" before a selection is made.
- Desktop
- iPhone
- Android
- From your Shopify admin, go to Online Store > Themes.
- From the Shopify app, tap Store.
- In the Sales channels section, tap Online Store.
- Tap Manage themes.
- From the Shopify app, tap Store.
- In the Sales channels section, tap Online Store.
- Tap Manage themes.
Find the theme that you want to edit, and then click Actions > Edit languages.
In the Filter translations box, start typing
unavailable
to show the "Unavailable" translation:Change the text Unavailable to Make a selection:
Click Save.
Steps for Simple
Follow these steps to apply the customization to Simple:
Edit your theme's JavaScript file
To show a featured image on a product page, you have to edit the code to your theme's JavaScript file:
- Desktop
- iPhone
- Android
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Assets directory, click
theme.js
ortheme.js.liquid
.Add the following code to the bottom of the file:
$(document).ready(function() { if( typeof(productOptions ) != "undefined" ){ for(i=0;i<productOptions.length;i++) { $('.single-option-selector:eq('+ i +')') .filter(function() { return $(this).find('option').length > 1 }) .prepend('<option value="">Pick a ' + productOptions[i][i] + '</option>') .val('') .trigger('change'); } } });
Click Save.
Edit your product page template
To edit your product page template:
In the Sections directory, click
product-template.liquid
.Find the following code:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign current_variant = product.selected_variant %}
Find the following code:
selected="selected"
Delete the above code, along with the Liquid logic tags that surround it. The code to be deleted looks like this:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Paste the following code at the bottom of the file:
<script> var productOptions = []; {% for option in product.options %} var optionObj = {}; optionObj[ {{ forloop.index0 }} ] = "{{ product.options[forloop.index0] }}"; productOptions.push(optionObj); {% endfor %} </script>
Click Save.
Change the Add to cart button language settings
You can change the language settings for the Add to cart button so that products do not appear as "Unavailable" before a selection is made.
- Desktop
- iPhone
- Android
- From your Shopify admin, go to Online Store > Themes.
- From the Shopify app, tap Store.
- In the Sales channels section, tap Online Store.
- Tap Manage themes.
- From the Shopify app, tap Store.
- In the Sales channels section, tap Online Store.
- Tap Manage themes.
Find the theme that you want to edit, and then click Actions > Edit languages.
In the Filter translations box, start typing
unavailable
to show the "Unavailable" translation:Change the text Unavailable to Make a selection:
Click Save.
Steps for Supply
Follow these steps to apply the customization to Supply:
Edit your theme's JavaScript file
To show a featured image on a product page, you have to edit the code to your theme's JavaScript file:
- Desktop
- iPhone
- Android
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Assets directory, click
theme.js
ortheme.js.liquid
.Add the following code to the bottom of the file:
$(document).ready(function() { if( typeof(productOptions ) != "undefined" ){ for(i=0;i<productOptions.length;i++) { $('.single-option-selector:eq('+ i +')') .filter(function() { return $(this).find('option').length > 1 }) .prepend('<option value="">Pick a ' + productOptions[i][i] + '</option>') .val('') .trigger('change'); } } });
Click Save.
Edit your product page template
To edit your product page template:
In the Sections directory, click
product-template.liquid
.Find the following code:
{% assign variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign variant = product.selected_variant %}
Find the following code:
selected="selected"
Delete the above code, along with the Liquid logic tags that surround it. The code to be deleted looks like this:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Find all occurrences of this code:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Replace with:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
Paste the following code at the bottom of the file:
<script> var productOptions = []; {% for option in product.options %} var optionObj = {}; optionObj[ {{ forloop.index0 }} ] = "{{ product.options[forloop.index0] }}"; productOptions.push(optionObj); {% endfor %} </script>
Click Save.
Change the Add to cart button language settings
You can change the language settings for the Add to cart button so that products do not appear as "Unavailable" before a selection is made.
- Desktop
- iPhone
- Android
- From your Shopify admin, go to Online Store > Themes.
- From the Shopify app, tap Store.
- In the Sales channels section, tap Online Store.
- Tap Manage themes.
- From the Shopify app, tap Store.
- In the Sales channels section, tap Online Store.
- Tap Manage themes.
Find the theme that you want to edit, and then click Actions > Edit languages.
In the Filter translations box, start typing
unavailable
to show the "Unavailable" translation:Change the text Unavailable to Make a selection:
Click Save.
Steps for Venture
Follow these steps to apply the customization to Venture:
Edit your theme's JavaScript file
To show a featured image on a product page, you have to edit the code to your theme's JavaScript file:
- Desktop
- iPhone
- Android
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Assets directory, click
theme.js
ortheme.js.liquid
.Add the following code to the bottom of the file:
$(document).ready(function() { if( typeof(productOptions ) != "undefined" ){ for(i=0;i<productOptions.length;i++) { $('.single-option-selector:eq('+ i +')') .filter(function() { return $(this).find('option').length > 1 }) .prepend('<option value="">Pick a ' + productOptions[i][i] + '</option>') .val('') .trigger('change'); } } });
Find the code
_updatePrice: function(variant)
. Replace the following code:if (variant.price === this.currentVariant.price && variant.compare_at_price === this.currentVariant.compare_at_price) { return; }
with:
/* if (variant.price === this.currentVariant.price && variant.compare_at_price === this.currentVariant.compare_at_price) { return; } */
Click Save.
Edit your product page template
To edit your product page template:
In the Sections directory, click
product-template.liquid
.Find the following code:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% if product.variants.size > 1 %} {% assign current_variant = product.selected_variant %} {% else %} {% assign current_variant = product.first_available_variant %} {% endif %}
Find the following code:
selected="selected"
Delete the above code, along with the Liquid logic tags that surround it. The code to be deleted looks like this:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Find all occurrences of this code:
{% unless current_variant.available %}
Replace with:
{% unless current_variant.available or product.variants.size == 1 and variant.available %}
Paste the following code at the bottom of the file:
<script> var productOptions = []; {% for option in product.options %} var optionObj = {}; optionObj[ {{ forloop.index0 }} ] = "{{ product.options[forloop.index0] }}"; productOptions.push(optionObj); {% endfor %} </script>
Click Save.
Change the Add to cart button language settings
You can change the language settings for the Add to cart button so that products do not appear as "Unavailable" before a selection is made.
- Desktop
- iPhone
- Android
- From your Shopify admin, go to Online Store > Themes.
- From the Shopify app, tap Store.
- In the Sales channels section, tap Online Store.
- Tap Manage themes.
- From the Shopify app, tap Store.
- In the Sales channels section, tap Online Store.
- Tap Manage themes.
Find the theme that you want to edit, and then click Actions > Edit languages.
In the Filter translations box, start typing
unavailable
to show the "Unavailable" translation:Change the text Unavailable to Make a selection:
Click Save.
Add prompts to your variant drop-down menus
To add prompts to your variant drop-down menus:
In the Snippets directory, click Add a new snippet.
Name your new snippet
pick-an-option
.
In your new snippet file, paste this code hosted on GitHub.
Click Save.
In the Layout directory, click
theme.liquid
.Find the closing
</body>
tag near the bottom of the file. On a new line right above the closing</body>
tag, paste the following code:{% render 'pick-an-option' %}
Click Save.
Find the file that contains the add to cart form. It will have an
action
attribute set to/cart/add
.It should be in one of these four files:
- the
product.liquid
template under Templates - the
theme.liquid
layout under Layout - the
product.liquid
snippet under Snippets - the
single-product.liquid
snippet under Snippets
- the
Find this code inside the form:
<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 it with:
<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>
Find and replace the following code:
Minimal, Pop, or Supply
If you use Minimal, Pop, or Supply, find all occurrences of this code:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Replace with:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
Other free Shopify themes
If you use any other Shopify theme, find this code:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign current_variant = product.selected_variant %}
Click Save.
Change the Add to cart button language settings
You can change the language settings for the Add to cart button so that products do not appear as "Unavailable" before a selection is made.
- Desktop
- iPhone
- Android
- From your Shopify admin, go to Online Store > Themes.
- From the Shopify app, tap Store.
- In the Sales channels section, tap Online Store.
- Tap Manage themes.
- From the Shopify app, tap Store.
- In the Sales channels section, tap Online Store.
- Tap Manage themes.
Find the theme that you want to edit, and then click Actions > Edit languages.
In the Filter translations box, start typing
unavailable
to show the "Unavailable" translation:
- Change the text Unavailable to Make a selection:
- Click Save.