> 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/theme-settings/appearance.md).

# Appearance

{% hint style="info" %}
**Theme Editor → Theme settings → Appearance**
{% endhint %}

<figure><img src="/files/7veL1XJrrdsi3TcMVvpq" alt=""><figcaption></figcaption></figure>

### One layout setting, every page transformed

Most Shopify themes give you a header and that's it. Avante is built differently — with a full **Sidebar-based** layout option that opens up store structures you simply can't build with a conventional header-only theme. Whether you're running a brand with a story to tell, a multi-category catalog, or a high-fashion editorial experience, the right layout makes your store feel purpose-built.

***

### Navigation layout

| Option            | Description                                                                                                                                                                                    |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Header-based**  | Classic top navigation. Only the header is displayed — sidebars are disabled. Fast to set up, widely understood by shoppers. Pair with **Transparent header** for a cinematic full-bleed hero. |
| **Sidebar-based** | Moves the menu to the side, freeing the entire top area for brand content. Choose from 7 configurations. You can also add a header alongside the sidebar.                                      |

{% hint style="info" %}
The diagram below shows all available layout configurations — Header-based and the main Sidebar-based combinations.
{% endhint %}

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

***

### Sidebar setup

Available only when **Sidebar-based** navigation is selected.

Sidebar navigation creates layouts that look more like an editorial publication than a standard Shopify store. A secondary sidebar adds a second navigation layer — useful for stores with deep category structures or extra content like brand stories and lookbooks.

| Setting              | Description                                                                                                                                                           |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Sidebar template** | Select from 7 options: **Main XS**, **Main XS with secondary**, **Main S**, **Main S with secondary**, **Main M**, **Main M with secondary**, **Main L half screen**. |
| **Show header**      | Display a header above the sidebar.                                                                                                                                   |

{% hint style="info" %}
The example below shows **Main S with secondary** — a compact main sidebar on the left and a secondary sidebar on the right.
{% endhint %}

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

***

### Transparent header and sidebars

Make the header overlay the first section of the page instead of pushing it down — for a cinematic full-bleed hero effect.

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

| Setting                          | Description                                                                        |
| -------------------------------- | ---------------------------------------------------------------------------------- |
| **Allow transparent navigation** | Enables the transparent overlay effect. Must be combined with a supported section. |
| **Enable on mobile**             | Extends the transparent effect to mobile screens (v8).                             |

{% hint style="success" icon="sparkles" %}
**Supported sections:** Slideshow with media, Image banner, Video banner, Footer.
{% endhint %}

**Three steps are required** for transparent navigation to work:

{% stepper %}
{% step %}
Add a supported section (Slideshow, Image banner, or Video banner) to the **top** of your template
{% endstep %}

{% step %}
Open that section → enable **Overlap by navigation**

<figure><img src="/files/aXrsM59ZeUVxBfi2jeCU" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
If you use Sidebar-based navigation → open **Main sidebar** section in Theme Editor → scroll to **Colors** → set **Color scheme**.

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

{% hint style="warning" icon="triangle-exclamation" %}
The sidebar will have its own background and override the transparency effect if the **"Swap"** or **"Set"** settings are selected.
{% endhint %}

<figure><img src="/files/KKYttHvxnh74VaTMJvG8" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

{% hint style="success" icon="sparkles" %}
For a full guide including logo setup for transparent state, see [**Transparent header**](/docs/avante-themes/features-and-advanced-setup/transparent-header.md).
{% endhint %}

***

### Spacing & layout

The **White space** and **Max page width** settings define the breathing room of your store. Spacious layouts with wider max widths feel premium and editorial; compact layouts with tighter spacing feel efficient and product-focused.

<table data-search="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Remove side padding for media</strong></td><td>Lets images and videos go edge-to-edge while keeping text padding intact. Can be overridden per section (v13).</td></tr><tr><td><strong>White space</strong></td><td>Controls spacing between blocks. <strong>Spacious</strong> = larger gaps, <strong>Compact</strong> = tighter layout.</td></tr><tr><td><strong>Enable custom product grid gap</strong></td><td>Unlocks manual control of spacing between product cards in grid sections (v14).</td></tr><tr><td><strong>Column gap (desktop / mobile)</strong></td><td>Gap in pixels between product card columns. Available when custom grid gap is enabled.</td></tr><tr><td><strong>Show lines</strong></td><td>Displays divider lines between elements. Line color is inherited from the text color.</td></tr><tr><td><strong>Line width</strong></td><td>Line thickness from 1px to 4px.</td></tr><tr><td><strong>Line opacity</strong></td><td>Line opacity from 0% to 100%.</td></tr><tr><td><strong>Center text</strong></td><td>Aligns headings and content to center across all templates except navigation. Overridden by individual section/block alignment settings.</td></tr><tr><td><strong>Max page width</strong></td><td>Maximum width for page sections: 1200px, 1400px, 1700px, or Full-width.</td></tr><tr><td><strong>Include header and footer</strong></td><td>Applies the max page width to the header and footer as well.</td></tr><tr><td><strong>Prevent iOS zoom in input fields</strong></td><td>Disables auto-zoom for input fields on iOS, preventing layout shifts.</td></tr></tbody></table>

{% hint style="success" icon="sparkles" %}
**Pro tip:** Enable **Remove side padding for media** to let hero images and video banners run full-bleed edge-to-edge, while text and content blocks retain their comfortable side margins.
{% endhint %}

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


---

# 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/theme-settings/appearance.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.