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

# Use the common section settings in Facet

> Learn the Color scheme, Top padding, Bottom padding and Page width settings that most Facet sections share, with the real spacing and widths behind each option.

Most Facet sections end with the same group of settings, called **Common settings**. They set the section's colors, the space above and below it, and how wide its content runs. This page explains each one once, with the real sizes behind every option, so the section pages can stay short.

## What these settings control

* The colors of the section, from its background to its buttons.
* The space above and below the section's content.
* How wide the section's content runs on the page.

## Getting started

**1. Open the Theme Customizer**

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

**2. Select a section**

Click a section in the **Sections** panel, or click it in the preview.

**3. Find Common settings**

Scroll to the bottom of the section's settings to the **Common settings** heading.

![The theme editor with the Hero banner section selected and its settings scrolled to Common settings: header color scheme, top and bottom padding, page width and Custom CSS.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/get-started/common-settings/common-settings-location.jpg?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=c11d640745cbd84af948a2a49af1d7bf)

## Settings

### Color scheme

Picks one of the color schemes you set up in [Colors](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/colors.md). The scheme colors the section's background, text, buttons, borders and form fields. The background always runs the full width of the screen, whatever the **Page width**.

Some sections have extra scheme settings in this group, such as a **Card color scheme**. Those color only the part they name.

### Top padding and Bottom padding

The space above and below the section's content, inside its background. Pick the same size on both to center the content in its band.

| Option | Desktop | Phone |
| - | - | - |
| **None** | 0 | 0 |
| **Small** | 32 pixels | 24 pixels |
| **Medium** | 64 pixels | 48 pixels |
| **Large** | 96 pixels | 64 pixels |
| **Extra large** | 120 pixels | 96 pixels |

Phone sizes apply on screens narrower than 750 pixels. The default differs from section to section.

> [!TIP]
>
> Two sections with the same color scheme in a row read as one band. Set the first one's **Bottom padding** or the second one's **Top padding** to **None** to avoid a double gap between them.

### Page width

How wide the section's content runs. The widths below use the default [Layout](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/layout.md) settings: a **Narrow** page width of 1440 pixels and a 100 pixel minimum page margin.

> [accordion] Narrow
>
> A centered column 1024 pixels wide (about 1250 pixels with a **Wide** page width). Good for text and small groups of cards.

> [accordion] Narrower
>
> A centered column about 680 pixels wide (about 830 pixels with a **Wide** page width). Good for a short message, a form or a single paragraph.

> [accordion] Regular
>
> The full page width minus the page margin on each side: 1240 pixels.

> [accordion] Fluid
>
> The whole width of the screen, with a 50 pixel gap on each side (or your **Minimum page margin**, if it is smaller).

> [accordion] Full
>
> Edge to edge, with no gap at the sides. Pictures and sliders touch the screen edges. On phones, text in most sections keeps a 20 pixel gap so it doesn't touch the edge.

On screens narrower than 990 pixels, the side margin drops to 16 pixels, and **Narrow** and **Regular** fill the screen minus that margin. **Narrower** keeps its width until the screen is too small for it, and then fills the screen the same way.

> [!NOTE]
>
> Not every section offers every width. A picture-led section such as **Image with text** offers only **Fluid** and **Full**, and the option list in the Theme Customizer shows only what that section supports.

## Best practices

* **Vary the width for rhythm.** Alternating **Fluid** picture sections with **Narrow** text sections keeps a long home page from feeling flat.
* **Use padding instead of Spacer sections.** Padding keeps the space inside the section's colored band, so it moves with the section when you reorder.
* **Reuse a few schemes.** Picking from two or three color schemes across the page looks calmer than a different scheme on every section.

## Related guides

> [card] [Layout](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/layout.md)
>
> Change the page width and margins every section measures from.

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


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