3 IMAGE BANNER GRID | FULL WIDTH | MOBILE & DESKTOP

Key features

• 1 × 2 grid — hero banner on top, two images beneath, always edge-to-edge.
• Zero-gap design — no whitespace between images; great for glossy look-books.
• Independent links — every image can point to its own collection, product or URL.
• Overlay text + button — bottom-left copy paired with bottom-right CTA.
• Mobile-smart overlay — text and button stack vertically with auto-scaled fonts.
• Height presets — separate desktop / mobile height controls (px).
• Object-fit cover / contain — choose how images crop inside the slots.
• No JavaScript required — pure Liquid & CSS; lightweight and theme-safe.

Editable settings

• Image picker (3 blocks)
• Link URL & alt text (per block)
• Overlay text (per block)
• Desktop & mobile text size (per block)
• Text font family & color (per block)
• “Shop now” label, font, colors, padding, radius (per block)
• Overlay padding (per block)
• Section-wide: desktop height, mobile height
• Section-wide: image fit (cover / contain)
• Section-wide: border-radius for all images

How to add the section

1. In your Shopify admin, go to Online Store › Themes, click the kebab menu (⋮) next to your theme and choose Edit code.
2. Inside the sections folder, click Add a new section.
3. Name the file: three-image-banner.liquid and click Create section.
   3.5. Remove the existing PlaceHolder Code
4. Copy the full code from this repository and paste it into three-image-banner.liquid, replacing any starter code.
5. Click Save.
6. Open the Theme Editor (Customize), click Add section, and choose 3-Image Banner Grid.
7. Upload your three images (top banner first), customise overlay text, buttons, fonts, sizes and links, then Save your theme.