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):