> 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/getting-started/avante-theme-setup-guide-where-to-start.md).

# Avante theme setup guide — where to start

A step-by-step checklist for setting up your Avante store from scratch — branding, navigation, pages, and final touches.

{% hint style="info" %}
**Tip:** Before you start customizing, duplicate your theme and work on the copy. See [How to use the Shopify theme editor](/docs/theme-editor/how-to-use-the-shopify-theme-editor.md) for details.
{% endhint %}

***

### Step 1: Set up your branding

Start here — branding affects every page of your store.

**Replace your logo** Go to **Theme Editor → Header** (or Main sidebar / Mobile header) and upload your logo. Replace it in all header sections where it appears.

**Set your colors** Go to **Theme Editor → Theme Settings → Colors**. Set your accent color first — it's used for buttons, links, and highlights across the whole theme.

See [Colors](/docs/avante-themes/theme-settings/colors.md) for the full settings reference.

**Choose your fonts** Go to **Theme Editor → Theme Settings → Typography**. Use one of the 8 built-in presets as a starting point, then adjust accent and base fonts to match your brand.

{% hint style="info" %}
**Tip:** For the base font, use Regular or Medium weight. Save decorative fonts for accent only.
{% endhint %}

See [Typography](/docs/avante-themes/theme-settings/typography.md) for the full settings reference.

***

### Step 2: Choose your navigation layout

Avante supports two navigation layouts — choose based on your store's structure.

Go to **Theme Editor → Theme Settings → Appearance → Navigation layout**:

| Layout            | Best for                                         |
| ----------------- | ------------------------------------------------ |
| **Header-based**  | Standard stores with top navigation              |
| **Sidebar-based** | Stores with many categories, fashion & lifestyle |

Sidebar-based gives you 7 combinations of two sidebars with different main sidebar sizes.

See [Appearance](/docs/avante-themes/theme-settings/appearance.md) for the full settings.

***

### Step 3: Configure your header and footer

**Header** Go to **Theme Editor → Header**. Adjust block alignment, add blocks (search, cart, account), and configure the mega menu if needed.

See [Header](/docs/avante-themes/global-sections/header-and-navigation.md) for the full guide.

**Footer** Go to **Theme Editor → Footer**. Choose between 3-column layouts, add menu blocks, social links, and newsletter signup.

**Cart drawer** Go to **Theme Editor → Cart drawer**. Enable cart upsell, notes, or shipping estimate as needed.

See [Footer](/docs/avante-themes/global-sections/footer-group.md) and [Cart drawer](/docs/avante-themes/global-sections/header-and-navigation/cart-drawer.md) for details.

***

### Step 4: Customize your homepage

Go to **Theme Editor → Home page** and build your homepage layout:

* Edit or replace the default sections
* Add new sections with **Add section**
* Reorder by clicking and holding a section, then dragging up or down
* Hide sections you don't need yet (eye icon) instead of deleting them

***

### Step 5: Set up your product and collection pages

**Collection page** Configure product grid layout, number of columns, and custom filters in **Theme Editor → Default collection**.

**Product page** Configure gallery style, variant display, and product details in **Theme Editor → Default product**:

* Choose gallery style (standard or full-width) based on your product image format
* Set variant layout (pills, swatches, or dropdowns)
* Enable collapsible tabs for product details and specifications

See [Collection page](broken://pages/yqdZZ7prKXZeNnObuJiP) and [Product page](broken://pages/qcw2P0sxjGefyCmRp0c1) for full guides.

***

### Step 6: Fine-tune the look and feel

Once the main structure is in place, adjust the visual details:

**Shapes** — Go to **Theme Editor → Theme Settings → Shapes** to set corner radius for buttons, inputs, and images. Rounder = casual, square = strict.

**Appearance** — Adjust white space, max page width, and divider lines in **Theme Editor → Theme Settings → Appearance**.

**Animation** — Go to **Theme Editor → Theme Settings → Animation**. Choose Smooth for a premium feel, Basic for a faster, utilitarian style.

***

### Step 7: Final touches

Before publishing, check these settings:

* **Favicon** — Upload in **Theme Editor → Theme Settings → Favicon**
* **Cart icon** — Choose between Cart / Basket / Bag in **Theme Editor → Theme Settings → Cart** based on your product type and region
* **Social media links** — Add in **Theme Editor → Footer** or sidebar blocks
* **Back to top button** — Enable in the Footer Legal block or sidebar
* **Quick search** — Configure in **Theme Editor → Quick search**

***

### Related

* [Install & activate Avante](/docs/avante-themes/getting-started/install-and-activate-avante.md)
* [How to use the Shopify theme editor](/docs/theme-editor/how-to-use-the-shopify-theme-editor.md)
* [How to update your Shopify theme](/docs/theme-management/how-to-update-your-shopify-theme.md)


---

# 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/getting-started/avante-theme-setup-guide-where-to-start.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.