> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/theme-blocks/blocks.md). # Overview Blocks are the building units you place **inside sections** to compose your pages. Instead of every section carrying a fixed layout, Helix lets you add, reorder, and nest blocks to build the exact content structure each section needs. This group documents the **theme blocks** — the reusable blocks available across many sections through the **Add block** button. Section-specific blocks (such as footer menus or product details) are documented on their own section pages. Think of blocks as interchangeable puzzle pieces: build a piece once, then add, remove, and rearrange it wherever it makes sense — no coding required. ## How blocks work * **Add a block** — In the theme editor, select a section and click **Add block**. The block picker groups blocks by category (Basic, Layout, Forms, and so on). * **Reorder** — Drag blocks in the section tree to change their order on the page. * **Nest with Group** — The [Group](/helix/theme-blocks/layout/group.md) block is a container. Place blocks inside a Group to arrange them in a row or column, share a background, or wrap them in a single link. Groups can even sit inside other Groups. * **Availability** — Not every block appears in every section. A section's design decides which block categories it accepts. ### Nesting Blocks live inside sections, and they can also nest inside other blocks. This layering is what lets you build rich layouts from simple pieces — a Group holding a heading, text, and a price, with a second Group inside it holding two buttons: ![How blocks nest inside a section](/files/honnsrC9fuKoithRCcaZ) On the left is the block tree as you arrange it in the editor; on the right is how those same blocks render on the storefront. {% hint style="info" %} **Theme blocks vs. section-specific blocks.** Theme blocks (documented here) are shared and reusable — the same **Heading** or **Image** block works in a Hero, a Custom section, or a Group. Section-specific blocks only exist inside the one section that defines them and are documented with that section. {% endhint %} {% hint style="warning" %} Some sections ship with **locked** blocks that keep the design consistent (for example, slideshow navigation). You can **hide** a locked block with the eye icon, but you cannot delete it. {% endhint %} ## Quick reference | Block | Category | What it does | | -------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------ | | [Heading](/helix/theme-blocks/basic/heading.md) | Basic | Main headline with size, highlight, and animation controls. | | [Subheading](/helix/theme-blocks/basic/subheading.md) | Basic | Small label above or below a heading. | | [Text](/helix/theme-blocks/basic/text.md) | Basic | Rich-text paragraph for body copy. | | [Header](/helix/theme-blocks/basic/header.md) | Basic | A grouped Subheading, Heading, and Text section header. | | [Button](/helix/theme-blocks/basic/button.md) | Basic | Single call-to-action link. | | [Buttons](/helix/theme-blocks/basic/buttons.md) | Basic | Two side-by-side call-to-action buttons. | | [Image](/helix/theme-blocks/basic/image.md) | Basic | Inline image with ratio and link options. | | [Video](/helix/theme-blocks/basic/video.md) | Basic | Uploaded or external (YouTube/Vimeo) video with a play button. | | [Icon](/helix/theme-blocks/basic/icon.md) | Basic | An icon from the library or a custom SVG. | | [Collapsible text](/helix/theme-blocks/basic/collapsible-text.md) | Basic | Long text that truncates to a line limit with a show-more toggle. | | [Countdown timer](/helix/theme-blocks/basic/countdown-timer.md) | Basic | Live countdown to a fixed or recurring date. | | [Coupon code](/helix/theme-blocks/basic/coupon-code.md) | Basic | Displays a copyable discount code. | | [Page](/helix/theme-blocks/basic/page.md) | Basic | Pulls content from a Shopify page into the block. | | [Colors](/helix/theme-blocks/basic/colors.md) | Basic | A row of color swatches built from nested Item blocks. | | [Image comparison](/helix/theme-blocks/basic/image-comparison.md) | Basic | Before-and-after images with a draggable handle. | | [Group](/helix/theme-blocks/layout/group.md) | Layout | Container that arranges nested blocks in a row or column. | | [Columns](/helix/theme-blocks/layout/columns.md) | Layout | A responsive grid of equal-width Column blocks. | | [Masonry](/helix/theme-blocks/layout/masonry.md) | Layout | An asymmetric grid of varied-height Item tiles. | | [Comparison table](/helix/theme-blocks/layout/comparison-table.md) | Layout | Side-by-side table of products or plans, built from Feature and Column blocks. | | [Accordion](/helix/theme-blocks/layout/accordion.md) | Layout | Collapsible rows built from nested content. | | [Divider](/helix/theme-blocks/layout/divider.md) | Layout | A horizontal rule between blocks. | | [Spacer](/helix/theme-blocks/layout/spacer.md) | Layout | Adjustable empty space between blocks. | | [Marquee](/helix/theme-blocks/layout/marquee.md) | Layout | A continuously scrolling strip of nested content. | | [Carousel](/helix/theme-blocks/layout/carousel.md) | Layout | A slider of nested Slide blocks with navigation and autoplay. | | [Email signup](/helix/theme-blocks/forms/email-signup.md) | Forms | Newsletter form with optional subscription preferences. | | [Contact form](/helix/theme-blocks/forms/contact-form.md) | Forms | A customizable contact form. | | [Popup](/helix/theme-blocks/links/popup.md) | Links | A button that opens a popup, drawer, or bottom sheet holding nested blocks. | | [Social media links](/helix/theme-blocks/links/social-media-links.md) | Links | Row of icons linking to your social profiles. | | [Image card](/helix/theme-blocks/cards/image-card.md) | Cards | Media card with overlaid, positioned content. | | [Product card: Compact](/helix/theme-blocks/cards/product-card-compact.md) | Cards | Small horizontal product card with thumbnail, price, and add to cart. | | [Product finder](/helix/theme-blocks/product/product-finder.md) | Product | A short quiz that recommends products or a collection. | | [Payment icons](/helix/theme-blocks/footer/payment-icons.md) | Footer | Displays your store's accepted payment methods. | | [Custom Liquid](/helix/theme-blocks/custom/custom-liquid.md) | Custom | Insert custom Liquid, HTML, or app snippets. | | [Localization](/helix/theme-blocks/utilities/localization.md) | Utilities | Currency and language selectors. | | [Quick Links](/helix/theme-blocks/utilities/quick-links.md) | Utilities | A compact inline row of links from a flat menu. |