Website Themes

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

A theme is a ready set of colours, fonts and layout choices. The gallery shows the themes you can use. The default set contains Starter (Restaurant), Elegance (Fine Dining), Fresh Bites (Cafe), Urban Eats (Fast Food) and Coffee House (Cafe). Starter is active at the start. Only one theme is active at a time for a branch.

Activating a theme copies its settings into your website settings. Customizing lets you change those settings. The settings you save become your own version of that theme.

Step by step

Activate a theme

1. Open Website > Themes. Use the category buttons (All Themes, Restaurant, Fine Dining and so on) to narrow the list.
2. Click Activate on a theme card. The other themes of the branch are switched off.
3. The card shows an Active badge. The active theme also appears in the banner at the top.

Customize a theme

1. Click Customize on the active theme, or click the eye icon on any other card.
2. Pick a tab on the left, for example Logo & Branding.
3. Change the fields. The Live Preview on the right follows your colours, fonts and radius.
4. Click Save Changes. The button shows Saved!
5. If the theme is not active, click Activate in the same header to apply it.

Reset a theme

1. In the customizer click Reset and confirm.
2. The theme goes back to its default settings. If the theme is active, your website changes at once.

Careful

Saving settings of the active theme changes your live website. Saving settings of a theme that is not active changes nothing on the site until you activate it. Reset replaces every setting of the theme with its defaults, including logos and contact details.

What the storefront uses

The separate storefront reads these theme values: the logos, favicon and social share image; the site name and tagline; the eight colours; the heading and body font; the contact details; the social links; and the copyright text. It ignores the other fields, which apply only to the built-in website of on-premise installs. The table below marks each field.

Every setting explained

Gallery

Setting	What it does
Category buttons	Filter the cards by theme category: Restaurant, Fine Dining, Cafe, Fast Food.
Active theme banner	Shows the active theme with a Customize button.
Theme card	A colour preview, the theme name, category, version, three colour dots and a short description. A Premium badge marks premium themes.
Activate	Makes the theme the active one. Shown on themes that are not active.
Eye icon	Opens the customizer for a theme without activating it.
Customize	Opens the customizer for the active theme.

Customizer header

Setting	What it does
Back arrow	Returns to the gallery. Unsaved changes are lost.
Reset	Restores the default settings of this theme after you confirm.
Activate	Makes this theme active. Shown only when it is not active.
Save Changes	Stores the settings. They go live at once if the theme is active.

General

Setting	What it does
Site Name (storefront: yes)	Your restaurant name in the header, footer, page titles and sharing.
Tagline / Slogan (storefront: yes)	A short line under the name, used on the home page, blog page and footer.
Default Language	English, Arabic, Urdu, French, Spanish, German, Turkish, Chinese, Japanese or Korean. Stored for the built-in website.
Enable RTL (Right-to-Left)	For right-to-left languages. Built-in website only.
Enable Sticky Header	Keeps the header at the top while scrolling. On unless you turn it off. Built-in website only.
Show Page Preloader	Shows a loading animation. Built-in website only.
Copyright Text (storefront: yes)	The line at the bottom of the footer.

Logo & Branding

Each logo field takes a picture address or path, for example /uploads/logo.png. There is no upload button. A small preview and a remove button appear once a value is set.

Setting	What it does
Logo (Light)	Logo for dark backgrounds, 200 by 60 pixels recommended. Storefront: yes.
Logo (Dark)	Logo for light backgrounds, 200 by 60 pixels recommended. The storefront header uses this one first. Storefront: yes.
Favicon	32 by 32 or 64 by 64 PNG for browser tabs. Storefront: yes.
Footer Logo	Optional separate logo for the footer. Storefront: yes.
Admin Logo	Logo for the admin sidebar. Stored with the theme.
Default Social Share Image	Picture used when a page is shared, 1200 by 630 recommended. Storefront: yes.

Styles & Colors

Setting	What it does
Primary Color	Buttons, links and active states. Storefront: yes.
Secondary Color	Headers and dark accents. The storefront uses it for the hero area.
Accent Color	Success states, badges and calls to action. Storefront: yes.
Background Color	Page background. Storefront: yes.
Text Color	Main text colour. Storefront: yes.
Section Background	Cards and section background. Storefront: yes.
Header Background	Navigation header background. The storefront uses it for the dark hero area.
Footer Background	Footer background. Storefront: yes.
Global, Button, Card and Input Radius	Corner roundness from 0 to 24 pixels in steps of 2. Built-in website only.

Each colour has a colour box and a text box for the code, for example #F2561D.

Typography

Setting	What it does
Heading Font / Body Font	Inter, Poppins, Roboto, Open Sans, Lato, Montserrat, Playfair Display, Nunito, Raleway, Source Sans Pro, Merriweather or DM Sans, with a sample line. The storefront uses both choices and loads the font from Google Fonts when it does not ship it.
Base Font Size	14 to 18 pixels. Built-in website only.
Line Height	1.4 to 1.8. Built-in website only.

Layout

Setting	What it does
Header Style	The styles the theme offers, for example standard, centered, transparent.
Footer Style	For example four column, three column, minimal, centered.
Hero Style	Full width, split, slider or video background.
Content Width	Narrow (1024px), Standard (1200px), Wide (1400px) or Full Width.
Breadcrumb Style	Default, With Background Image, Minimal or Hidden.

All five layout options are for the built-in website. The storefront has its own fixed layout.

Contact Info and Social Links

Setting	What it does
Phone Number, Email Address, Address	Shown in the storefront footer and on the Contact page. When empty, the details of your main branch are used.
Secondary Phone	Stored with the theme.
Google Maps URL	The link behind the address on the Contact page. A map link made from the address is used when empty.
WhatsApp Number	Adds a WhatsApp contact on the Contact page and a WhatsApp link in the footer.
Business Hours Display	Free text, one line per day. Stored with the theme. The storefront shows the opening hours of your branches instead.
Facebook, Instagram, X (Twitter), TikTok, YouTube, LinkedIn, Pinterest	Profile addresses. Empty ones are hidden. The storefront footer and Contact page show them.
Snapchat, TripAdvisor, Yelp	Stored with the theme. The storefront does not show them.
Show social sharing buttons on blog posts / on product pages	Switches for the built-in website.

Blog, Ecommerce, SEO, Cookie Consent and Custom Code

These tabs configure the built-in website of on-premise installs. The storefront ignores them.

Setting	What it does
Blog: Blog Page Title, Blog Subtitle, Posts Per Page	Heading text and 6, 9, 12, 15, 18 or 24 posts per page.
Blog: Blog Layout, Sidebar Position, Single Post Template	grid, list or masonry; right, left or no sidebar; standard or full-width post.
Blog: Sidebar Widgets	Switches for Search, About / Author, Categories, Recent Posts, Popular Posts, Tags Cloud, Archive and Newsletter Signup. All are on by default.
Blog: Single Post Features	Switches for author box, related posts, reading time, reading progress bar, table of contents, social sharing and comments.
Blog: Social Sharing Platforms	Switches for Facebook, Twitter / X, LinkedIn, WhatsApp, Pinterest and Copy Link.
Ecommerce: Products Per Page	8, 12, 16, 20, 24 or 32.
Ecommerce: Product Card Style	default, compact or detailed.
Ecommerce: Currency Position	Before the price ($99) or after the price (99$).
Ecommerce: switches	Show Add to Cart on product cards, wishlist, product reviews and ratings, quick view popup.
SEO: Meta Title, Meta Description, Meta Keywords	Search engine texts with character counters (60 and 160).
SEO: Google Analytics ID, Google Site Verification, Facebook Pixel ID	Tracking and verification codes.
SEO: Enable XML Sitemap, Enable robots.txt	Switches, on by default.
Cookie Consent: Enable cookie consent banner	Shows a banner. When on, more fields appear: Cookie Message, Learn More URL, Button Text, Banner Position (Bottom Bar, Top Bar, Bottom Left Popup, Bottom Right Popup) and Background Color.
Custom Code: Custom CSS, Custom JavaScript (Head), Custom JavaScript (Footer)	Code added to every page of the built-in website.

Careful

Custom JavaScript runs on every page of the built-in website for every visitor. Add only code you trust. A mistake can break the whole site. Take the code out and save again to undo it.

Related articles

• Website Builder
• Website Widgets
• Blog
• Online storefront