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

If you'd like to prompt your customers to pick a variant for a product before adding it to their cart, you can customize 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

How to add a variant prompt


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

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

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

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

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

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

  6. Click Save.

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

  8. 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
  9. Click Save.

  10. 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
  11. Locate this code inside the form:

    {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
  12. Delete the code that matches the above snippet.

  13. In the same file, locate all occurrences of this code:

    {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
  14. Delete the text or_first_available_. Your code should look like this:

    {% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
  15. Click Save to confirm your changes to the code.

  16. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

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

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

  19. Change the text Unavailable to Make a selection:

    Pick an option translate unavailable

  20. Click Save to confirm your change to the translation.

Did you know?

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