Preview Section | Password = Chingi
1 2

Version: 1.1.0

Latest Update:

TWO IMAGES FULL WIDTH | ALWAYS SIDE BY SIDE | MOBILE & DESKTOP

TWO IMAGES FULL WIDTH | ALWAYS SIDE BY SIDE | MOBILE & DESKTOP

$5.00 USD
$5.00 USD
Sale Sold out
Taxes included. Download Available in less than 2 minutes

Two Images (Always Side by Side)

This section displays two equal-width images, each with an optional overlay text box and an individual click-through link. Ideal for split hero layouts, A/B category call-outs, or editorial image pairs.

Key features

  • Side-by-side layout — images stay 50 / 50 on all screen sizes (no stacking).
  • Independent links — each image can navigate to a different collection, page or external URL.
  • Overlay text boxes — add short copy, promos or calls-to-action on top of each image.
  • Responsive overlay position — text appears top-left on desktop, bottom-left on mobile for maximum readability.
  • Object-fit cover — keeps full-bleed look regardless of the original photo dimensions.
  • No JavaScript required — pure Liquid + CSS for lightweight performance.

Editable settings

  • Image picker (per block)
  • Image link URL (per block)
  • Image alt text (per block)
  • Overlay text (per block)
  • Overlay font stack (per block)
  • Overlay font size (px) (per block)

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: two-images.liquid and click Create section.
    3.5. Remove the existing placeholder code.
  4. Copy the entire code from this repository and paste it into two-images.liquid, replacing any starter code.
  5. Click Save.
  6. Open the Theme Editor (Customize), click Add section, and choose Two Images Side by Side.
  7. Upload two images, enter overlay text, set optional links and typography, then save your theme.
View full details