# Design the hero and footer

Fill the band the homepage opens on, add the one call-to-action button in the store header, and set the colours at the foot of every page.

Three groups decide what a visitor sees at the very top and the very bottom of the store: the hero behind the homepage's opening band, the one button in the store header, and the footer under every page.

## Fill the hero background

![The Hero background card on the Theme screen, set to Gradient. A row of four choices reads Solid, Gradient, Texture and Image. Under Color stops, three rows each pair a colour swatch and hex value with a position slider reading 0%, 58% and 100%, with an Add stop button beneath. An Angle slider reads 128 degrees, and a wide gradient swatch labelled Preview sits at the foot of the card.](https://www.sorviai.com/help/storefront/theme/hero-background.png)

*Four ways to fill the band, and a preview of the one you chose.*

The four choices across the top of the card decide which fields the rest of it shows.

- **Solid**: One background colour, and nothing else to decide.
- **Gradient**: Two or more colour stops, each with its own position along the band, plus an angle for the direction it runs.
- **Texture**: One of the presets, tinted with a colour of your choosing.
- **Image**: An address pointing at a file you host.

- Go to **Theme** and scroll to **Hero background**.
- Choose **Solid**, **Gradient**, **Texture** or **Image**.
- For a gradient, set each stop's colour and position, and use **Add stop** for another.
- Set the **Angle** for the direction the gradient runs.
- Check the preview at the foot of the card, then select **Save**.

> **Note:**
>
> The card says so itself, and it is the thing most often got wrong: your primary and secondary colours are used for the hero's heading and description text, not for the background behind them. The background is whatever you set here.

> **Tip:**
>
> A gradient between your two brand colours, at a shallow angle, is the safest hero a store can have. It cannot clash with anything, it needs no file hosted anywhere, and it stays right when the brand changes.

## Add the header button and set the footer

![The Header button and Footer cards on the Theme screen. Header button explains it is an optional call to action shown next to Enquiry list in the store header, and holds Button label reading Trade account, Button link reading /pages/trade-accounts, and Button color and Text color each with a swatch, a hex value and a Default control. The Footer card holds a background and a text colour above a dark preview strip reading Powered by SorviAI with Products, Collections and Enquiry list along the right.](https://www.sorviai.com/help/storefront/theme/header-button-footer.png)

*The header button sits beside Enquiry list. The footer previews itself as you set it.*

The **Header button** is one call to action carried in the header of every page, next to **Enquiry list**. It appears only when both of its first two fields are filled in, so leaving either empty is how you hide it.

*The Header button and Footer groups on the Theme screen*

> **Warning:**
>
> Keep the two footer colours far enough apart to stay readable, and use the preview strip to check rather than judging from the swatches. The footer is where the legal wording and the contact details live, and it is the part of a site most often made illegible by a colour chosen for looks.