> 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/stiletto/sections/theme-sections/using-sections.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.

<h2 align="center">Add sections</h2>

***

{% columns %}
{% column %}
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 %}
{% hint style="info" %}
**Editing templates will change all pages that use the same template**. [Create new templates](/stiletto/general/editing-themes/using-templates.md) for different page layouts, or [show dynamic page content](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md) in sections using the same template.
{% endhint %}
{% endcolumn %}
{% endcolumns %}

### <mark style="color:$primary;">Add blocks</mark>

{% columns %}
{% column width="58.333333333333336%" %}
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.
  {% endcolumn %}

{% column width="41.666666666666664%" %}

<figure><img src="/files/QriVOZDCSfBZ59J00YDr" alt="" width="302"><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

<h2 align="center">Section header</h2>

***

Some sections have a **Section header** that appears above the main content. Other section may use [content blocks](/stiletto/sections/theme-sections/content-blocks.md) or overlay text for the main headings.

Click the section to find the header settings.

* Add a **heading,** **subheading,** or **text.**
* Add optional **button link**
* Change the heading **size** and **alignment**
* To remove the section header, delete any text in these fields

<sub><mark style="color:$info;">Click the section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="187.65338134765625">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. This option doesn't change the heading's appearance.</td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Set the heading text from <strong>XX-Small</strong> to <strong>Display x-large</strong>. You can set the base heading size in Theme settings > Typography.</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;">Text size</mark></td><td>Set the size from to <strong>XX-small</strong> to <strong>5x-large</strong>.</td></tr><tr><td><mark style="color:blue;">Heading alignment</mark></td><td>Position heading text to the <strong>Left,</strong> <strong>Center,</strong> or <strong>Right</strong> above section content.</td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Select or paste a URL for the button.</td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter text to display a button label. Leave this field blank to remove the button.</td></tr></tbody></table>

<h2 align="center">Section styles</h2>

***

{% columns %}
{% column %}
Sections include general style options. These settings appear in almost all sections, with some options depending on the section type.

In the editor side panel, click the section to find style options for:

* **section colors**
* **section width**
* **top and bottom padding**
* **top dividers**
* **animations**
  {% endcolumn %}

{% column %}

<div data-with-frame="true"><figure><img src="/files/l77bTgi9NKAUk536YjEH" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

### <mark style="color:$primary;">Section colors</mark>

Select a **Color scheme** to apply to the section. To learn how to use and modify color schemes, go to the [theme colors guide](/stiletto/theme-styles/colors.md#color-schemes).

### <mark style="color:$primary;">Section width</mark>

{% columns fullWidth="false" %}
{% column width="50%" %}
You can select the width of the section, either a fixed width or adapts to the width of the screen.

\
The following width options are available depending on the type of section:

* **Page width**
* [**Full width**](#user-content-fn-1)[^1]
* **Full width (padded)**
* [**Full width (background only)**](#user-content-fn-2)[^2]
* **Full width on mobile**
  {% endcolumn %}

{% column width="50%" %}

<div align="left"><figure><img src="/files/EpiRVfar45ClXzqEIZIV" alt=""><figcaption><p><strong>Full width</strong></p></figcaption></figure> <figure><img src="/files/uFGMGPycdXryar5xupBm" alt=""><figcaption><p><strong>Full width (background only)</strong></p></figcaption></figure></div>

<div><figure><img src="/files/odeNy4VO7SH3bwcfZCRz" alt=""><figcaption><p><strong>Full width (padded)</strong></p></figcaption></figure> <figure><img src="/files/N6dbxRR5FcUOufdFV1NK" alt=""><figcaption><p><strong>Page width</strong></p></figcaption></figure></div>

{% hint style="info" %}
You can set the theme-wide **max page width** width in *Theme settings > Layout*.
{% endhint %}
{% endcolumn %}
{% endcolumns %}

### <mark style="color:$primary;">Section padding</mark>

{% columns %}
{% column %}
Add or remove space at the top and bottom of the section. Under **Section style** in the section settings, use the sliders to adjust the pixel height of the **Top** and **Bottom padding**. Set the slider to 0px to remove all padding.
{% endcolumn %}

{% column %}

<figure><img src="/files/vlIt4RBppRJUnUhmUof4" alt="" width="563"><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

### <mark style="color:$primary;">Top divider</mark>

{% columns %}
{% column %}
Show a solid border at the top of the section to visually separate it from other sections.

When enabled you can enable **Full width divider** to span the section width.

The Top divider uses the **Lines and borders** in the select color schemes. Learn more about [theme color settings](/stiletto/theme-styles/colors-1.md).
{% endcolumn %}

{% column %}

<figure><img src="/files/Wh4lk6I1AUT3AJGxO3lt" alt="" width="563"><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

### <mark style="color:$primary;">Animations</mark>

When animations are enabled, text and images are loaded dynamically: section contents slide, fade, zoom, or ease into position at a delay rather than all at once. Other animations include a "shimmer" over images and subtle visual changes to elements like buttons or hot spots.

#### <mark style="color:$info;">Turn off animations</mark>

You may want to turn off animations if you have concerns about load time, style, or accessibility. You can do so in your **Theme settings** or in individual **Section settings**.

* To turn off animations for a section, click the section to open the settings. Under **Section style**, toggle off **Enable animations**.
* To turn off animations for *all* sections, go to **Theme settings > Animation** and toggle of **Enable section animations**.

[^1]: **Supported sections**\
    Countdown banner\
    Countdown bar

    Image hero

    Image hero split

    Image with text split

    Article page - Featured image block

    Promo banner

    Promo bar

    Sales banner

    Shoppable image

    Slideshow

    Video

    Video hero

[^2]: **Supported sections**

    Collection banner\
    Image hero

    Image with text split

    Slideshow

    Video hero


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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/stiletto/sections/theme-sections/using-sections.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.