Show labels for products with only one option

It is the default behavior of most Shopify themes to only show a label next to your option drop-down if your product has two or three options. If your product has only one option, chances are the label is not shown.

Did you know?

The solution presented here won't work in the following themes: Venture and Boundless.

To change this behavior:

  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. The hardest part will be to locate the following (new Shopify.OptionSelectors) code in your Shopify Theme that is responsible for adding the option drop-downs to your product pages. That code can be in either of 3 files:

    • Under the Layouts folder, in the theme.liquid file,
    • Under the Templates folder, in the product.liquid file,
    • As a last resort location, under the Snippets folder in a product.liquid snippet.

    In each file, look for this code till you find the right file: new Shopify.OptionSelectors

    In the one file that contains the code, on the next line after new Shopify.OptionSelectors( ... ), add these 3 lines of code:

    {% if product.options.size == 1 and product.options.first != 'Title' %}
    $('.selector-wrapper:eq(0)').prepend('<label>' + {{ product.options.first | json }} + '</label>');
    {% endif %}
  4. Save your changes.

What is the rationale behind that default behavior?

95% of shops don't rename the option label and leave it at Title when they add variants. The Title label is quite unhelpful.

Want to discuss this page?

Visit the Shopify Community