> 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/skeleton/getting-started/homepage.md).

# Setting up the homepage

Skeleton's homepage ships with four sections, top to bottom: an **Image banner** (your hero), a **Featured collection** (your product grid), an **Image autoscroll** (a moving carousel), and **Value props** (four little trust points). This guide sets up each one.

Open the editor first: **Online Store → Themes → Customize**. Make sure the page selector at the top of the editor says **Home page**.

## Step 1: The hero (Image banner)

This is the first thing visitors see, so give it your best photo.

1. In the left panel, click **Image banner**.
2. Click **Select image** and upload your hero shot.
   * 💡 Image advice: use a landscape photo at least **2000 px wide** (3000 px is better for large screens). Keep the subject away from the very edges — the image crops differently on phones.
   * Got a video instead? Use the **Video** setting — it takes priority over the image and plays muted on a loop, like a moving poster.
3. Set **Banner height**. The default 70 (that's 70% of the screen height) is a good start; 100 makes it full screen.
4. **Overlay opacity** darkens the image so text stays readable. Nudge it up if your text disappears into the photo.
5. Set **Text color** — usually white over a dark photo.
6. **Content alignment** and **Vertical position** control where the text block sits. Bottom-left is a classic streetwear look.

Now the text on top. The banner has three blocks — click each one under Image banner in the left panel:

* **Heading** — your brand name or drop name. Keep it short: one to three words hits hardest.
* **Text** — one line of supporting copy, like a tagline or "Limited drops. No restocks."
* **Buttons** — the call to action:
  1. Set **First button label** (e.g. "Shop now").
  2. Click **First button link → Collections** and pick the collection you want people to land on. You can also link to a single product or any page.
  3. **First button style**: **Solid** is black-on-white, **Accent** uses your accent color (the orange, unless you changed it). Accent pops harder.
  4. The second button is optional — leave its label empty to hide it.

## Step 2: Featured collection

Your main product grid.

1. Click **Featured collection** in the left panel.
2. Click **Select collection** and choose the collection to feature. If you haven't made collections yet, do that first under **Products → Collections** in the admin — even a simple "All products" collection works.
3. **Heading** — e.g. "New arrivals" or leave it empty for a cleaner look.
4. **Products to show** (2–12) and **Columns on desktop** (2–6): 8 products in 4 columns gives you two tidy rows.
5. **Columns on mobile**: 2 is the norm; 1 makes each product huge.
6. **Show view all link** adds a link to the full collection under the grid — keep it on if you show fewer products than the collection holds.

💡 The product photos here follow your global card settings (aspect ratio, hover image, quick view button). Set those once under **Theme settings → Product cards** — see [Theme settings](/sitesbyseth-docs/skeleton/theme-settings.md).

## Step 3: Image autoscroll

The slow-moving carousel. It has three modes (the **Mode** setting):

* **Images** — you upload each card yourself using Image blocks. Best for lookbook shots or category tiles.
* **Products** — pulls products automatically from a collection you pick. Zero upkeep.
* **Collections** — shows collection cover images from a list you choose.

To set it up in Images mode:

1. Click **Image autoscroll** in the left panel.
2. For each **Image** block: upload an **Image**, set the **Eyebrow** (the small label, e.g. "Collection"), the **Heading** (e.g. "Hoodies"), and a **Link** so clicking the card goes somewhere.
   * 💡 Image advice: portrait images around **800 × 1000 px** look great at the default 4:5 ratio.
3. Add more blocks with **Add block** — up to 12.

Useful settings, whatever the mode:

* **Auto-scroll** — on by default. Turn it off and arrows appear so visitors scroll manually.
* **Scroll duration** — time for one full loop. Higher = slower. 40s is calm; 15s is frantic.
* **Pause on hover** — leave on so people can actually read the cards.
* **3D lift on hover** — a subtle tilt effect on the cards. Taste call.
* **Card width**, **Image aspect ratio**, and **Gap between images** control the card sizes.
* Under **Hover text**: **Text color**, **Overlay opacity** (how dark the card gets on hover), and **Heading size**.

## Step 4: Value props

The row of four small icon + text points near the bottom.

1. Click **Value props** in the left panel.
2. For each **Value prop** block, set:
   * **Icon** — Truck, Returns, Lock, Globe, or Ruler.
   * **Title** — three words max, e.g. "Fast shipping".
   * **Text** — one short line, e.g. "Orders ship within 24 hours".
3. You can have up to 4 blocks. Delete any you don't need — three looks fine too.

⚠️ Only promise things you actually do. "14-day return window" is a legal statement, not decoration.

## Rearranging, adding, removing

* **Reorder** sections by dragging the ⠿ handle next to a section name in the left panel.
* **Add** a section with **Add section** at the bottom of the panel — Skeleton also includes Slideshow, Image with text, Rich text, Collection list, and Newsletter. Each has its own page under [Sections](/sitesbyseth-docs/skeleton/sections.md).
* **Remove** a section by clicking it, then **Remove section** at the bottom of its settings.

Click **Save** (top right) and you're done. Next: [the collection page](/sitesbyseth-docs/skeleton/getting-started/collection-page.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://sitesbyseth.gitbook.io/sitesbyseth-docs/skeleton/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.