Add 'Pick an option' labels to variant drop-down menus

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.

Pick an option

Sectioned and 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:

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

    {% include 'pick-an-option' %}
    
    Including the pick an option snippet
  7. Click Save.

  8. 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
  9. 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>
    
  10. 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 %}
    
  11. 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.

  1. Find the theme you want to edit, click Actions, and then click Edit language.

  2. In the Filter translations box, start typing unavailable to show the "Unavailable" translation:

    type unavailable
  3. Change the text Unavailable to Make a selection:

    Unavailable translation
  4. Click Save.

Demo Store

Click here to view a demo of this customization.

Want to discuss this page?

Visit the Shopify Community