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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/eclipse/sections/overview/section-styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.