> ## 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 your own layout with Facet's custom section

> Build a section from scratch in Facet by stacking any theme blocks, such as headings, text, buttons, images and groups, in the order you need.

The Facet custom section starts empty. You fill it with theme blocks, such as headings, text, buttons, images and groups, and stack them in any order. Use it when none of the ready-made sections has the layout you need. This page explains how to build a section from blocks and covers its settings.

![The Custom section section as it appears on the Facet demo storefront.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/custom-section/custom-section-overview.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=6c4cdfbbcda3c4e2fdc77a9f40347951)

## What this section controls

* Which blocks the section holds, and their order.
* An optional background picture behind the blocks.
* The colors, width and spacing around the blocks.

## Getting started

**1. Open the Theme Customizer**

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

**2. Add the section**

In the **Sections** panel, click **Add section** and choose **Custom section**. It starts with no blocks.

**3. Add blocks**

Under **Custom section**, click **Add block** and choose a block, such as **Heading** or **Image**. Repeat for each piece of content.

**4. Arrange the blocks**

Drag the blocks in the sidebar to change their order.

![The theme editor with the Custom section section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/custom-section/custom-section-location.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=d8701866bf0c89d597b0fd0973c255f9)

## Building a section from blocks

The custom section accepts every theme block in Facet. The blocks sit in one column, top to bottom, in the order shown in the sidebar, with even space between them.

* **Stack content** with **Heading**, **Text**, **Image**, **Button** and **Label** blocks.
* **Place blocks side by side** with a group. In the **Add block** menu, groups appear as **Row** and **Column** under **Layout**. A group holds other blocks, and its **Layout direction** (**Horizontal** or **Vertical**) decides whether they sit next to each other or on top of each other, so you can put two buttons in a row, or an image beside text.
* **Nest groups** inside groups to build columns within rows.

Each block has its own settings for size, alignment and spacing. They are described on [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md).

> [!TIP]
>
> Some blocks, such as **Collapsible row** or **Logos**, are made for a particular section. They also work here, but check how they look in the preview. If a ready-made section does what you need, it usually gives a more polished result.

## Section settings

![Theme editor sidebar showing the Custom section section settings: Background, Common settings, Color scheme, Top padding, Bottom padding, Page width, and more.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/custom-section/custom-section-settings-1.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=a34a410a6d4d9b47fae40fd391cc9df7)

* **Background**: an optional picture behind the blocks. It covers the whole section, including the padding, and is cropped to fit the section's shape, so its edges may be cut off. The blocks sit on top of it. Without a picture, the section shows its color scheme's background.

### Common settings

See [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) for details.

* **Color scheme**: the background and text colors of the section. A **Background** picture covers the background color. Blocks with their own color scheme keep it.
* **Top padding** and **Bottom padding**: None, Small, Medium (default), Large or Extra large.
* **Page width**: Narrow, Narrower, Fluid (default) or Full.

## Best practices

* **Sketch the layout first.** Decide which pieces go in a row before you add blocks, then add a **Row** for each one.
* **Rename your blocks.** Give blocks clear names in the sidebar, such as "Hero buttons", so the section stays easy to edit later.
* **Check phones.** Blocks that fit side by side on a laptop can get cramped on small screens. Preview every custom section at phone size.

## Related guides

> [card] [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md)
>
> Every block you can add to a custom section, with its settings.

> [card] [Custom Liquid](https://docs.shopify.lightsout.agency/themes/facet/sections/custom-liquid.md)
>
> Add your own code when blocks are not enough.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.