> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/eclipse/sections/overview/section-styles.md).

# 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="/files/2M0V0ixfMZe1eN9VOV44" 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](/eclipse/pages/templates/using-templates.md) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields.md) 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="/files/QriVOZDCSfBZ59J00YDr" 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](/eclipse/sections/overview/content-blocks.md) 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="/files/tYRRkBa436rKRF3H2n7i" 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="/pages/o3C4cpr4n90wK1x3sWBC#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="/files/fOrc6uVsbB6elVRJdyxv" 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="/files/sXi5uhmtUdleBi713l6u" alt="" width="174"><figcaption></figcaption></figure> <figure><img src="/files/IbjgGmxuq50rAajoF4cv" 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](/eclipse/general/accessibility.md).

<div><figure><img src="/files/JmKIkuacZLcZmZmwYM6O" alt="" width="355"><figcaption></figcaption></figure> <figure><img src="/files/r6qvEikOKVMq5Hv30JkJ" 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](/eclipse/sections/grid.md), [Image hero](/eclipse/sections/image-hero.md), or [Slideshow](/eclipse/sections/slideshow.md).
{% 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](/eclipse/changelog.md) and [update your theme](/eclipse/changelog/update-your-theme.md) 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*](/eclipse/sections/slideshow.md)*,* [*Image hero*](/eclipse/sections/image-hero.md)*,* [*Video hero*](/eclipse/sections/video-hero.md)*,* [*Newsletter*](/eclipse/sections/email-signup.md) *and* [*Collection banner*](/eclipse/collections/collection-page/banner.md)*.*

<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="/files/KXOwANhnH80jQD0D7bUN">/files/KXOwANhnH80jQD0D7bUN</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="/files/k8ye35eg8K9kPTyHbL79">/files/k8ye35eg8K9kPTyHbL79</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="/files/L8Yrq5xpqN3m2y39Jyhp">/files/L8Yrq5xpqN3m2y39Jyhp</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="/files/KN0tRx1sNflpkl3O0DQO">/files/KN0tRx1sNflpkl3O0DQO</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="/files/GKReBH3EfMLtTnOAek62" alt="" width="338"><figcaption></figcaption></figure> <figure><img src="/files/y88BaLClRCPljbxnyu4N" alt="" width="375"><figcaption></figcaption></figure></div>