SB: Full-Width Banner (Desktop & Mobile)

Key features

• Clickable banner — entire image links to your specified URL.
• Consistent cropping via object-fit: cover; image always fills the banner area.
• Overlay content sits centered over the image; text and buttons remain clear and readable.

Editable settings

• Image picker
• Banner link URL
• Heading text
• Sub-heading text
• Button 1 text & URL
• Button 2 text & URL
• Text color
• Font family (heading & sub-heading)
• Font size (heading & sub-heading)

How to add the section

1. Open the kebab menu (three dots) next to your theme under Online Store › Themes.
2. Select Edit code.
3. In the file tree, expand the sections folder.
4. Click Add a new section.
5. Choose Liquid, name the file sb-full-banner, and click Done.
6. Locate the downloaded file sb-full-banner.TXT on your computer.
7. Open that file and copy its entire contents.
8. Back in sb-full-banner.liquid, delete the starter schema code.
9. Paste the copied code—ensure it’s an exact 1-for-1 copy.
10. Click Save.
11. In the Theme Editor, click Add section on your page.
12. Select SB: Full-Width Banner from the list.
13. Configure your image, URLs, text, colors, and fonts, then save.