Make 'Pick an option' the default choice in product drop-down menus

You can prompt your customers to pick a variant for a product before adding it to their cart by customizing your product pages to make that a required step. This customization can help customers choose the right product to suit their needs.

Pick an option result

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 the ... button, 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.

Change the Add to cart button language settings

  1. Click the ... button for the theme you want to customize, then click Edit language.

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

  3. Change the text Unavailable to Make a selection:

    Pick an option translate unavailable
  4. Click Save to confirm your changes.

Tip

With this translation edit, as the product page loads your customers won't see the product as unavailable.

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 the ... button, and then click Edit HTML/CSS.

Note

If you use the Brooklyn theme, skip to step 10.

  1. Under Snippets, click the link Add a new snippet.

  2. Name your new snippet pick-an-option.

    Pick an option create a snippet
  3. In your new snippet file, paste this code hosted on GitHub.

  4. Click Save to confirm your changes to the file.

  5. Under Layout, locate the file theme.liquid, and click it to open it in the code editor.

  6. Near the end of the file, right before the closing </body> tag, paste the following code:

    
    {% include 'pick-an-option' %}
    
    
    Pick an option include snippet
  7. Click Save to confirm your changes to the file.

  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 (press ctrl + F on a PC or command + F on a Mac to search within a file):

    • 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 to confirm your changes to the file.

Change the add to cart button language settings

  1. Click the ... button for the theme you want to customize, then click Edit language.

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

  3. Change the text Unavailable to Make a selection:

    Pick an option translate unavailable
  4. Click Save to confirm your changes.

Tip

With this translation edit, as the product page loads your customers won't see the product as unavailable.

Demo Store

Click here to view a demo of this customization.

Want to discuss this page?

Visit the Shopify Community