> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/sections/overview.md).

# Overview

### What is a section?

Sections are the building blocks of your Avante store — a banner, a product grid, a slideshow, a testimonial. You add, reorder, and remove them in the Theme Editor to build a page without code. Each section is made of **blocks** that control its inner content (headings, images, buttons, slides, and so on).

### How sections work in the Theme Editor

* **Add a section** — click **Add section** and pick from the library
* **Reorder** — drag and drop to change the page order
* **Customize** — adjust each section's settings in the right-hand panel
* **Add blocks** — click **Add block** inside a section to add slides, images, products, etc.
* **Duplicate or remove** — from the section's menu

Changes preview in real time.

<figure><img src="/files/c1mg4gxsZka9Xyd5qkRk" alt=""><figcaption></figcaption></figure>

### Common section settings

Most sections share the same core controls. They're described here once; each section page covers only what's unique to it.

#### Layout & width

| Setting                           | What it does                                                                                   |
| --------------------------------- | ---------------------------------------------------------------------------------------------- |
| Section width                     | **Overlap by navigation** (full-bleed under a transparent header), **Full-width**, or **Wide** |
| Narrow content width              | Constrains the content block to a narrower column                                              |
| Desktop / Mobile section paddings | Top and bottom spacing, set separately per device                                              |

#### Content positioning

| Setting                                | What it does                                                                                                 |
| -------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| Center text                            | Centers the content block                                                                                    |
| Vertical / Horizontal content position | Places content Top/Center/Bottom and Left/Center/Right                                                       |
| Heading / Text / Button                | Content blocks; wrap a word in {curly brackets} for the Secondary heading font (Theme settings → Typography) |

#### Image overlay (media & banner sections)

| Setting                | What it does                                 |
| ---------------------- | -------------------------------------------- |
| Image overlay          | Solid color over the image for text contrast |
| Image overlay gradient | Gradient instead of a solid color            |
| Image overlay opacity  | Strength of the overlay (%)                  |

#### Colors

| Setting                 | What it does                                                               |
| ----------------------- | -------------------------------------------------------------------------- |
| Color scheme            | **Base**, **Swap**, or **Set** — apply a theme color scheme to the section |
| Fill the entire section | Extends the scheme background across the full section                      |

For recommended image and video dimensions, see [Image & video size recommendations](/docs/avante-themes/faq/performance/image-and-video-size-recommendations.md).

### Common blocks

Many sections are built from the same set of blocks. They work the same way wherever they appear; section pages list only the blocks unique to them.

<table data-search="false"><thead><tr><th>Block</th><th>What it does</th></tr></thead><tbody><tr><td>Heading</td><td>Main title; supports gradient color. Wrap a word in {curly brackets} for the Secondary heading font</td></tr><tr><td>Subheading</td><td>Small text above the heading</td></tr><tr><td>Text</td><td>A paragraph of supporting text</td></tr><tr><td>Button</td><td>A call-to-action link (label, link, style)</td></tr><tr><td>Image</td><td>An image block</td></tr><tr><td>Inline image reveal</td><td>Reveals an image on hover next to matching text inside a Heading block. Set <strong>Hover text</strong> to exactly match a word/phrase in a Heading block, then pick the Image (and optional Link)</td></tr><tr><td>Context image</td><td>A small supplementary image beside the content</td></tr><tr><td>Empty space</td><td>Vertical spacing with separate desktop and mobile heights</td></tr><tr><td>Line</td><td>A divider line with its own padding</td></tr><tr><td>Video button</td><td>A button that opens a video in a popup</td></tr><tr><td>Custom liquid</td><td>Insert custom Liquid code</td></tr><tr><td>Promo code</td><td>Show a copyable promo code</td></tr><tr><td>Countdown timer</td><td>A live countdown (in banners and promo sections)</td></tr></tbody></table>

### Section padding ranges

Every section's Top/Bottom padding can be set: **Desktop −160 to 160px** (4px steps), **Mobile −80 to 80px** (4px steps).

{% hint style="success" icon="lightbulb" %}
**Tip:** to merge two sections seamlessly, set the upper section's bottom padding and the lower section's top padding both to **−160px**.
{% endhint %}

***

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Banners</strong></td><td>Hero banners, grids, galleries, scrolling layouts, and fullscreen product banners.</td><td><a href="/pages/U0IHyE3H3qtpE0qEv9FU">/pages/U0IHyE3H3qtpE0qEv9FU</a></td></tr><tr><td><strong>Call to Action</strong></td><td>Contact forms and newsletter signup sections.</td><td><a href="/pages/znzZjUVYUxVquQ9iYa4d">/pages/znzZjUVYUxVquQ9iYa4d</a></td></tr><tr><td><strong>Collections</strong></td><td>Collection grids, tabs, editorial cards, new arrivals, and related collections.</td><td><a href="/pages/X1UcF6tqVNKftaRGDauN">/pages/X1UcF6tqVNKftaRGDauN</a></td></tr><tr><td><strong>Content / Text</strong></td><td>Rich text, blog posts, FAQ tabs, events, and interactive link lists.</td><td><a href="/pages/SLxAoXabxjCTpsmP9r0t">/pages/SLxAoXabxjCTpsmP9r0t</a></td></tr><tr><td><strong>Layout</strong></td><td>Anchor links, custom HTML and Liquid, spacing, and dividers.</td><td><a href="/pages/SXX3qsWU7CXkolb4pOIH">/pages/SXX3qsWU7CXkolb4pOIH</a></td></tr><tr><td><strong>Media</strong></td><td>Image grids, comparison sliders, shoppable stories, video, and hotspot images.</td><td><a href="/pages/Nj6d5oksNDCYYi7xwNoc">/pages/Nj6d5oksNDCYYi7xwNoc</a></td></tr><tr><td><strong>Products</strong></td><td>Featured products, recommendations, and recently viewed items.</td><td><a href="/pages/0d0oLLabp6G6eXsPY4lN">/pages/0d0oLLabp6G6eXsPY4lN</a></td></tr><tr><td><strong>Trust &#x26; Social Proof</strong></td><td>USP bars, partner logo sliders, and customer testimonials.</td><td><a href="/pages/NBTv2VFpa2Srve9Yfeue">/pages/NBTv2VFpa2Srve9Yfeue</a></td></tr></tbody></table>

***

#### Still need help? Contact our support team.

{% embed url="<https://staylime.zendesk.com/hc/en-us/requests/new>" %}


---

# 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, and the optional `goal` query parameter:

```
GET https://staylime.com/docs/avante-themes/sections/overview.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.