> 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

Step-by-step checklist to set up your Avante store: branding, navigation layout, header and footer, homepage, product and collection pages, and final touches.

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** Turn the drawer on in **Theme Editor → Theme Settings → Cart**, then open **Theme Settings → Cart drawer** to enable cart upsell, notes, or a shipping estimate.

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 the product grid layout, the number of columns, and filtering in **Theme Editor → Default collection**.

**Product page** Configure the media gallery and the blocks of the buy area in **Theme Editor → Default product**:

* Pick a **Desktop gallery style** — a slider or a grid — and a **Desktop gallery size**
* Set **Mobile navigation** for the gallery: arrows, scrollbar or thumbnails
* Move reference material out of the buy area into **Collapsible tab** blocks or into the Product details section, so the Add to cart button stays near the top

{% hint style="info" %}
Variant pills, swatches and dropdowns are not configured on the product page. They live in **Theme Settings → Variant selector** and apply across the whole store.
{% endhint %}

See [Default collection](/docs/avante-themes/templates/default-collection.md) and [Default product](/docs/avante-themes/templates/default-product.md) 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** — Enter your profile URLs in **Theme Editor → Theme Settings → Social media**. The Footer and sidebar blocks only display the icons, so the links have to be filled in here first.
* **Back to top button** — Enable in the Footer Legal block or sidebar
* **Quick search** — Configure in **Theme Editor → Theme Settings → 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://staylime.com/docs/avante-themes/getting-started/avante-theme-setup-guide-where-to-start.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.