# Using sections

**Sections** are the basic components of templates. You can add, rearrange, and customize sections to create the layout and content of your pages.

## Add sections

***

{% columns %}
{% column width="50%" %}
Sections are listed in the theme editor **sidebar** in the order they appear on the page.

* Click the **(+) Add section** button in the theme editor sidebar.
* Use the **drag handles** (**⋮⋮**) to change the order of your sections and blocks
* Use the **Remove section** button to delete them or click the **eye icon** to hide them.
  {% endcolumn %}

{% column width="50%" %}

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2Fgit-blob-5fa888e0ab8c98057b3fbcbd978f014bf5a716f1%2Feditor-section-setup.png?alt=media" alt="Highlighted areas of the Shopify theme editor showing how to open templates, add sections, and re-order sections."><figcaption></figcaption></figure>

{% endcolumn %}
{% endcolumns %}

{% hint style="info" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/eclipse/general/editing-themes/dynamic-content-with-metafields) in sections using the same template.
{% endhint %}

### Add blocks

Most sections are made up of individual **Blocks** for text, media, buttons, or other content, which are nested under sections in the editor panel.

* Click **(+) Add block** button to add or select the type of block you wish to add.
* Click the **block** to open the block settings.

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2Fgit-blob-5934a55c545defc6ff3055bbe2320bfe31f66591%2Fshopify-content-drag-handles.png?alt=media" alt="" width="302"><figcaption></figcaption></figure>

## Section header

***

Some sections have a **Section header** that appears above the main content. Other section may use [content blocks](https://help.fluorescent.co/eclipse/sections/overview/content-blocks) or overlay text for the main headings.

Click the section to find the header settings.

* Add a **heading**, **text**, and optional **link**.
* To remove the section header, delete any text in these fields.

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2Fy2XtN0jS5YB9sMcHLaLq%2Fsection-header.jpg?alt=media&#x26;token=52367d2f-ae5a-4946-981d-5f259cacd4cd" alt="" width="540"><figcaption></figcaption></figure>

`Click the section to find settings`

<table><thead><tr><th width="158">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Change or remove the title of the section.</td></tr><tr><td><mark style="color:blue;">Heading tag</mark></td><td>Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to <a href="../../../general/editing-themes/h1-heading-tags#replacing-default-h1-headings">replace default H1 headings</a>.<br><br>This option doesn't change the heading's appearance.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add multiple lines of rich text below the heading.</td></tr><tr><td><mark style="color:blue;">Link URL</mark></td><td>Select a page or URL for the link.</td></tr><tr><td><mark style="color:blue;">Link label</mark></td><td>Add text to display the link.</td></tr></tbody></table>

## Section styles

***

All sections include general style options for **Colors** and **Spacing**. In the editor side panel, click the section to find settings for **Color scheme**, **Section width**, and **Section padding**.

### Color schemes

***

{% columns %}
{% column width="66.66666666666666%" %}
You can change the section or block colors by assigning a color scheme using the color scheme picker.

Click the section or block to find the **Color scheme** option.
{% endcolumn %}

{% column width="33.33333333333334%" %}

<div align="left" data-full-width="true"><figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FBM1GveFBgQ8ADa8UVq0B%2Fsection-color-scheme.png?alt=media&#x26;token=d8d1dfbb-ce34-44bd-9c5d-12ae77841b00" alt="" width="178"><figcaption></figcaption></figure></div>

{% endcolumn %}
{% endcolumns %}

{% hint style="info" %}
A **color scheme** consists of a set of colors that you can use for sections throughout your store. Color schemes help you create consistent palettes.
{% endhint %}

### Edit color schemes

You can add and define different color schemes in **Theme settings > Colors**. These color schemes will appear as options in section and block settings.

In **Theme settings**, click a color scheme to edit its color options. Click **(+) Add scheme** to add a new color scheme.

<div><figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FC2YYSxTvRZP0IHXcvULI%2Fcolor-schemes.png?alt=media&#x26;token=f1e6b865-9809-41b8-99b8-3068caf87427" alt="" width="174"><figcaption></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FxYNzC2rmcI5ZGGyDONTD%2Fcolor-scheme-settings.png?alt=media&#x26;token=06795cd8-c66c-4ee5-99ec-16a1146e2ea6" alt="" width="174"><figcaption></figcaption></figure></div>

#### Color scheme options

Every color scheme has the following color options.

<table><thead><tr><th width="192">General colors</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Background</mark></td><td>The background of the section, which spans the full height and width.</td></tr><tr><td><mark style="color:blue;">Background gradient</mark></td><td>Some sections can use a gradient background instead of a solid color background. You can choose the style, angle, position, and opacity of the gradient. See Shopify's <a href="https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients">color gradient guide</a> to learn more.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>All text included in the section.</td></tr><tr><td><mark style="color:blue;">Lines and borders</mark></td><td>All lines and borders that appear between or within sections.</td></tr><tr><td><mark style="color:blue;">Accent</mark></td><td>Special design elements in sections</td></tr><tr><td><mark style="color:blue;">Accent foreground</mark></td><td>Text or icons that overlay accent elements</td></tr><tr><td><strong>Buttons</strong></td><td></td></tr><tr><td><mark style="color:blue;">Solid buttons</mark></td><td>The background and text colors for buttons with solid style</td></tr><tr><td><mark style="color:blue;">Outline buttons</mark></td><td>The background, text, and border colors for buttons with outline style</td></tr><tr><td><mark style="color:blue;">Buttons with icon</mark></td><td>The background and foreground colors for buttons with icons</td></tr></tbody></table>

### Overlay colors

***

When text appears over images or videos, an overlay color is used to provide contrast between the text and background, keeping it readable and [accessible for everyone](https://help.fluorescent.co/eclipse/general/accessibility).

<div><figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FFkxATPgxUWO5XCsezGbG%2Fpw%20960.png?alt=media&#x26;token=9e639255-30da-4bbc-89ba-de3e207e5b3c" alt="" width="355"><figcaption></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FJmND9VbF4HtwEqV18aeb%2Foverlay-color-gradient.png?alt=media&#x26;token=953171f8-094a-43c4-97fe-2c767e76505e" alt="" width="563"><figcaption></figcaption></figure></div>

{% stepper %}
{% step %}
In the section or block settings, select a **color scheme.**

{% hint style="info" %}
The overlay uses the color scheme's **background** color. If the color scheme has a **background gradient**, it will be used instead.\
\
Background gradients fade across a range of hues. Learn more in Shopify's [color gradient guide](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients).
{% endhint %}
{% endstep %}

{% step %}
Use the **overlay opacity** slider to make the tint more or less transparent.

{% hint style="info" %}
Set the opacity to 0% to turn off the tint overlay.

Set the opacity to 100% to create **solid color blocks or banners** in sections like [Grid](https://help.fluorescent.co/eclipse/sections/grid), [Image hero](https://help.fluorescent.co/eclipse/sections/image-hero), or [Slideshow](https://help.fluorescent.co/eclipse/sections/slideshow).
{% endhint %}
{% endstep %}
{% endstepper %}

`Click the section or block to find settings`

<table><thead><tr><th width="164">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Overlay opacity</mark></td><td>Use the slider to change the transparency of the overlay.<br><br>Set the opacity to 0% to turn off the overlay.</td><td><strong>0 - 100</strong> %</td></tr></tbody></table>

### Section width

***

{% hint style="warning" %}
Width options were updated in v4.0. View the [changelog](https://help.fluorescent.co/eclipse/changelog) and [update your theme](https://help.fluorescent.co/eclipse/changelog/update-your-theme) to access new features.
{% endhint %}

Change the **Section width** to adjust how far the section spans across the page. In the section settings, find **Width** options under *Section.*

* The **page width** has a fixed width of 1600px
* Other width options adapt to the visitor's browser width

*Available page width options vary depending on the type of section. The* **Full width (background only)** *is available only for* [*Slideshow*](https://help.fluorescent.co/eclipse/sections/slideshow)*,* [*Image hero*](https://help.fluorescent.co/eclipse/sections/image-hero)*,* [*Video hero*](https://help.fluorescent.co/eclipse/sections/video-hero)*,* [*Newsletter*](https://help.fluorescent.co/eclipse/sections/email-signup) *and* [*Collection banner*](https://help.fluorescent.co/eclipse/collections/collection-page/banner)*.*

<table data-card-size="large" data-view="cards"><thead><tr><th align="center"></th><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><strong>Page width</strong></td><td>Section background and content span the page width (1600px).</td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FkqwwfUK4Evv68crWzz15%2Fpage-width.png?alt=media&#x26;token=748312b7-077c-4ce9-bd31-c964a3d742fb">page-width.png</a></td></tr><tr><td align="center"><strong>Full width (padded)</strong></td><td>Section background spans the screen's full width with some padding, and content spans the width of the background.</td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F9YsWGB6aHaSBsFvCgMDC%2Ffull-width-padded.png?alt=media&#x26;token=4c3991ae-1a3e-4d40-afb0-8ca07586a8ae">full-width-padded.png</a></td></tr><tr><td align="center"><strong>Full width (background only)</strong></td><td>Section background media spans the full screen and content spans the page width (1600px)</td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FXNe7fhR9SIZC5x410BFO%2Ffull-width-background.png?alt=media&#x26;token=4d1facf4-ac96-4441-aaa0-3ad88280344a">full-width-background.png</a></td></tr><tr><td align="center"><strong>Full width</strong></td><td>Both section background and content span the screen's full width.</td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FeQHdrFeDjEWAQ6CYJHsb%2Ffull-width.png?alt=media&#x26;token=b190c770-1dc3-4f94-b98d-52fb2b7ffd8d">full-width.png</a></td></tr></tbody></table>

### Section padding

***

Use the sliders to add space at the top and bottom of the section. Set to 0 to remove spacing.

<div><figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2Ff5c92UQJcOOBX0wltGWz%2Fsection-padding-setting.png?alt=media&#x26;token=77489636-e7f2-4eec-aa4a-2c1206bb9335" alt="" width="338"><figcaption></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2Flptuvb1aCEGFn78gFgVI%2Fsection-padding.png?alt=media&#x26;token=21b090b2-a799-4ae5-af7a-227e14d5f9fe" alt="" width="375"><figcaption></figcaption></figure></div>