Skip to the article

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.
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.
  1. Go to Theme and scroll to Hero background.

  2. Choose Solid, Gradient, Texture or Image.

  3. For a gradient, set each stop's colour and position, and use Add stop for another.

  4. Set the Angle for the direction the gradient runs.

  5. Check the preview at the foot of the card, then select Save.

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.
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
FieldWhat it does
Button labelRequiredThe words on the button, such as Trade account.
Button linkRequiredWhere it goes. An internal path such as /pages/trade-accounts, or a full address.
Button colorThe background. Select Default, or leave it empty, to use your brand colour.
Text colorThe words on the button. Default uses the matching brand tone.
Background colorThe footer's own background, under every page.
Text color (Footer)The footer's wording, previewed on the strip underneath.

Was this document helpful?