> For the complete documentation index, see [llms.txt](https://sitesbyseth.gitbook.io/sitesbyseth-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sitesbyseth.gitbook.io/sitesbyseth-docs/reign/getting-started/homepage.md).

# Building Your Homepage

Reign ships with a homepage already assembled from its strongest sections. This guide walks you through filling each one in, top to bottom. Budget 30–45 minutes.

## What's on the default homepage

Open the theme editor (**Online Store** → **Themes** → **Customize**). With **Home page** selected in the top dropdown, the left sidebar shows:

1. **Header promo** — announcement bar ticker + countdown timer bar (lives above the header on every page)
2. **Header** — logo, menu, search, cart
3. **Slideshow** — your full-screen hero
4. **Featured collection** — a product grid from one collection
5. **Auto-scroll gallery** — a UGC/lookbook image strip that scrolls on its own
6. **Testimonials** — a review card carousel
7. **Store location map** — embedded map (delete if you're online-only)
8. **Image banner** — a closing brand statement with buttons
9. **Footer** — newsletter, menus, socials

You can add, remove, and reorder anything — this is just the starting lineup.

## Step 1: The announcement bar and countdown

The strip above your header is the **Header promo** section. It holds two block types:

* **Announcement bar** — up to 6 rotating or ticker-scrolling messages ("FREE SHIPPING OVER $100 ◆ NEW DROP LIVE")
* **Countdown timer bar** — counts down to your drop or sale end

1. In the sidebar, click **Header promo**
2. Click the **Announcement bar** block, enable the messages you want, and type your text (each message can link somewhere)
3. Choose **Display mode**: *Continuous ticker* (classic streetwear marquee) or *Static sliding* (one message at a time with arrows)
4. If you don't want the countdown yet, click the **eye icon** on the Countdown timer bar block to hide it

👉 Full settings: [Announcement bar & countdown](/sitesbyseth-docs/reign/sections/announcement-countdown.md)

## Step 2: The hero slideshow

1. Click **Slideshow** in the sidebar
2. Click the first **Slide** block → **Image** → upload your hero shot (2000px+ wide looks best). You can use a **video** instead — upload it under **Content** → **Files** first, then pick it in the slide's **Video** setting
3. Fill in the **Eyebrow** (small text above the heading — e.g. "SPRING '26"), **Heading**, **Subheading**, and **Button label/link**
4. Repeat for slide 2, or delete it if you want a single static hero
5. In the section settings, set **Height** (Large fills most of the screen), **Auto rotate**, and the **Slide transition** — *Fade through black* is very on-brand for Reign

💡 **Transparent header:** Reign's header can sit transparently over your hero. In the **Header** section, keep **Enable on home page** checked. For image-banner heroes, also turn on **Optimize for transparent header** inside the banner section. Upload an **Inverse logo** in Theme settings → Logo so your logo stays visible over dark imagery. Details: [Transparent header](/sitesbyseth-docs/reign/free-gift-tiers/transparent-header.md)

## Step 3: Featured collection

1. Click **Featured collection**
2. Click **Select collection** and pick your hero collection (new arrivals, best sellers, current drop)
3. Set **Product count** (default 4) and **Columns** (default 4)
4. Replace the placeholder heading `(collection name)` with your own — e.g. "THE LATEST DROP"
5. Optional: turn on **"View all" button** so shoppers can jump to the full collection

## Step 4: Auto-scroll gallery (UGC strip)

This is the endless-scrolling lookbook strip — perfect for fit pics and campaign shots.

1. Click **Auto-scroll gallery**
2. Each **Image** block is one photo — click each one and upload. Add more blocks with **⊕ Add Image** (portrait photos around 900×1200 look great)
3. Set the **Heading**/**Subheading** or turn **Show header** off for a pure image strip
4. The **icon row** under the header shows three trust points (Premium Quality / 10,000+ Customers / Free Shipping) — edit the text or toggle **Show icons** off

## Step 5: Testimonials

1. Click **Testimonials**
2. Each **Review** block has a star rating, location, review text, customer name, optional avatar photo, and date — replace the placeholders with real reviews
3. Update the header **Rating text** (e.g. "4.8 (1,637+) reviews") to match reality — don't invent numbers you can't back up

## Step 6: Store location map

Online-only brand? Click the section, then **Remove section** at the bottom of its settings. If you have a physical shop:

1. Enter your address in **Map location**
2. Edit **Address and hours** text
3. The map works without any API key; a Google Maps API key is optional for the official embed

## Step 7: Closing image banner

The last section before the footer — use it for a brand statement or a second CTA. Replace the placeholder heading/text and set both **Button** labels and links (leave a label blank to hide that button).

## Step 8: Footer

1. Click **Footer**
2. The **NEWSLETTER** signup is on by default — edit the description text ("Join the list — unlock exclusive drops…")
3. The **Footer menu** block pulls from your *footer* navigation menu — edit links under **Online Store** → **Navigation** in Shopify admin
4. Social icons appear automatically once you add your links in **Theme settings** → **Social media**

## Add more if you want

Click **⊕ Add section** anywhere to drop in more of Reign's sections — [Countdown timer](/sitesbyseth-docs/reign/sections/announcement-countdown.md), [Trust bar](/sitesbyseth-docs/reign/sections/trust-bar.md), [Product bundle](/sitesbyseth-docs/reign/sections/product-bundle.md), [FAQ accordion](/sitesbyseth-docs/reign/sections/faq-accordion.md), [Video](/sitesbyseth-docs/reign/sections/video.md), and more. Browse the full list in the [Sections index](/sitesbyseth-docs/reign/sections.md).

⚠️ Don't forget **Save**, then **Preview** on mobile — most of your traffic will be phones.


---

# 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://sitesbyseth.gitbook.io/sitesbyseth-docs/reign/getting-started/homepage.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.