Tutorial: How to use a custom image banner for mobile

In this tutorial, we will add a new section to your theme which allows for a custom image for mobile view, for the standard Image with text overlay section. 

1

Create a new section

Open your code editor
https://myshopify.com/admin/themes/current

In the Sections folder, choose "Add a new section"

Name the new section index-banner-mobile

index-banner-mobile

Choose the Create section button to complete

Erase all the default code that's generated:

Replace with all the code from one of these two options (click the link to view the code):

Option 1: Separate height settings for mobile, no parallax support

This version has separate height settings for mobile. However, if you're desktop image is using parallax, use Option 2 instead.

https://gist.githubusercontent.com/whistlerbrad/4171b578300126524cb9c8b67bddbf3c/raw/1ab42837c65dedcea06147477650b9c66de0c6a7/index-banner-image-mobile.liquid

Option 2: If using parallax on desktop use this version

There is no height setting for mobile with this version.

https://gist.githubusercontent.com/whistlerbrad/f5b1b80d87dd577a10ede19935d4d9e8/raw/a47088cec5604fff5f5fd4b23101e150b65c9509/index-banner-mobile-parallax

Save the file.

2

Add the new section in the theme editor

Open your theme editor (Customize theme):
https://myshopify.com/admin/themes/current/editor

Add the new section:

You'll see the new section called Image text overlay mobile, add that:

The top image option (1) is for desktop and tablet. These are the same standard settings from Image with text overlay:

Scroll to the bottom to see the Mobile image option (2) and mobile image height settings (3):

The height settings (3) for mobile are slightly different. This mobile section allows you to have a completely different image with it's own height settings. Experiment to see which works best for you. 

Remember to Save your changes (top-right corner):

Still need help? Contact Us Contact Us