Get customers to choose an option
Caution
Vintage themes aren't available in the Theme Store. These themes don't have the features included in Shopify's Online Store 2.0 themes , and Shopify free Vintage themes don't receive updates beyond security fixes.
Note
This customization is for vintage Shopify themes, and doesn't apply to Online Store 2.0 themes.
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 deactivate the auto-selecting of the first available variant. That way, the customer is prompted to manually select a variant before one displays.
Note
Because this customization prevents a variant from being selected by default, your theme might not display a product price until after the customer selects a variant. This is expected behaviour, because products with variants don't have a featured price. The price that's displayed is determined by the variant that's selected.
Sectioned and non-sectioned themes
Note
The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme lets you drag and drop to arrange the layout of your home page, and a non-sectioned theme doesn't.
To figure out whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.
If you are using a sectioned theme, click the Sectioned themes button and follow the instructions. If you are using an older, non-sectioned theme, click the Non-sectioned themes button and follow the instructions.
Steps for 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:
Steps for Non-sectioned themes 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
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, then 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, then find this code:
{% assign current_variant = product . selected_or_first_available_variant %}
Replace it with:
{% assign current_variant = product . selected_variant %}
Click Save .
You can change the language settings for the Add to cart button so that products don't appear as "Unavailable" before a selection is made.
From your Shopify admin, go to Online Store > Themes .
Find the theme that you want to edit, and then click ... > Edit default theme content .
In the Filter box, start typing unavailable
to show the "Unavailable" translation.
Replace the text Unavailable to Make a selection
.
Click Save .