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 deactivate the auto-selecting of the first available variant. That way, the customer is prompted to manually select a variant before one displays.

Pick an option

Sectioned and non-sectioned themes

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

Add prompts to your variant drop-down menus

To add prompts to your variant drop-down menus:

  1. In the Snippets directory, click Add a new snippet.
  2. Name your new snippet pick-an-option.

Add a new snippet

  1. In your new snippet file, paste this code hosted on GitHub.
  2. Click Save.
  3. In the Layout directory, click theme.liquid.
  4. 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' %}

Including the pick an option snippet

  1. Click Save.
  2. 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
  3. 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>
  1. 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 %}
  1. 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 don't appear as "Unavailable" before a selection is made.

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click ... > Edit default theme content.
  3. In the Filter box, start typing unavailable to show the "Unavailable" translation.
  4. Replace the text Unavailable to Make a selection.
  5. Click Save.
Ready to start selling with Shopify?Try it free