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!
You may also like
Top Laravel Development Companies in India to Watch Out For in 2024
Today’s modern-day consumers demand aesthetically pleasing...
Laravel 11: Suite of New Features Unlocked!
Web application development is at an all time high. And, so is the PhP framework giant- Laravel. Wit...
Why Your Business Need to Hire a Professional Web Development Company?
Businesses of all walks and sizes hinge on web development c...
