Shopify — How to display custom featured product image

In each product, Shopify automatically picks the first image of uploaded ones to display as the featured image.

My customer recently emailed me asking for suggestions about how to display custom featured product image in Shopify when the image to be displayed are NOT the same as uploaded products’ ones. I thought I would share how I would think about this. I hope it will be useful for others as well.

By using ShopifyFD and Shopify metafields (In case, you don’t know what ShopifyFD is, just read my previous post) Adding custom featured product image is going to be easy.

Let’s follow below steps:

  1. In Shopify dashboard, go to Settings -> Files -> Upload your featured product image.

2. In product page dashboard, create a metafield named “featured” to store product featured image url, so we need to put something like this:

  • Namespace: global
  • Key: featured
  • Value: Name of featured product image that you’ve uploaded in the step 1.

(Just don’t forget to click on ShopifyFD icon at the top right of browser in order to load its script, then a custom metafields box will appear int he right hand side of your dashboard)

3. To display featured product image in collection page, for example. You just need to edit product.liquid snippet file and put a script like this:

{% unless == blank %}
<img src=”{{ | asset_url }}” alt=”{{ product.title | escape }}”>
{% else %}
<img src=”{{ product.featured_image | product_img_url: ‘large’ }}” alt=”{{ product.title | escape }}”>
{% endunless %}

By using script above, we check whether featured metafield is existed or not. If yes, display it. In case, it’s not existed, display one of the product’s images alternatively.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.