Show featured image until a variant is selected

When a customer visits a product page in your online store, the image for the first variant that is in stock is featured before other product images. By default, a product variant is selected and shown to customers as soon as they visit the product page.

If you have a featured image for a product that isn't a variant image, and want to show that featured image instead, you must disable the auto-selecting of the first product variant.

In this tutorial, you will learn how to:

  • not select a variant by default when visiting a product page, and
  • show the product's featured image until a variant is selected.

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.

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

  2. In the Assets directory, open your theme.js file (or theme.js.liquid) and add the following 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');
        }
      }
     });
    
  3. 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;
      } */
    
  4. In the Sections directory, open the product-template.liquid file.

  5. Replace the following code:

    {%- assign current_variant = product.selected_or_first_available_variant -%}

    with

    {%- assign current_variant = product.selected -%}

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

    • the current product-template.liquid file in the Sections directory
    • the product.liquid template in the Templates directory
    • the product.liquid snippet in the Snippets directory
    • the single-product.liquid snippet in the Snippets directory
  9. Find and delete this code inside the form:

    
    {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
    
    

    or

    
    {% if option.selected_value == value %} selected="selected"{% endif %}
    
    
  10. 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 %}
    
    
  11. Delete the text or_first_available_. Your code should look like this:

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

  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 change to the translation.

Tip

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

  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. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

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

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

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

  5. Click Save.

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

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

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

    
    {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
    
    
  11. Replace that code with the following snippet:

    {% if forloop.length <= 1 %}
      <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>
    {% endif %}
    
  12. 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 %}
    
    
  13. Delete the text or_first_available_. Your code should look like this:

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

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

  2. In 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 change to the translation.

Tip

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

Want to discuss this page?

Visit the Shopify Community