Shopify – Assign Featured Image to Pages

Overview

Featured images allow for better customization if you have to build unique custom header images for specific posts and pages or set thumbnails for special features of your theme.

Shopify lets you add featured images for products and collections.
But unlike WordPress, there is no option of adding featured images to pages in Shopify!

Now, what if we want different images for different pages?

While customizing the theme, you may require to have such functionality to assign featured images to pages.

Best way to get it done takes a little modification in template file code!
Do not worry if you don’t know about development. Just follow the given steps:

Step – 1 Upload image to the dashboard

Add a new image you want to assign to the page. Remember you have to upload the image of the same name as page handle.
For example, If I want to assign an image to About us page that has URL “https://abc.myshopify.com/pages/about-us”, I will upload an image named “about-us.jpeg”

Note: Here you can upload an image of any extension but remember to keep each image with the same extension as we are using it dynamically.

Step – 2 Modify theme file for adding featured image to single page

Place below code in theme.liquid file

{% if template.name == "page" and page.handle == "about-us" %}
        {% capture myimage %}{{ page.handle }}.jpeg{% endcapture %}
            <img src="{{ myimage| file_img_url: 'medium' }}"/>      
        {% endif %}

Above snippet checks, if the current page is of page template and is “About us” page then will display the image you have uploaded for the page.

That’s it! We’re done for the single page!

Step – 3 Modify theme file for adding featured image to all pages

Now I have uploaded images for each page and want to assign each page a different image!

No worries you can do it for any number of pages!
Change 1st line of above code with following:

{% if template.name == "page" %}

Horray… You created the featured image for each page!