Skip to main content
Facet sections are built from theme blocks. A block is one piece of content, such as a heading, a paragraph or a button, that you add, reorder and style on its own. This page shows how to work with blocks in the Theme Customizer and documents the shared blocks that many sections accept.
The theme editor sidebar with the Hero banner section expanded, showing Slide blocks that each hold nested Label, Heading, Text, Button and Product spotlight blocks, plus a Scrolling line block.

​
What blocks control

  • Which pieces of content a section shows, and in what order.
  • The text, size, width and alignment of each piece.
  • How pieces sit together, in a column or a row, when you put them in a Group.

​
Getting started

1

Open the Theme Customizer

In your Shopify admin, open Online Store, then Themes, and click Customize next to Facet.
2

Expand a section

In the Sections panel, click the arrow next to a section to see its blocks.
3

Add a block

Click Add block under the section, or under a block that holds other blocks, and pick a block from the list. The list shows only the blocks that section accepts.
4

Edit the block

Click the block to open its settings.
The Add block menu open inside a hero Slide, listing the theme blocks that can be added there.

​
Manage blocks

  • Reorder: drag a block by its handle (the dotted icon on its left) to a new place in the list. You can also drag a block into or out of a Group.
  • Hide: hover over a block and click the eye icon. The block stays in the list but shoppers don’t see it. Click the icon again to show it.
  • Remove: click the block, then click Remove block at the bottom of its settings.
  • Nest: some blocks hold other blocks, such as a hero banner Slide or a Group. Expand them with their arrow to add or edit the blocks inside.
The theme editor sidebar with the Logo list section expanded, showing a Logos block with five nested Logo blocks and two hidden blocks marked with a crossed-out eye.
Many blocks only make sense in one section, such as Slide in the hero banner, Mosaic tile in the mosaic or Testimonial in the testimonials section. Those are documented on their section pages. This page covers the shared blocks.
The Custom section and the Group block accept every block on this page, so the lists below name only the other places each block can go.

​
Shared blocks

​
Heading

Theme editor sidebar showing the Heading theme block settings: Heading, Size, Layout, Width, Width limit, Alignment.
A title in the heading font.
  • Heading: the text. Default: “Heading”.
  • Size: Display 1, Display 2, Heading 1, Heading 2 (default), Heading 3, Heading 4 or Heading 5. See the pixel sizes in Typography.
Layout
  • Width: Fill (default) takes the whole row and uses its own Alignment. Fit content is only as wide as its words and follows the alignment of the section or group it sits in.
  • Width limit: None (default), Medium (about 36 characters per line) or Narrow (about 24 characters per line). Keeps long headings from running across the whole section.
  • Alignment: Left (default), Center or Right. Appears only when Width is Fill.
Display 1, Display 2 and Heading 1 count as the page’s main heading only in the first section on the page. Further down they keep their size but count as a subheading, which keeps the page structure clear for search engines and screen readers. Accepted by: Additional features, Before and after, Bundle and save, Call to action, Collapsible content, FAQs, Featured collection, Image with text, Logo list, Mosaic, Newsletter banner, Not found, Page banner, Promotion banner, Promotional pop-up, Rich text, Socials, Stories, Tabbed collections and Testimonials, and inside slides, tiles, features, stories and testimonials.

​
Text

Theme editor sidebar showing the Text theme block settings: Text, Size, Weight, Layout, Width, Width limit, and more.
A paragraph or more of formatted text in the body font.
  • Text: the text, with bold, italic and links.
  • Size: Display 2, Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, Large, Regular (default), Small or Caption. The large sizes make body text bigger without turning it into a heading.
  • Weight: Regular (default) or Bold.
Layout
  • Width: Fill (default) or Fit content, as for the Heading block.
  • Width limit: None (default), Medium (about 60 characters per line) or Narrow (about 40 characters per line).
  • Alignment: Left (default), Center or Right. Appears only when Width is Fill.
Accepted by: every section that accepts the Heading block, plus the Footer, and inside collapsible rows, FAQ questions and the footer Brand block.

​
Button

Theme editor sidebar showing the Button theme block settings: Button label, Link, Button style, Layout, Width.
A link styled as a button.
  • Button label: the text on the button. Default: “Shop now”.
  • Link: where the button goes. Without a link the button doesn’t show on your store. In the Theme Customizer it stays visible so you can still select it and add a link.
  • Button style: Primary (default) is filled with the scheme’s button colors. Secondary is outlined in the scheme’s Secondary button label color and fills on hover. Tertiary is filled with the scheme’s Accent color.
Layout
  • Width: Fit content (default) is only as wide as its label and follows the alignment of the section or group. Fill takes the whole row and uses its own Alignment.
  • Alignment: Left (default), Center or Right. Appears only when Width is Fill.
The corner shape comes from Buttons and the colors from the section’s color scheme. Accepted by: Before and after, Call to action, Image with text, Not found, Page banner, Promotion banner and Rich text, and inside hero banner slides, mosaic tiles and slides, scrolling highlights and the spotlight.

​
Image

Theme editor sidebar showing the Image theme block settings: Image, Mobile image, Caption, Link, Aspect ratio, Width.
A standalone picture for text-led sections.
  • Image: the picture. Until you pick one, a placeholder illustration shows.
  • Mobile image: an optional picture for phones. Without one, phones show Image.
  • Caption: short text under the picture, in a small muted size.
  • Link: makes the picture clickable.
  • Aspect ratio: Natural (default) keeps the picture’s own shape. 1:1, 4:3, 16:9, 21:9 and 3:4 crop it to that shape.
  • Width: Full width (default), Wide (80% of the section), Medium (60%) or Small (40%). On phones every width fills the section.
  • Alignment: Left, Center (default) or Right. Appears only when Width is not Full width.
The corners follow the Cards setting in Corner radius. Accepted by: Not found, Page banner and Rich text.

​
Label

Theme editor sidebar showing the Label theme block settings: Text, Alignment.
A small tag above a heading, such as “New collection” or “Limited edition”.
  • Text: the label text. Default: “New collection”.
  • Alignment: Left (default), Center or Right.
The label sits on a soft tint of the text color, so it stays readable on any color scheme or picture. Accepted inside hero banner slides, mosaic tiles and slides, scrolling highlights and the spotlight.

​
Group

Theme editor sidebar showing the Group theme block settings: Layout direction, Padding.
A container that lays out other blocks in a column or a row. In the Add block list it appears under Layout as Column (a vertical group) and Row (a horizontal group).
  • Layout direction: Horizontal places the blocks side by side, spread across the row from one end to the other and centered on each other. Vertical (default) stacks them.
  • Alignment: Left (default), Center or Right. Lines up the stacked blocks and their text. Appears only when Layout direction is Vertical.
  • Padding: from 0 to 200 pixels. Default: 0. Adds space above and below a vertical group, or left and right of a horizontal one.
A group can hold any theme block, including another group. Accepted by: Call to action, Custom section and Not found, and inside the spotlight and other groups.

​
Custom Liquid

A place for app snippets or your own Liquid and HTML inside a section.
  • Liquid code: the code to render.
Code in this block runs on your live store. Broken or unclosed HTML can break the layout of the whole page. Test the code on a duplicate theme first.
Accepted by: Custom section, and inside a Group.

​
Best practices

  • Use Fit content for side-by-side buttons. Two Fit content buttons in a Row group sit next to each other. Fill buttons each take a row.
  • Set a width limit on long text. Medium keeps paragraphs at a comfortable line length in wide sections.
  • Hide instead of remove. Hide a seasonal block to keep its settings for next time.
  • Keep one Display heading per page. Big headings work best when only the first section uses them.

Common settings

Set each section’s colors, padding and width.

Custom section

Build a section from any theme blocks.