Storefront Designer
Customise the visual appearance of your storefront — colours, fonts, logo, layout, and more.
Find it under Head Office → Website → Designer
Live Preview
As you adjust settings, a live preview of your storefront updates in real time on the right side of the screen. Changes are not visible to customers until you click Save Storefront.
On mobile devices, tap Preview Storefront to open the preview, then Close Preview when done.
Logo
Logo Image
Upload your brand logo. Click the image selector to upload a new image or choose an existing one from your media library. Supported formats: JPG, PNG.
Logo Width
Controls how wide the logo appears in the storefront header. Drag the slider to adjust the width in pixels. The preview updates in real time.
Colours
Background
| Setting | Description |
|---|---|
| Primary | The main background colour of the storefront. Defaults to white (#ffffff). Change to black (#000000) to enable darkmode |
| Secondary | Used for alternating or secondary surface areas (e.g. cards, panels). Automatically set to a light or dark variant when you change the primary background to white/black. |
Changing Primary will automatically update the Secondary colour to a suitable contrast value.
Brand
| Setting | Description |
|---|---|
| Primary | Your main brand colour, used for buttons and key UI elements. |
| Secondary | A complementary brand colour, typically used for accents or the logo background. |
Text
The colour used for body text across the storefront. Automatically defaults to black or white based on your background colour until yo set a colour manually.
Border
The colour used for dividers and borders. Automatically calculated as a blend of your background and text colours until you set a colour manually.
Typography
Upload custom fonts to use across your storefront. Only .ttf font files are supported.
Uploading a font
Click Upload, select a .ttf file, and the font will be uploaded and appear in your font list. The first font you upload will automatically be assigned to both Paragraph and Heading roles.
Assigning font roles
Each uploaded font can be assigned one of three roles:
| Role | Description |
|---|---|
| Paragraph | Used for body text, descriptions, and general content. |
| Heading | Used for product names, category titles, and section headers. |
| Both | Applies the same font to both paragraph and heading text. |
Click the relevant button on any font row to assign it. Only one font can be active per role at a time.
Deleting a font
Click the delete (trash) icon on a font row to remove it. If the deleted font was assigned to a role, that role will fall back to the system default font.
Style & Layout
Style
| Setting | Description |
|---|---|
| Border Radius | Controls how rounded corners appear on cards, buttons, and UI elements. Drag the slider from sharp (0px) to fully rounded. |
| Add Shadows | Adds a subtle drop shadow to product cards and panels. |
| Contain Images | Scales product images to fit within their container without cropping. |
| Colour Images | Applies a colour overlay tint to product images using your brand colour. |
| Colour Categories | Applies your brand colour to category labels and headers. |
| Uppercase Category Names | Displays all category names in uppercase text. |
| Uppercase Product Names | Displays all product names in uppercase text. |
Layout
| Setting | Description |
|---|---|
| Vertical Menu | Displays the category menu vertically on the side instead of horizontally across the top. |
| Placeholder Images | Shows a placeholder graphic for products that don't have an image. |
| Price Right of Name | Displays the product price to the right of the product name instead of below it. |
| 2 Column Mobile | Displays products in a 2-column grid on mobile devices instead of a single column. |
| 4 Column Desktop | Displays products in a 4-column grid on desktop instead of the default 3 columns. |
| Hide Product Description | Hides product descriptions in the menu listing view. |
| Collapse Unrequired Mod Groups | Collapses optional modifier groups by default in the product detail view. |
Background Images
Set full-screen background images for desktop and kiosk displays.
| Setting | Description |
|---|---|
| Desktop | Background image shown behind the storefront on desktop browsers. Recommended size: 1920×1080px. |
| Kiosk Landing Screen | Background image shown on the kiosk landing/idle screen. Recommended size: 1080×1920px. |
Images that don't match the required dimensions will not be accepted.
Saving
Click Save Storefront to apply your changes and make them visible to customers. A confirmation message will appear when the save is successful.
To view your live storefront at any time, click Open Storefront.
Note: If you have a skin this will override designer settings so will need to be removed before this will work!