Blocks
Content blocks
Text, button, rich text, image, collapsible row, expandable text, drawer, group, and Custom Liquid.
On this page
Content blocks are theme blocks: the same blocks appear in several sections, and some can be nested inside groups.
Where to use them
| Block | Product page / Featured product | Page section | Custom section | Inside a Group | Inside a Collapsible row | Pop-up | Collection header |
|---|---|---|---|---|---|---|---|
| Text | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Button | ✓ | ✓ | — | — | — | ✓ | ✓ |
| Rich text | ✓ | ✓ | — | — | ✓ | ✓ | ✓ |
| Image | ✓ | — | — | — | ✓ | — | — |
| Collapsible row | ✓ | ✓ | ✓ | ✓ | — | — | — |
| Expandable text | ✓ | ✓ | ✓ | ✓ | — | — | — |
| Drawer | ✓ | ✓ | ✓ | ✓ | — | — | — |
| Group | ✓ | ✓ | ✓ | ✓ | — | — | — |
| Custom Liquid | ✓ | ✓ | ✓ | ✓ | ✓ | — | — |
On the product page and in the featured product section, product groups (Product column, Product row) accept every block, including product blocks. See Product blocks.
Text
A single line of plain text: a heading, a subheading, a tagline.
| Setting | Values | What it does |
|---|---|---|
| TextFR: Texte | TextDefault: “Text” | — |
| Text styleFR: Style de texte |
| — |
| Semantic tagFR: Balise sémantique |
| Changes what the text means to screen readers and search engines, not how it looks. Use a heading only where it names the content that follows. |
| AlignmentFR: Alignement | AlignmentDefault: Left | — |
Text style changes how the text looks (Heading, Subheading, Normal text). Semantic tag changes what the text represents to screen readers and search engines, without changing how it looks. Only use a heading tag if the text names the content that follows.
Button
A link styled as a button.
| Setting | Values | What it does |
|---|---|---|
| Button labelFR: Texte du bouton | TextDefault: “Discover” | — |
| LinkFR: Lien | Link | — |
| Button styleFR: Style de bouton |
| — |
| AlignmentFR: Alignement | AlignmentDefault: Left | — |
Choose the style based on what the button commits to: Solid for the main action in the area, Outlined for an alternative, Underlined for a low-key next step. Avoid putting two solid buttons side by side. See Buttons.
Rich text
A formatted paragraph: bold, italic, links, lists.
| Setting | Values | What it does |
|---|---|---|
| TextFR: Texte | Rich textDefault: “<p>Use this text to share the things that do not fit in a product description: how a piece is made, who made it, and what it asks of you.</p>” | — |
| AlignmentFR: Alignement | AlignmentDefault: Left | — |
Placed directly in the buy box, on the product page or in the featured product section, it's set in the smaller body size of the buy box's other secondary lines.
Image
One image at the full width of its container: a fabric close-up in a collapsible row, a certificate under the description.
| Setting | Values | What it does |
|---|---|---|
| Image | Image | — |
The image's alt text is the one set on the file in Shopify. With no image, the block shows nothing, not even a placeholder: connect Image to a product metafield (dynamic source icon) holding a file, and products without one simply show nothing.
Collapsible row
A heading that expands to show its content when clicked: ideal for materials, care, shipping, or FAQs.
| Setting | Values | What it does |
|---|---|---|
| HeadingFR: Titre | TextDefault: “Composition and care” | — |
| Heading levelFR: Niveau de titre |
| One level below the heading of the section or block it sits in. |
| TextFR: Texte | Rich textDefault: “<p>Describe the material, its origin and how it should be looked after.</p>” | — |
| Open by defaultFR: Ouvert par défaut | CheckboxDefault: Off | — |
- Set the Heading level one step below the heading of the section that contains the row (Heading 3 under a Heading 2, for example).
- The row can also hold Text, Rich text, Image and Custom Liquid blocks: add them under the row in the theme editor. They show after the row's own Text, in their order.
- A row doesn't show when its text is empty and its blocks show nothing.
- You can connect the text, or an Image block inside the row, to a metafield (dynamic source icon) to show content specific to each product.
Expandable text
Long text shown on a few lines, with a Read more / Read less button.
| Setting | Values | What it does |
|---|---|---|
| TextFR: Texte | Rich textDefault: “<p>Describe the piece: what it is cut from, how it is made and how it is meant to be worn.</p>” | — |
| Visible linesFR: Lignes visibles | From 2 to 12Default: 4 | — |
The button only appears if the text is longer than the number of Visible lines. On the default product page, this block shows the product description (dynamic source Product description).
Drawer
A link that opens a side panel: "Size guide", "Shipping and returns", "Care". The content stays within reach without making the page longer.
| Setting | Values | What it does |
|---|---|---|
| Trigger labelFR: Libellé du déclencheur | TextDefault: “Delivery and returns” | — |
| HeadingFR: Titre | TextDefault: “Delivery and returns” | — |
| TextFR: Texte | Rich textDefault: “<p>Describe how the piece travels: the carrier, the timing, what the box contains and how a return is made.</p>” | — |
The drawer slides in from the side its arrow points to (the right, in left-to-right languages), closes with the X button or the Esc key, and returns focus to the link. Without JavaScript, it behaves like a collapsible row. A drawer with empty text doesn't show.
Group
A container that arranges several blocks in a column or a row. It comes in two presets, Column and Row, in the Layout category.
| Setting | Values | What it does |
|---|---|---|
| Layout directionFR: Sens de la mise en page |
| — |
| AlignmentFR: Alignement |
| —Shown when “Layout direction” is “Vertical”. |
| PaddingFR: Marge intérieure |
| — |
A group accepts Text, Collapsible row, Expandable text, Custom Liquid, Drawer, and other Group blocks. Use a Row to place two texts side by side, or a Column with padding to set a group of blocks apart.
Custom Liquid
Liquid or HTML code inserted inside a section, such as an app widget on the product page.
| Setting | Values | What it does |
|---|---|---|
| Liquid codeFR: Code Liquid | Liquid code | Add app snippets or other code to create advanced customizations. Learn more |
| Accessible labelFR: Libellé accessible | Text | Names this area for screen readers and turns it into a landmark they can jump to. Leave it empty for decorative content and app embeds. |
| Use theme text stylesFR: Utiliser les styles de texte du thème | CheckboxDefault: On | Applies the theme's headings, lists and links to the content. Turn it off when an app brings its own styles. |
Until you enter code, the block shows help text, including on your live store. See also the Custom Liquid section and Editing code.
Faubourg 1.1.0