Component library
What this section does
Section titled “What this section does”Components are the building blocks of a page. The Components panel groups them into five families so you can find the right one quickly, and most components offer several layout variants so you rarely need a different component to get a different look.
Component families
Section titled “Component families”Banners
Section titled “Banners”| Component | What it is for |
|---|---|
| Hero section | Page-top heroes: centered overlay, corner anchor, split stage, type-first, duo collage, editorial serif, countdown promo, card rail, or rotating slides |
| Carousel | Multi-slide banner and storytelling carousels, including peek hero and deals strip layouts |
| CTA banner | Newsletter and call-to-action banners: split media, email capture, strip, overlay, card, or minimal |
| Marquee | Horizontal motion strips for highlights and announcements |
| Component | What it is for |
|---|---|
| Rich text | A centered heading, paragraph, and buttons, with alignment and reveal options |
| Text + Image | A balanced two-column composition for copy and media |
Collections
Section titled “Collections”| Component | What it is for |
|---|---|
| Content grid | Structured cards for products, posts, or collections |
| Collections | Explore-collections layouts: media cards, overlay grid, list, mosaic, hero rail, or carousel |
| Product listings | Product shelves such as “Top sellers”: card grid, filter tabs, editorial, minimal, ranked list, or carousel |
Storytelling
Section titled “Storytelling”| Component | What it is for |
|---|---|
| Blog posts | A blog listing that pulls your store’s Shopify blog posts live, with tag filter pills and a card grid showing date and author |
| Help center | An FAQ accordion with an optional header column and a help call to action |
Layout
Section titled “Layout”| Component | What it is for |
|---|---|
| Split panels | Image-and-text splits: editorial 50/50, dark promo, serif story, offset card, checklist, zigzag rows, framed inset, tall hero, or story switcher |
| Divider | Spacing and visual separators: lines, spacers, and ornamental breaks |
How to add a component
Section titled “How to add a component”- Add or select a section on the canvas.
- Open the Components panel in the left rail.
- Choose a component. It is inserted into the selected section.
- Select it and edit it in the inspector.
Layout variants and presets
Section titled “Layout variants and presets”Most components include several layouts. Rather than picking a different component, select the component and change its layout variant in the inspector. Presets give you a complete, pre-styled starting point that you can then edit.
This keeps your page consistent: the same component always inherits the same Design System values, whichever variant you choose.
Components that use your store data
Section titled “Components that use your store data”Some components read live data from your store instead of static content you type in:
- Product listings and Content grid can show real products, with live titles, images, and prices.
- Collections can show your real collections.
- Blog posts lists your Shopify blog articles, with their dates and authors.
Because these read live data, they stay current after publishing — when you add a product to a collection, a bound component reflects it without republishing.
- Pick the component by its purpose, then choose the variant. It is faster than scanning every variant across the library.
- Keep hero copy short. Hero layouts are designed around a headline of a few words plus one supporting line.
- Use Divider deliberately for rhythm between sections instead of adding empty sections.
- For components bound to live data, check the page after adding or removing products so the layout still balances.
Can I add my own custom component?
Section titled “Can I add my own custom component?”The library is fixed, but variants, presets, and per-component style settings cover a wide range of layouts. If you need something the library does not cover, contact support and describe the layout.
Do components respect reduced motion?
Section titled “Do components respect reduced motion?”Yes. Components with animation respect the visitor’s operating-system reduced-motion preference and render without motion when it is enabled.
Why does a product component look empty?
Section titled “Why does a product component look empty?”It has no products selected yet, or the collection it points to is empty. Open the component’s Content tab and choose the products or collection it should show.
Can I hide a component on mobile only?
Section titled “Can I hide a component on mobile only?”Yes. Open the component’s Advanced tab and turn off its visibility for that device.
Related guides
Section titled “Related guides”Need help?
Section titled “Need help?”If you still need help, contact support via the Contact page.