Story theme - Create a custom mobile only and custom desktop only banner
If you'd like to use a custom hero banner for mobile only while maintaining a different hero banner for desktop, use this customization.
Example mobile only hero banner:
Section height is set to Full screen height with a custom image for mobile:
Example tablet/desktop only hero banner:
Section height is set to tall, with a different wider image for desktop:
Since these are separate hero banners, any or all the settings can be different. You can even use custom images which work better for desktop or mobile.
How to:
- 1
-
Create new section files
From Theme actions, choose Edit code:
PART 1
In the Sections folder, choose Create new section:
Call the file:
index-hero-mobile
Use the Create section button to complete.
Erase all the default code that's generated:
Replace with all the code from this file (click link to view the code):
Mobile version: Click to view code
Save the file:
PART 2
Next, create a second section file:
In the Sections folder, choose Create new section:
Call the file:
index-hero-desktop
Use the Create section button to complete.
Erase all the default code that's generated:
Replace with all the code from this file (click link to view the code):
Desktop version: Click to view code
Save the file:
- 2
-
Add hide/show CSS
Refresh your browser tab after creating new files in the first step.
Next, open theme.scss.liquid from the Assets folder:
Add the following code to the very bottom of assets/theme.scss.liquid on a new line:
Be sure to add at the bottom of the file:
Save the file:
- 3
-
Use the Theme Editor to add and configure the new sections
Open your theme editor (Customize theme).
Example for live theme:
Next in the sections tab - Add 2 new sections:
Add the new sections:
Add the new custom desktop and mobile banners:
The original Image with text overlay banner is still available but won't be hidden on mobile. You can use that one if you need the same content and settings for both mobile and desktop. After adding the two new custom banners, you can customize each one individually.
Use the Theme Editor's mobile/desktop icons to preview the two different banners.
Mobile:
Desktop:
Tip: Remove the original Image with text overlay banner section and only use the new Custom - Banner mobile and Custom - Banner desktop sections.
If you still have the main banner section will still show on both desktop and mobile. If you use the above individual sections, be sure to remove or hide the standard banner so it's not showing as well. Only use these two new sections if you don't want duplicate banners displaying.