Blocks
Content blocks
Text, button, rich text, 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 |
|---|---|---|---|---|
| Text | ✓ | ✓ | ✓ | ✓ |
| Button | ✓ | ✓ | — | — |
| Rich text | ✓ | ✓ | — | — |
| 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 (Title, Subtitle, 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 |
|---|---|---|
| Link labelFR: Libellé du lien | 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: “Use this text to share the things that do not fit in a product description: h…” | — |
| AlignmentFR: Alignement | AlignmentDefault: Left | — |
Collapsible row
A heading that expands to show text 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: “Describe the material, its origin and how it should be looked after.” | — |
| 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).
- A row with empty text doesn't show.
- You can connect the text 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: “Describe the piece: what it is cut from, how it is made and how it is meant t…” | — |
| 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: “Describe how the piece travels: the carrier, the timing, what the box contain…” | — |
The drawer slides in from the edge of the screen, 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.
Maison 1.0.0