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. 


Create a new section

Open your code editor

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

Name the new section 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.


Option 2: If using parallax on desktop use this version

There is no height setting for mobile with this version.


Save the file.


Add the new section in the theme editor

Open your theme editor (Customize theme):

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