Website Builder

Where: Website > Website Builder
Who can use it: Permission: website.manage_themes, settings.update or manage settings.
Open this page in SureTill

The home page of your customer website is built from blocks. A block is one section, for example the hero slider, the category row or the featured dishes. This page lets you switch blocks on or off, change their order and set a few options for each one. The hero slider takes its pictures from the Banners / Sliders tab.

Banners / Sliders: the window that opens.

The page has three tabs: Homepage Blocks, Banners / Sliders and Cache & Preview. The Save Changes button at the top saves the block list. Banners are saved on their own, from the banner form.

Cache & Preview: the window that opens.

Step by step

Change the order or visibility of home page blocks

1. Open Website > Website Builder. The Homepage Blocks tab is shown first.
2. Use the Cards or List switch to pick the view you prefer. Both views do the same thing.
3. Click the eye icon on a block to turn it on or off. A disabled block has a dashed border and is not shown to customers.
4. Click the up and down arrows on a block to move it. The number such as #3 is its position.
5. Click the gear icon to open the options of a block (see the table below).
6. Click Save Changes at the top. The button shows Saved! when the list is stored.

Add a hero banner

1. Open the Banners / Sliders tab and click Add Banner.
2. Click Upload and choose a picture, or paste the address of a picture. The picture is required.
3. Type a Title. The server requires it.
4. Optionally add a Description, a Link URL and the Button Text.
5. Leave Position on Homepage Hero (Top). This is the position the hero slider uses.
6. Set the Sort Order. The first banner is the one with the lowest number.
7. Optionally set a Start Date and an End Date. Outside those dates the banner is hidden.
8. Keep Active on and click Create.

Add Banner: the window that opens.

Edit or delete a banner

1. In the Banners / Sliders tab, find the banner. Use the position buttons at the top to filter the list.
2. Click the pencil icon to edit, change the fields and click Update.
3. Click the trash icon and confirm Delete to remove it.

Careful

Deleting a banner cannot be undone. A banner you only want to hide for a while should be set to inactive, or given an End Date, instead.

Tip

When you edit a banner you can paste a new picture address or choose a new file. Both replace the picture.

Reset the block list

1. Click Reset at the top and confirm.
2. The list returns to the default blocks and order. Nothing is stored until you click Save Changes.

Which blocks exist

These are the 14 blocks. The first nine are on by default, in the order shown. The last five are off by default and you can turn them on if you want them.

Block	What it shows	Layouts
Hero Slider	Large banner area with your banners, the order type and branch picker and a search box.	Full-width carousel; Split with text overlay
Category Bar	Your menu categories as quick links.	Horizontal scroll chips; Grid with images
Featured Products	Dishes you marked as Featured in the product settings.	Product grid
Special Offers	Your live offers and promotions.	Colorful cards; Compact list with copy
Popular Products	Dishes you marked as Popular.	Horizontal carousel; Ranked list
Why Choose Us	Four short trust points with icons.	Icon + text grid
Testimonials	Recent customer reviews.	Cards grid; Horizontal scroll
App Download / PWA	Links to download your app.	Full banner with mockup; Compact centered CTA
Newsletter Signup	An email box to join your mailing list.	Full-width gradient banner; Card style
Order Type Selector	Delivery or pickup choice (off by default).	Three-card row
Search Bar	A dish search box (off by default).	Standard search bar
Combo Deals	Combo meals and value deals (off by default).	Gradient cards grid
Reorder / Quick Order	Past favourites for returning customers (off by default).	Order history cards
Branch Locator	Branch cards with hours, phone and directions (off by default).	Card grid

Every setting explained

Page header and tabs

Setting	What it does
Preview	Opens the home page address of the site you are on in a new tab.
Reset	Puts the default block list back in the editor after you confirm. Not saved until you click Save Changes.
Save Changes	Stores the block list (the website setting homepage_blocks).
Homepage Blocks tab	The block list, the three counters (Total Blocks, Active, Disabled) and the Page Structure Preview.
Cards / List	Two views of the same block list.
Banners / Sliders tab	Create, edit and delete banners.
Cache & Preview tab	The Clear Website Cache button, links to open site pages and a short reference.
Page Structure Preview	A simple outline of the enabled blocks in order. The Desktop, Tablet and Mobile icons only change the width of the outline. Click a block name to open its options.

Block options (gear icon)

Setting	What it does
Layout Variant	Picks one of the layouts of the block. Shown only for blocks with more than one layout.
Section Title	The heading of the section. Available for Featured Products, Popular Products, Special Offers, Testimonials, Newsletter Signup and App Download.
Subtitle	The line under the heading. Available for Newsletter Signup and App Download.
Auto-play (Hero Slider)	Enabled or Disabled. When enabled the banners change by themselves.
Interval ms (Hero Slider)	Time between banners in milliseconds. The field accepts 1000 or more in steps of 500, default 5000. The storefront never goes below 3000.
Show Icons (Category Bar)	Yes or No.
Max Categories (Category Bar)	How many categories to show, 3 to 24, default 12.
Max Items (Featured, Popular)	How many dishes to show, 2 to 24. Default 8.
Columns (Featured Products)	2, 3, 4 or 5 columns. Default 4.
Max Offers (Special Offers)	How many offers to show, 1 to 12.
Max Reviews (Testimonials)	How many reviews to show, 2 to 12.
Download URL, App Store URL, Play Store URL (App Download)	Where the download buttons point.
Button Text (Newsletter)	The text on the subscribe button. Default is Subscribe.
Section Background	A background colour for the section. Use the colour box or type a colour code. Reset clears it.

Banner form

Setting	What it does
Banner Image (required)	Upload a picture (jpeg, png, jpg, gif or webp, up to 5 MB) or paste a picture address. The Create button stays disabled until there is a picture.
Title	The headline shown on the banner. Maximum 255 characters. Required by the server.
Description	A short text under the headline.
Link URL	Where the banner button goes. On the storefront the default is /menu.
Button Text	The label of the banner button, up to 100 characters. The storefront shows Order now when empty.
Position	Homepage Hero (Top), Homepage Middle, Menu Page or Checkout Page. The storefront hero slider uses Homepage Hero (Top) only. The other positions are stored but the storefront does not show them.
Sort Order	Lower numbers come first. A new banner starts at the number of banners you already have.
Start Date / End Date	The banner is shown only between these dates. Leave empty for no limit.
Active	Turn off to hide the banner without deleting it.
Position filter buttons	All, and one button per position with the number of banners in it.

Cache & Preview

Setting	What it does
Clear Website Cache	Removes the website data this browser has stored (entries that start with customer-store or website_config, and the chosen branch). It shows Cache Cleared! when done. It does not clear other people’s browsers and it does not clear the storefront.
Open Website Pages	Buttons for Homepage, Menu, Offers and Blog. They open those addresses on the same site as the admin.
Quick Reference	Reminders: banners for the hero, Featured on products for Featured Products, menus in the Menus page, colours and fonts in the Themes page.

Tip

The separate storefront shows 8 of the 14 blocks: Hero Slider, Category Bar, Featured Products, Special Offers, Popular Products, Testimonials, Newsletter Signup and App Download. It uses the section title, the max items, auto-play, interval and subtitle. It ignores the layout variant, columns, Show Icons, the button text and the section background. After the blocks it always adds one row per category with dishes. If the Hero Slider is off, it puts the order and branch bar at the top. The on-premise built-in website supports all 14 blocks.

Tip

The App Download block appears on the storefront once you fill at least one of the App Store or Play Store links. Check the live site after you save.

Tip

Storefront pages are kept in a short cache. After you save, wait a minute or two and reload the site to see the change.

Related articles

• Website Themes
• Website Menus
• Website Pages
• Online storefront