> ## 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.

# Add space between sections with Facet's spacer

> Use Facet's spacer section to add an empty band of a set height between sections, colored by a color scheme, with half the height shown on phones.

The Facet spacer is an empty band you place between two sections to add room or a strip of color. It has no content of its own. This page covers its two settings.

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

## What this section controls

* The height of the empty band.
* The color of the band.

## 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 **Spacer**. Drag it between the two sections you want to separate. It can't be added to the header.

**3. Set the height**

Click **Spacer** and move the **Height** slider.

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

## Section settings

![Theme editor sidebar showing the Spacer section settings: Height, Common settings, Color scheme, Custom CSS.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/sections/spacer/spacer-settings-1.png?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=be9351f08a6fd0e1501a69af03554b7f)

* **Height**: from 8 to 200 pixels, in steps of 4. Default: 48. Phones show half this height.

### Common settings

* **Color scheme**: the background color of the band. Pick the same scheme as the sections around it for plain space, or a different one for a strip of color.

The spacer has no padding or page width settings. See [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) for details on color schemes.

## Best practices

* **Try padding first.** Most sections have **Top padding** and **Bottom padding**. Use the spacer when you need a height those options don't offer, or a band in another color.
* **Remember the phone height.** A 48 pixel spacer is 24 pixels on phones. Set a larger height if you need more room there.
* **Use it as a divider.** A short spacer, such as 8 or 12 pixels, in a contrasting scheme reads as a colored line between sections.

## Related guides

> [card] [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md)
>
> Padding and width settings shared by most sections.

> [card] [Colors](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/colors.md)
>
> Create the color schemes the spacer can use.


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