Sections

Full-width or split-layout hero banner. The primary above-the-fold section for homepages and collection landing pages.

Image Banner is the most versatile hero section in Mast. It supports two layout modes: full, where the image fills the entire section and text overlays it, and split, where the image occupies one side and the text block the other. Both modes support independent desktop and mobile image sources so you can art-direct the crop for each viewport.

Editorial section opener with a large number or glyph, eyebrow text, heading, and optional lede paragraph.

Chapter is a divider section borrowed from editorial magazine design. It marks the opening of a new content chapter on a long page, giving readers a visual breath and a sense of structure. The large number or glyph is rendered at display scale using the heading font, making it a strong typographic accent.

Showcases a collection with two layout options. Spread places a large hero image alongside product cards. Triptych arranges three equal-width columns for a clean product grid.

Featured Collection is the primary product-selling section. It pulls live products from a selected collection and renders them in one of two curated layouts. The spread layout is editorial, with one dominant image and products stacked alongside it. The triptych layout is cleaner and works well for collections with three hero products or a trio of equally-important items.

An asymmetric editorial image grid with optional product hotspots and prose blocks. Inspired by fashion lookbook layouts.

Lookbook is the most editorial section in Mast. It renders images in an art-directed asymmetric grid where each image has its own size and position weight. Individual images can carry product hotspots, which open a quick-add panel when clicked. Prose blocks can be interspersed between images for editorial copy.

A numbered table of contents section linking to page anchors. Use on long editorial or lookbook pages.

Contents is a navigation section styled after magazine tables of contents. Each entry carries a folio-style number, a title, and an optional short description. Entries link to anchor IDs elsewhere on the page using smooth scrolling. It is most useful on long story-driven pages.

Multipurpose text section supporting an eyebrow, heading, body prose, and one or more CTA buttons.

Rich Text is the general-purpose content section. It is not specific to any context, making it suitable for brand manifestos, policy intros, editorial notes, and anywhere you need a passage of well-formatted copy. It supports a strict layout hierarchy: eyebrow, then heading, then body, then buttons.

Publication logo grid with an optional featured pull quote. Designed for social proof and press coverage.

Press renders publication logos in a horizontal strip with optional hover color treatment. Below the logo grid, an optional pull quote block shows a featured excerpt from a review or interview. The combination is a powerful trust signal on brand pages.

Email capture section integrated with Shopify's customer list. Supports editorial copy and a custom success message.

Newsletter uses Shopify's built-in newsletter signup form, which adds subscribers directly to the Customer section of your Shopify admin with the newsletter consent flag set. No third-party integration is required, though you can connect Shopify Email or an external ESP like Klaviyo from the Shopify admin.

Accordion-style frequently asked questions section using native HTML details and summary elements for accessibility.

FAQ uses the native HTML details and summary elements, which means it works without JavaScript and is inherently accessible. The open/close animation is CSS-based. Up to 20 question/answer pairs can be added as blocks.

Freeform Liquid section for custom HTML, Liquid template code, or third-party app block embedding.

Custom Liquid gives developers and technically confident merchants a direct injection point into any page template. It renders whatever Liquid or HTML you paste into the code field. This is useful for embedding app-generated markup, adding structured data, or rendering content from metafields that no other section exposes.

A flexible column grid for feature lists, brand values, service breakdowns, and similar structured content.

Multicolumn renders a configurable number of equal-width columns, each with an optional icon or image, a heading, and a paragraph. It is the right section for content that naturally falls into parallel groups: three brand values, four shipping options, five sustainability commitments.

Journal or editorial blog grid. Pulls from a Shopify blog and renders article cards with images, dates, and excerpts.

Blog Posts renders a grid of article cards from a selected Shopify blog. It supports two grid styles: magazine (large featured first article alongside smaller secondary articles) and grid (uniform columns). It is designed to make the journal or editorial section of a brand feel like the front page of a publication.

Customer quote section with name, optional photo, and star rating. Supports single and carousel layouts.

Testimonials renders customer quotes in a clean typographic layout. It is distinct from the Press section, which is for publication coverage. Testimonials is for direct customer voices. It supports a static single-quote layout and a multi-quote carousel with auto-advance.

Expandable content rows for size guides, care instructions, shipping policies, and other secondary information.

Collapsible Content is a general-purpose expandable section. Unlike FAQ, which is question-and-answer format, Collapsible Content is for non-FAQ content that simply benefits from progressive disclosure. It is commonly used on product pages for care instructions, fit guides, and returns policies.

Shopify's native contact form with configurable fields and a custom success message.

Contact Form uses Shopify's built-in form processing, which sends form submissions to the store's contact email. No external service or Liquid customization is needed. Fields beyond name, email, and message can be added as custom blocks.

Site-wide header with logo, navigation, search, and cart trigger. Configurable sticky behavior, folio strip, mega menu, and mobile drawer.

The Header is a global section available in every template. It is always the topmost section. Configuration options include the site logo or wordmark, the main navigation menu, a sticky scroll behavior, an optional folio strip, mega menu columns, and the mobile drawer layout.

Site footer with editorial link columns, an inline newsletter form, payment icons, and a colophon strip.

The Footer is a global section available in every template. It renders below all page content. The colophon strip is a thin bottom bar with copyright text and legal links, styled after the colophon page in a book or magazine. Newsletter, social links, and link columns are all optional and configurable.

A slim bar above the header for promotions, shipping thresholds, or notices. Supports multiple rotating messages.

Announcement Bar renders above the Header. It is the first element visible on the page. It supports multiple message slides that rotate automatically, a dismiss button, and configurable colors independent of the theme's color scheme.