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 the Get customers to choose an option customization to deactivate the auto-selection of the first available variant. This way the customer is prompted to manually select a variant before one displays.

If you use the Get customers to choose an option customization, then your theme might not display a product price until your customer selects a variant. Products with variants don't have a featured price and the price that's displayed is determined by the variant that's selected.

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

  1. In the Snippets directory, click Add a new snippet.
  2. Name your new snippet pick-an-option.
  3. In your new snippet file, paste this code hosted on GitHub.
  4. Click Save.
  5. In the Layout directory, click theme.liquid.
  6. 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' %}
  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 find this code inside the form:

  <option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Replace the code with the following code block:

<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>

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 the code with the following code block:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

If you use any other Shopify vintage theme, then find this code:

{% assign current_variant = product.selected_or_first_available_variant %}

Replace the code with the following code block:

{% 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 don't display as Unavailable before a customer selects a product.

Steps:

  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 items search bar, start typing unavailable to display the Unavailable translation.
  4. Replace the text Unavailable with Make a selection.
  5. Click Save.
Can’t find the answers you’re looking for? We’re here to help.