Show featured image until a variant is selected

When a customer visits a product page in your online store, the first available variant is selected by default, and the image for that variant is shown instead of the featured image. If you have a featured image that you would like to show instead of the first available variant image, then 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.

A featured image is a product image that belongs to the whole product, not just to a specific variant. For example, if you are selling a product that has variants in several different colors, then you might have a featured image that shows the different color options in one picture.

Featured image

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:

Edit your theme code

  1. Find the theme you want to edit, and then click Actions > Edit code.
  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, and then click Actions > 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.

Want to discuss this page?

Visit the Shopify Community