Skip to main content

Display featured image on product page by editing your theme code

Last updated: October 25 2024

Written and researched by experts at Avada Learn more about our methodology

When running an online store, ensuring your product pages visually engage customers is key to driving sales. One effective way to do this is by displaying the featured image on the product page. In this guide, we’ll provide clear, step-by-step instructions to help you effectively display featured images on your product pages, enhancing both aesthetics and functionality.

To go deeper into details, we would like to get you to know that a featured image is a product image that belongs to the whole product, not to just any specific variant. For instance, if you are selling an item that has variants in several different colors, then you may have a featured image that can show many different color options in just a picture.

Please note that your theme may not show the price of the product until after the customer chooses a variant because this customization does prevent a variant from being selected by default. This is expected behavior since products with variants do not have a featured price. The price which is shown is determined by the variant that is selected.

Step 1:

Go to Online Store > Themes from your Shopify Admin panel.

Step 2:

Choose the theme you want to edit and click Actions > Edit code.

How to display a feature image on a product page in Shopify
Note

Please move to step 10 if you use the Brooklyn theme.

Step 3:

Click Add a new snippet in the Snippets directory.

Step 4:

Name your new snippet “pick-an-option”.

How to display a feature image on a product page in Shopify

Step 5:

Paste this code hosted on GitHub in your new snippet file.

Step 6:

Choose Save.

Step 7:

Choose theme.liquid in the Layout directory.

Step 8:

Search for the closing </body> tag near the bottom of the file. Paste the following code on a new line right above the closing </body> tag:

How to display a feature image on a product page in Shopify

{% include 'pick-an-option' %}

Step 9:

Click Save.

Step 10:

Search for the file which contains the Add to cart form. It will have an action attribute set to /cart/add.

It should be in one of these following 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

Step 11:

Search for 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>

And 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>

Step 12:

Find and replace the following code:

Minimal, Pop, or Supply

If you use Minimal, Pop, or Supply, search for all occurrences of this code:

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

And replace it with:

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

Other Shopify theme which are free

If you use any other Shopify theme, search for this code:

{% assign current_variant = product.selected_or_first_available_variant %}

And replace it with:

{% assign current_variant = product.selected_variant %}

Step 13:

Tap Save

Step 1:

Open product-template.liquid in the Sections directory.

modify theme on the cart pages in shopify

modify theme on the cart pages in shopify

Step 2:

Look for the following code:


{% assign current_variant = product.selected_or_first_available_variant %}

And replace it with the code:


{% if product.variants.size > 1 %}
  {% assign current_variant = product.selected %}
{% else %}
  {% assign current_variant = product.first_available_variant %}
{% endif %}

Step 3:

Eliminate the code from inside the add to cart form:


{% if option.selected_value == value %} checked="checked"{% endif %}

Step 4:

Find the code with the opening <span> tag:

<span class="btn__text">

Then find tag for closing. Replace the code between the opening and the closing with this following code:


{% if variant or product.variants.size == 1 %}
  {% if product.available or product.variants.size == 1 and variant.available %}
    {{ 'products.product.add_to_cart' | t }}
  {% else %}
    {{ 'products.product.sold_out' | t }}
  {% endif %}
{% else %}
  {{ 'products.product.unavailable' | t }}
{% endif %}

Step 5:

Remember to click Save.

Step 1:

Look for the following code:


{% assign current_variant = product.selected_or_first_available_variant %}

And replace it with the code:


{% assign current_variant = product.selected_variant %}

Step 2:

Look for the following code:

selected="selected"

Remove the above code, together with the Liquid logic tags. The deleted code is:


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

Step 3:

Paste the following code at the bottom line.


<script>
var productOptions = [];
 {% for option in product.options %}
  var optionObj = {};
  optionObj[ {{ forloop.index0 }} ] = "{{ product.options[forloop.index0] }}";
  productOptions.push(optionObj);
 {% endfor %}
</script>

Step 4:

Remember to click Save.

Step 1:

Look for the following code:


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

And replace it with the code:


{% if product.variants.size > 1 %}
  {% assign current_variant = product.selected %}
{% else %}
  {% assign current_variant = product.first_available_variant %}
{% endif %}

Step 2:

Look for the following code:

selected="selected"

Remove the above code, together with the Liquid logic tags. The deleted code is:


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

Step 3:

If you use Debut, find this code:


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

And change it into:


{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

Step 4:

Paste the following code at the bottom line.


<script>
var productOptions = [];
  {% for option in product.options %}
  var optionObj = {};
  optionObj[ {{ forloop.index0 }} ] = "{{ product.options[forloop.index0] }}";
  productOptions.push(optionObj);
  {% endfor %}
</script>

Step 5:

Remember to click Save.

Conclusion

Enhancing your Shopify product pages with featured images elevates the visual appeal and offers customers a comprehensive view of available variants. This adjustment not only makes your store more attractive but also aids shoppers in making informed choices, ultimately leading to increased engagement and sales.

Sam
linkedin
Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.