core-section + theme blocks — composition showcase

Foundation is block-first: merchants build layouts inside Core section using nested Groups and content blocks (Heading, Text, Image, Button, Accordion, Carousel, Spacer, Divider, RTE). No custom section file needed for these patterns. Placeholders show until media is uploaded.

Core · 11

Brand band — THE WANG CONTEMPORARY (homepage)

Exact homepage composition: lockup (THE / WANG / CONTEMPORARY) + tagline column. Color scheme-3. Same block tree as live HP brand band (core_section_RBpNVn).

THE

WANG

CONTEMPORARY

CULTURAL VANGUARD
BORN IN CHINATOWN
GLOBAL IN VISION

Core · 01

Stacked editorial — heading + text + dual CTAs

Section: vertical, page-width, centered. Blocks: heading, text, button ×2.

new arrivals

Compose simple landing copy with Core section. Add as many heading, text, and button blocks as needed — reorder in the theme editor.

Core · 02

Image + text (50 / 50) — content left, media right

Preset pattern: Core section Image with text. Two Groups at 50% width.

crafted essentials

Pair a text column with an image column. On mobile this stacks (vertical_on_mobile). Reverse order with reverse_on_mobile if media should lead.

shop the edit

Core · 03

Text + image reversed — media leads on mobile

Same 50/50, reverse_on_mobile=true so image stacks above copy on small screens.

runway to retail

Use reverse_on_mobile when the visual should appear first on phone, while desktop keeps text → image order.

explore

Core · 04

Three-column cards

Section horizontal; three Groups at ~33% width. Stacks on mobile.

ready-to-wear

Group wraps image + heading + text. Gap and padding live on the Group.

shop

accessories

Group wraps image + heading + text. Gap and padding live on the Group.

shop

footwear

Group wraps image + heading + text. Gap and padding live on the Group.

shop

Core · 05

Overlay hero — media + content over image

Media Group (overlay_container). Sibling Content Group with overlay_on_desktop + overlay_on_mobile.

campaign headline

Overlay Groups sit on top of the media Group above. Align with vertical/horizontal settings.

shop now

Core · 06

Accordion FAQ group

core-accordion blocks inside a Group. Optional first_accordion_top_border.

customer care

Core · 07

Spacer + divider rhythm

core-spacer and core-divider control vertical rhythm without empty Groups.

section rhythm

Content above the divider.

Content below the divider. Adjust spacer tokens instead of padding when you need a one-off gap.

Core · 08

Core carousel — multicolumn slides

core-carousel with _carousel-slide children. Each slide = Group with image + heading.

the lookbook

Core · 09

CTA band — alternate color scheme

Section color_scheme drives background. Center heading + button.

join the list

Swap the section color scheme for a full-width band without custom CSS.

sign up

Core · 10

Rich text (core-rte)

Use core-rte for longer HTML/policy-style content; core-text for short captions.

about this composition

Core RTE supports lists, links, and emphasis for customer-care style pages.

  • Nest Groups for layout
  • Keep content in Heading / Text / RTE / Button
  • Reach for a custom section file only when Liquid pagination or template-bound data is required