Skip to content
Language: English

Your home page

Build the homepage out of blocks — add a block, pick its style, set its colours, put the blocks in order, and change the big banner pictures at the top.

What a section is#

Your homepage is not one big picture. It is a stack of strips laid one under the other — a strip of banners at the top, then a row of products, then your categories, then a few short promises. Each strip is called a section. You add them, style them, and drag them into whatever order you like.

Sections are reached through the Pages screen, because every page of your website is built the same way.

SidebarDesignPagesHomeBuild sections
The Home — Sections screen: a list of section cards, each with up and down arrows, a pencil and a bin.
The order on this list is the order on your website, top to bottom.

Adding a section#

  1. On the Home — Sections screen, press Add Section at the top right.
  2. A screen headed Add section opens, split in two. The left side is the Section library — the kinds of block you can add. The right side is the form you fill in.
  3. Click a block in the library — Products, for example. The form on the right changes to ask for what that block needs.
  4. Fill in the Title. This is the heading customers read above the block, like "New arrivals". The Description (optional) is a smaller line under it.
  5. Fill in the rest of the Content card, then look at the Design card underneath to choose how it looks.
  6. Press Create section at the bottom. A green message says the section was created and you land back on the sections list.
  7. Now open your website in another tab and refresh it. The new strip should be there.
Home — SectionsAdd SectionSection libraryContentDesignCreate section
The kind of block cannot be changed after you create it. If you picked Products and meant Blog, do not hunt for a way to switch — delete that section and add a new one. On the edit screen it says so plainly: type can't change after creating.

The kinds of block in the library#

The Section library panel, showing small picture tiles for Hero banners, Products, Blog, Highlights, Categories and more.
BlockWhat it puts on the page
Hero bannersYour big top pictures. The pictures come from Home Banners; here you only pick their design.
ProductsA row or grid of things you sell.
BlogYour latest articles.
HighlightsShort promises with a small icon — free delivery, easy returns, and so on.
CategoriesYour product groups shown as cards to browse by.
HeroA heading, an image and a button — good at the top of an About page.
Rich textPlain paragraphs of writing.
Text + ImageWriting beside a picture. You choose which side the picture sits on.
Contact formA Name / Email / Phone / Message form visitors can fill in.
MapAn embedded Google map of your shop.
TeamPhotos, names and roles of your people.
FAQQuestions and answers customers keep asking.
TestimonialsWhat customers said about you, with a star rating.
StatsBig numbers with a label — "10k+ happy customers".
Call to actionOne headline and one button, to push people somewhere.
Feature slidesDark slides with a round picture that change on their own.
A Products block does not need you to pick products by hand. Under Product source choose Newest, On sale or Category and it fills itself and keeps itself current. Pick only means you choose each one yourself.
A Categories block takes the names and pictures from Products → Categories. One design behaves differently from the rest: Category strip lists every category, while the others leave out any category that has nothing in it yet.

Choosing the design — the Change button#

In the Design card you will see a small box with a picture, the name of the design you are using now, and a button that says Change. That one button is how every design in this dashboard is chosen — it works the same way on every screen.

  1. Press Change. A window opens showing one design at a time, big enough to judge.
  2. Use the arrows on the left and right to move through them. The dots underneath tell you how many there are.
  3. The one your shop is using now has a Current tag on it.
  4. Click the design you want. The window closes and the small box now shows your new choice.
  5. Press Create section or Update section at the bottom to save it.
The design chooser window: one large design preview, arrows on both sides, dots underneath, and a Current tag.
If a design has a Premium tag and a price on it, it is one your provider looks after. Clicking it does nothing; the button underneath says Request this design instead. Press that and your provider is told.

Layout, width and columns#

Under the design chooser sit the controls that decide how much of the screen the block takes and how many things fit in a row.

  • Layout — Grid lays the items out in neat rows. Slider puts them on a track the customer swipes sideways. Grid shows more at once; a slider saves height.
  • Section width — Normal keeps it inside the page margins, Fluid stretches it wider, Full runs it edge to edge.
  • Text alignment — whether the heading sits on the left, in the middle, or at the end.
  • Columns — Desktop and Columns — Mobile — how many items sit side by side on a computer, and how many on a phone. Two are separate settings for a good reason.
Four columns on a computer is comfortable; on a phone two is usually the most that stays readable. Set the phone number lower than the desktop one and check on your own phone.

Colours for one section#

Near the bottom of the Design card is Color scheme. This colours only this one strip of the page — nothing else moves.

  • Light — the ordinary pale band. This is what most sections should be.
  • Dark — a ready-made dark band, useful for making one section stand out from the ones above and below it.
  • Custom — you choose each colour yourself: Background, Heading, Text, Price / accent and Tabs.
These colours belong to this section alone. They are not your shop's colours. If you want to change the colour of the whole website — the top strip, the header, the buttons — that is Theme & Colors, not here.
With Custom, check that the text can still be read on the background you picked. Dark grey writing on a dark blue band looks fine to nobody. Save it, then go and look on your real website.

The "View all" button#

A Products or Blog section can carry a button under it that takes the customer to the full list. Two boxes control it.

  • "View all" button text — what the button says. Write whatever you like: "See everything", "Shop all shirts".
  • "View all" button link — where it goes. Leave it empty and it goes to your shop page for products, or your blog page for articles.

Putting the sections in order#

  1. On the Home — Sections list, use the up and down arrows on the right of each section to move it.
  2. As soon as you move one, two new buttons appear at the top: Save Order and Cancel.
  3. Press Save Order. A green message says the order was saved.
Moving the arrows alone changes nothing on your website. Until you press Save Order the new order lives only on your screen, and Cancel throws it away.

A sensible order for a homepage

Banners at the top, then your categories so people can find their way, then a row of products, then your short promises, then anything else. Put the thing you most want sold nearest the top — most visitors never reach the bottom.

Removing a section#

  1. Press the red bin button on the right of the section.
  2. A box asks you to confirm and names the section, so you can check you picked the right one.
  3. Confirm. The section is gone from the list.
A deleted section disappears from your website straight away, and there is no Recycle bin for sections. Your products and blog posts are not touched — only the strip that was showing them. If you only want it gone for a while, drag it to the bottom instead.

Home Banners — the big pictures at the top#

The big pictures across the top of your homepage are called banners. If there is more than one, they change one after the other on their own — that is what a slider is. The pictures and their words are set on their own screen.

SidebarDesignHome BannersAdd banner
  1. Press Add banner. A form opens headed New banner.
  2. Under Pictures, upload your wide picture into Desktop picture (required).
  3. Upload a taller picture into Phone picture (optional). This is worth the trouble — see the warning below.
  4. Fill in Heading — the big words on the picture. Subheading is the smaller line under it, and Caption a smaller line still.
  5. In Button text write what the button should say ("Shop now"), and in Button link where it should go ("/products").
  6. Whole-banner link makes the entire picture clickable. Leave it empty and clicking the picture takes people to your products page.
  7. Set Text position (Left, Center or Right) and Text colour (Dark text for light pictures, Light text for dark ones).
  8. Drag Overlay until the words are easy to read. It lays a thin shade over the picture.
  9. Look at the Preview and press Phone to see how it sits on a phone.
  10. Press Create banner. A green message says the banner was created.
The banner editor: two upload boxes for desktop and phone pictures, text fields, and a preview with Desktop and Phone buttons.
Set the phone picture. A wide banner squeezed onto a phone loses its middle, and the middle is usually where the product is. If you leave it empty, phones fall back to the wide picture and it may look cut off.
You can change a banner later with the pencil button, move it up or down with the arrows (the order is the order they appear in), and remove it with the red bin. The small grey chips on each row tell you at a glance whether a phone picture is set.

This trips people up, so it is worth being clear. The Home Banners screen holds the pictures and their words. It does not hold their design. The design — whether the banner is a full picture, split with text beside the product, boxed, minimal or a text card — is chosen in the Hero banners section on your Home page.

DesignPagesHomeBuild sectionsHero bannersDesignChange

In that same place you also set Slider — how visitors move from one banner to the next: dots below, dots on the right, or a fade with arrows.

If your homepage has no Hero banners section at all, your banners may still show at the top in their old plain form. Adding the section is how you get to choose their design.