> ## Documentation Index > Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt > Use this file to discover all available pages before exploring further. # Build sections with theme blocks in Facet > Add, reorder, hide and remove blocks in Facet sections, and set up the shared Heading, Text, Button, Image, Label, Group and Custom Liquid blocks. 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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/get-started/theme-blocks/theme-blocks-location.jpg?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=e7d3380daf149295b7edd8cd2fe542d0) ## 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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/get-started/theme-blocks/theme-blocks-add-block.jpg?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=cf566dae4be911d7dcaeb7c55a80a518) ## 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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/get-started/theme-blocks/theme-blocks-nested-logos.jpg?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=6053c103a77fbeb0b0a0638655af9251) > [!NOTE] > > 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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/get-started/theme-blocks/theme-blocks-block-heading-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=c513080e5d082d5c0adf6b03f4ecacdf) 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](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/typography.md). **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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/get-started/theme-blocks/theme-blocks-block-text-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=fabc87c514867ccdb0ecb80883ef5dcc) 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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/get-started/theme-blocks/theme-blocks-block-button-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=575db499fc5086d1d9e234e46f4aebee) 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](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/buttons.md) 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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/get-started/theme-blocks/theme-blocks-block-image-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=642511755e8bf9408afe249580e21b76) 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](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/corner-radius.md). Accepted by: **Not found**, **Page banner** and **Rich text**. ### Label ![Theme editor sidebar showing the Label theme block settings: Text, Alignment.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/get-started/theme-blocks/theme-blocks-block-label-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=f7491887525d4b8337dbb6f9d10c00a5) 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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/get-started/theme-blocks/theme-blocks-block-group-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=899c8b3a8661d2feec012f6e04e8d5f7) 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. > [!WARNING] > > 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. ## Related guides > [card] [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) > > Set each section's colors, padding and width. > [card] [Custom section](https://docs.shopify.lightsout.agency/themes/facet/sections/custom-section.md) > > Build a section from any theme blocks. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.