Appearance
Image with text
Pair a photo with words — a brand story, a feature callout, a product spotlight. Add a heading and some text, drop in an image, choose which side the image sits on, and add a button so shoppers can act on it. On the Uisce preset the band becomes an editorial story panel — a sea-glass eyebrow, a luminous waterline seam under the title, and a frosted sea-glass button over a photo-led spread; the other presets keep a clean, classic side-by-side.
Try it
Edit the settings and switch presets — the preview is the real band with the shipped theme CSS, so what you see is what your store renders.
←Image with text
Small label above the heading. Leave blank to hide.
Optional line below the heading. Leave blank to hide.
Leave empty to hide the button.
A second, understated link. Leave blank to hide.
Which side the image sits on (desktop).
Storefront preview
Our studio
Twenty Years of Irish Craftsmanship
Design carved from a quiet coastal legacy.
A family-run design practice rooted in Galway, serving homeowners across the west of Ireland with considered, site-specific design.
Settings
| Setting | What it does |
|---|---|
| Color scheme | The set of colours used for this band. One scheme paints the whole band (background + text), so it stays legible in light and dark. |
| Width | Whether the band spans the full page width or is contained within the content column — contained or full. |
| Image | The featured photo shown alongside your text. |
| Image position | Which side the image sits on — left or right. Alternate it down the page for an editorial zigzag. |
| Image width | How much of the band the image takes on desktop — small (a third), medium, or large (two thirds). Medium is an even split in most presets; Uisce keeps its signature wider-photo split. Side-by-side layout only. |
| Image aspect | The crop shape of the image — auto (natural), square, portrait, landscape, or wide. |
| Image mobile position | On mobile, whether the image appears above or below the text. |
| Eyebrow | A small label above the heading (a category name or short kicker). On Uisce it renders as the sea-glass eyebrow. Leave blank to hide. |
| Heading | The title beside the image. On Uisce it carries the luminous waterline seam. |
| Heading size | The size of the heading text — small, medium, large, or extra large. |
| Subheading | A secondary line below the heading. On Uisce it renders as an editorial italic lede. Leave blank to hide. |
| Text | Supporting copy under the heading — supports bold, links, and lists. |
| Button label | What the button says. On Uisce it’s a frosted sea-glass pill; elsewhere a standard button. Leave empty to hide it. |
| Button link | Where the button takes people when clicked. |
| Secondary button label | An understated second link beside the button. On Uisce it’s a ghost text link with a trailing arrow. Leave blank to hide. |
| Secondary button link | Where the second link goes. |
| Layout | How the image and content are arranged — side by side, stacked (content below image), or overlap (content over the image). |
| Vertical alignment | Lines the text up with the top, centre, or bottom of the image. |
Blocks
- Quote — a pull-quote for a testimonial or highlighted statement, with an optional citation.
- Custom Liquid — raw Liquid rendered below the text, for advanced merchants.
- App block — add blocks from installed Shopify apps.
Layout
- Side-by-side, image left or right. The photo and copy sit beside each other on desktop and landscape tablets — narrower screens stack them; the image side is yours to choose. Alternate left / right when you stack more than one band so the page reads as an editorial zigzag.
- Stacks on mobile. On phones the image and copy stack; the Image mobile position setting picks which goes on top.
- Uisce editorial story panel. On the Uisce preset only, the band becomes an asymmetric photo-led spread: the eyebrow becomes a sea-glass kicker, the heading carries the luminous waterline seam, the subheading becomes an italic lede, the button becomes a frosted sea-glass pill with a ghost secondary link, and a waterline seam marks the photo↔copy boundary. The copy sits in a contained, scheme-derived panel that fills its track — no dead gutter. It’s a preset skin over the same markup, so the other four presets render the clean base band.
Accessibility & internationalisation
- The heading is a single
<h2>; the eyebrow and subheading are plain paragraphs, so there is no heading-order break. - The button is a real link with a discernible name and a ≥ 44×44 tap target; keyboard focus is visible.
- One colour scheme per band keeps text at WCAG AA contrast in both light and dark — the Uisce accents derive from the scheme, so they hold on light and dark schemes alike.
- The eyebrow, heading, image side, and buttons mirror correctly for right-to-left languages, and every label is translated across all supported locales.
Tips
- Alternate the image side when stacking multiple bands — image left, then image right — for a zigzag that keeps the eye moving.
- Use the text field for a short bullet list when highlighting a few features or benefits; it supports full formatting.
- Add an eyebrow + subheading on Uisce to turn a plain split into an editorial story panel — e.g. eyebrow “Our studio”, subheading “Design carved from a quiet coastal legacy.”