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

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.

Edit your theme's JavaScript file

To show a featured image on a product page, you have to edit the code to your theme's JavaScript file:

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

  2. In the Assets directory, click theme.js or theme.js.liquid.

  3. For all themes except for Brooklyn, add the following code to the bottom of the file:

    $(document).ready(function() {
      if( typeof(productOptions ) != "undefined" ){
        for(i=0;i<productOptions.length;i++) {
          $('.single-option-selector:eq('+ i +')')
          .filter(function() {
            return $(this).find('option').length > 1
          })
          .prepend('<option value="">Pick a ' + productOptions[i][i] + '</option>')
          .val('')
          .trigger('change');
        }
      }
    });
    
  4. If you use Brooklyn, Debut, or Venture, then find the code _updatePrice: function(variant). Replace the following code:

    if (variant.price === this.currentVariant.price && variant.compare_at_price === this.currentVariant.compare_at_price) {
      return;
    }
    

    with:

    /* if (variant.price === this.currentVariant.price && variant.compare_at_price === this.currentVariant.compare_at_price) {
      return;
    } */
    

    If you use Boundless, then find the following line of code:

    $(selectors.addToCartText).html(theme.strings.soldOut);
    

    There are two instances of this line of code, both found within the productVariantCallback function. Replace only the second instance with:

    $(selectors.addToCartText).html('Make a Selection');
    
  5. If you use Brooklyn, then find the code _updateImages: function(variant). Replace the following code:

    var variantImage = variant.featured_image || {};
    

    with:

    var variantImage = variant.image || {};  
    
  6. Click Save.

Edit your product page template for Brooklyn

If you use Brooklyn, then you will need to replace the content of your product page. If you do not use Brooklyn, then skip to the steps for other themes.

  1. In the Sections directory, click product-template.liquid.

  2. Delete all of the content in the file, so that it is empty. Paste in this code hosted on GitHub.

  3. Click Save. You are now done editing your theme code, and can now change your language settings.

Edit your product page template for other Shopify themes

  1. For all themes except for Debut and Venture, find the following code:

    {% assign current_variant = product.selected_or_first_available_variant %}
    

    or

    {% assign variant = product.selected_or_first_available_variant %}
    

    Delete or_first_available_variant. Your code should look like this:

    {% assign current_variant = product.selected %}
    
  2. For all themes except for Jumpstart, find the following code:

    selected="selected"
    

    Delete the above code, along with the Liquid logic tags that surround it. The code to be deleted looks like this:

    {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
    
  3. If you use Minimal, Pop, Supply, or Venture, then 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 Debut, then find this code:

    {%- assign featured_img_src = current_variant.featured_image.src | default: product.featured_image.src -%}
    {%- assign featured_img_alt = current_variant.featured_image.alt | default: product.featured_image.alt -%}
    

    Replace it with:

    {%- assign featured_img_src = product.selected.featured_image.src | default: product.featured_image.src -%}
    {%- assign featured_img_alt = product.selected.featured_image.alt | default: product.featured_image.alt -%}
    
  4. For all themes, at the bottom of the file, paste the following code:

    <script>
    var productOptions = [];
     {% for option in product.options %}
      var optionObj = {};
      optionObj[ {{ forloop.index0 }} ] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
     {% endfor %}
    </script>
    
  5. For all themes except for Debut and Venture, click Save.

  6. If you use Debut or Venture, then find all occurrences of this code:

    {% unless current_variant.available %}
    

    Replace with:

    {% unless current_variant.available or product.variants.size == 1 and variant.available %}
    
  7. Click Save. If you use Boundless, then you are done. If you use another Shopify theme, then you will need to change the Add to cart button language settings for your theme.

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

Edit your theme code

  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.

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

Want to discuss this page?

Visit the Shopify Community