Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Different heading images for mobile/desktop on collection

Annie

Written by Annie

Last updated

369 views

On this page


Shopify only allows you to choose only one feature image for each collection. The 'Page heading' on collection shows the image from the feature image and you may not be able to show the full image or choose different collection images for desktop and mobile views.

01.png

This guideline will help you to sort out this problem to have better heading images on both desktop and mobile.

Note: You will need to hide "Page heading" on collection to achieve it. It means you can not show the 'collection title', 'breadcrumb' or 'collection description' if you config in this way.

1. Create metafields of collections

Go to Shopify Settings > Custom Data > Collections > Click 'Add definition'

13.png

1.1. For collection image on desktop

Create the first metafield for collection image on desktop version. You can add the namespace, key and type like the image below:

14.png

1.2. For collection image on mobile

Create the second metafield like the image below:

15.png

After you have done 2 steps above, you will get 2 metafields of collections here:

16.png

2. Choose images for collection metafields

Go to Shopify Admin > Products > Collections > choose collection you want to add the banner image > scroll down to the bottom of the page and choose the images for metafield you created at step 1.

17.png

You need to do the same for all collections you want. If you don't add the images here, it will show a blank image on the front page.

If you only need different heading image for specific collections, you need to create a new "collection template". Then assign the collections to this new template before go to step 3 below.

3. Add section in Theme customize

Please follow the video below to add 'Banner section' on collection page and connect it with metafield:

This section allows you to change the width and height of the image:

You can refer to this article to know more about Banner section.

[Private Offer] EComposer Partner Plan

ecomposer.jpg
Exclusively for The4 users, when you bougth any theme from us, you can get Ecomposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)
  • Build ANY Shopify pages: Landing page, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Ecomposer1.jpg
Cheers, The4.

We highly recommend Shopify apps from our partners.

We uses cookies to ensure you get the best experience on our website.