Articles in this section

See more

Show the featured image of the product until a variant is selected

  • Last updated:
  • Updated
Follow
This article applies to the following older Theme versions:

Responsive 4.4 - 5.1
Mobilia 3.4 - 4.4 
Retina 3.0 - 3.2.3

If you use Parallax/Turbo, OR have a newer version of one of our themes (Responsive 5.2+, Mobilia 5.0+, Retina 4.0+) please refer to our list of recommended Shopify Experts for assistance with this modification.

Show the featured image instead of a variant image until a variant is selected

By default, a product page will load displaying the image associated with the first variant, as it will be automatically selected. This article will walk through the steps to modify the theme code to override this behaviour and display the main product image until a variant selection is made. This article will also detail how to include a 'Pick a [option]' message within the selector and change the 'Unavailable' text caption.

This modification works optimally with products that have a SINGLE option, using the 'Select Dropdown List' option style, with the 'Back in Stock Notification' form disabled. Applying a similar modification to products with multiple options and/or using the SWATCH feature/Back in Stock Notification Form will require a consultation with a Shopify Expert to work out the changes required for the desired functionality. 
 

In This Article

 

Add to product-form.liquid

First, go to Admin > Online Store > Themes > Actions > Edit Code > Snippets, and open product-form.liquid. Copy the following code from this article:

{% if product.variants.size > 1 %}
  {% for option in product.options %}
    $('.single-option-selector:eq({{ forloop.index0 }})')
      .filter(function() { return $(this).find('option').size() > 1  })
      .prepend('<option value="">Pick a ' + {{ product.options[forloop.index0] | json }} + '</option>')
      .val('')
      .trigger('change');
  {% endfor %}
{% endif %}

...and paste it at the very bottom of the page, right before the last "});" , within the 'script' tags:

Wonderful! Now, above that section you'll find TWO instances of this:

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

They BOTH can be removed:

Save product-form.liquid

 

Change product-images.liquid

You can now save product-form.liquid and open up product-images.liquid. This should be in the first few lines:

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

From that line "or_first_available_" can be removed, leaving you with this:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

That's it for code changes!

 

Edit 'Unavailable' Text Caption

The final step is going to your main themes page (Sales Channels > Online Store > Themes ) and then going to the "Actions" icon to Edit Language, click on your default language, and search for "unavailable." That can be changed to something like "Make a selection." 

All done! Your product pages will now show the featured image until a variant is selected :)

Related articles