Make 'Pick an option' the default choice in product 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

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. To figure out whether your theme supports sections, go to the theme's Edit HTML/CSS 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, then click the Sectioned themes button and follow the instructions. If you are using non-sectioned theme, then click the Non-sectioned themes button and follow the instructions.

Add a variant prompt in sectioned themes

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

    The next steps for this tutorial differ depending on whether you are using sectioned Brooklyn, or another sectioned Shopify theme. If you are using a sectioned theme that isn't Brooklyn, then click the Most themes button and follow the instructions. If you are using sectioned Brooklyn, then click the Brooklyn button and follow the instructions.

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

Add a variant prompt in non-sectioned themes

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.
  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. If you use Minimal, Pop, or Supply, in the same file, 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.featured_image | default: product.featured_image %}
    

    If you use any other Shopify theme, in the same file, find this code:

    {% assign current_variant = product.selected_or_first_available_variant %}
    

    Replace it with:

    {% assign current_variant = product.selected %}
    
  11. Click Save.

Changing 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