Design & Branding

Design & Branding lets you customise the look, layout, and content of your storekit ordering page. You can use it to update your store’s images, colours, typography, buttons, menu layout, page content, notices, and other customer-facing design elements. Changes are shown in the preview as you make them, but they are not applied to your live ordering page until you click Save.

​

What you can customise

The Design & Branding sidebar is organised into three main sections:

---

​

Before you start

---

​

Access to Design & Branding features

Some Design & Branding sections are only available with storekit+. If a section is locked in your admin, your current plan may not include full access to Design & Branding. To unlock all Design & Branding options, you will need to upgrade to storekit+.

---

​

Branding

Branding settings control the visual identity of your ordering page. The Branding section includes:

• Images
• Typography
• Buttons
• Colours

---

​

Images

The Images section lets you update the main image assets used on your ordering page.

​

Image tips

• Use high-quality images that match your brand.
• Keep logos simple and easy to recognise.
• Use square images for logos and favicons.
• Use landscape images for header images.
• Avoid placing important text near the edge of header images, as images may crop differently on mobile.
• Always check mobile preview before saving.

---

​

Typography

The Typography section lets you adjust the text styling used across your ordering page. You can customise the typography for different text areas, such as headings, body text, buttons, and menu text. Each typography setting controls the font used, whether the text is capitalised, and the size scale.

​

Font

The font setting controls the typeface used for the selected text area. By default, the ordering page may use the system font. You can also upload a custom font file where supported.

​

Capitalisation

The capitalisation toggle lets you choose whether the selected text area uses standard capitalisation or uppercase styling. This can be useful for making headings, buttons, or menu labels stand out more clearly.

​

Size scale

The size scale lets you adjust the relative size of the selected text area. For example, reducing the size scale makes the selected text smaller, while increasing it makes the selected text larger. This is useful if headings, product names, descriptions, or buttons look too large or too small for your store design.

​

Typography tips

• Upload a WOFF2 font file if using a custom font.
• Choose text styles that are easy to read.
• Use capitalisation carefully, especially for longer text.
• Adjust the size scale if headings, menu items, or buttons look too large or too small.
• Check longer product names and descriptions before saving.
• Always check mobile preview before saving.

---

​

Buttons

The Buttons section lets you customise the appearance of customer-facing buttons across your ordering page. Buttons are used for important customer actions, such as adding items to the basket, viewing the basket, starting checkout, and placing an order.

​

Button tips

• Use colours that stand out clearly from the page background.
• Make sure button text is easy to read.
• Check important actions such as Add to basket, View basket, and checkout buttons.
• Avoid button colours that blend into the page.

---

​

Colours

The Colours section lets you customise the colour palette of your ordering page. Colour settings affect the general theme, backgrounds, text, accents, buttons, menu items, modifiers, and other customer-facing elements.

​

Presets

Presets let you quickly apply a predefined colour theme to your ordering page. This can be useful if you want to start from a ready-made style, such as a minimal theme, dark mode theme, or another preset palette, before making more detailed colour changes.

​

Show contrast warnings

The Show contrast warnings toggle highlights text and background colour pairs that may be difficult to read. When enabled, Design & Branding checks whether selected colour combinations meet WCAG AA contrast guidance.

​

Colour settings

​

Colour tips

• Start with a preset if you want a quick theme, then adjust individual colours as needed.
• Use your brand colours where possible.
• Use exact hex codes if you have brand guidelines.
• Turn on Show contrast warnings while editing.
• Make sure text remains readable against the background.
• Check buttons, basket, checkout, notices, modifiers, and product descriptions.
• Preview on mobile before saving.

---

​

Layout

Layout settings control how your ordering page is arranged and how customers browse your menu, basket, and header. The Layout section includes:

• Menu
• Menu items
• Basket
• Header style

---

​

Menu

The Menu section lets you customise how your menu is displayed to customers. You can choose the overall item layout, adjust how many columns are shown on desktop and mobile, control image sizing, choose the item direction, and decide how category navigation images appear.

​

Items layout

Items layout controls the overall structure used to display menu items.

​

Customise menu layout

The Customise options let you adjust the selected layout in more detail.

​

Item direction

Item direction controls how the image and text are arranged inside each menu item.

​

Category navigation images

Category navigation images control whether category images are shown in the menu navigation.

​

Menu tips

• Choose a layout that suits the size and style of your menu.
• Use list or compact layouts for simpler menus.
• Use card or grid layouts if your menu relies heavily on images.
• Keep mobile columns easy to browse. One column is usually clearer for longer item names or descriptions.
• Check products with long names, long descriptions, modifiers, and images before saving.
• Turn on the currency symbol if prices are unclear without it.
• If using category navigation images, make sure category images are clear and consistent.
• Preview both desktop and mobile before saving.

---

​

Menu items

The Menu items section lets you customise how individual products appear on your ordering page and how item details are shown when a customer opens an item. This includes item modal layout, modifier display, low stock display, allergen display, macro information, age gates, and how many lines of item text are shown.

​

Item modal

The item modal is the pop-up or item detail view customers see when they select a menu item.

​

Modal image style

​

Modal desktop view

​

Content position

​

Modifiers style

Modifier style controls how item options and modifier groups appear when customers customise an item.

​

Low stock display

Low stock display controls whether customers can see remaining inventory information for items with limited stock.

​

Allergen display

Allergen display controls how allergen information appears on menu items.

​

Macro calculator

Macro calculator controls whether nutritional macro information is shown to customers, where available.

​

Age gate

Age gate controls whether customers are asked to confirm their age before viewing or ordering certain items.

​

Menu item name line clamp

Menu item name line clamp controls how many lines of the item name are shown before the text is shortened. For example, setting this to 1 keeps item names to one line where possible. Increasing the number allows longer item names to show more fully.

​

Item description lines

Item description lines control how many lines of the item description are shown in the menu item preview. This can be useful if you want a cleaner menu layout or if descriptions are very long.

​

Menu item tips

• Check products with long names.
• Check products with long descriptions.
• Review items with modifiers or options.
• Check items with product images.
• Check allergen display where allergen information is used.
• Use low stock display only if inventory is accurate.
• Be careful with age gate settings and only use them where appropriate.
• Check the item modal on desktop and mobile before saving.
• Avoid layouts that make the menu feel too crowded on mobile.

---

​

Basket

The Basket section lets you customise how the customer’s basket appears during the ordering journey. Basket settings affect how customers review selected items, view prices, and continue to checkout.

​

Item images

Item images control whether product images are shown inside the basket.

​

Customise item images

The Customise option lets you fine-tune the basket image size.

​

Prices

Price display controls how pricing appears in the basket.

​

Auto-width checkout button

The Auto-width checkout button setting changes the checkout button width on mobile. When enabled, the checkout button uses a content-sized floating button instead of a full-width button on mobile.

​

Basket tips

• Use item images if they help customers recognise products quickly.
• Hide item images if the basket feels too crowded.
• Keep prices visible unless there is a specific reason to hide them.
• Check the basket with multiple items before saving.
• Check the basket with modifiers or item options.
• Review the checkout button on mobile.
• Make sure the checkout button is easy to see and tap.

---

​

Header style

The Header style section lets you customise the top section of your ordering page. The header is one of the first things customers see when they open your ordering page, so it has a strong impact on the overall look and feel of your store.

​

What you can customise

​

Header tips

• Check that your logo is clearly visible.
• Use a header image that works well on both desktop and mobile.
• Keep important image content centred.
• Avoid header images with text close to the edges.
• Check how the header looks after scrolling, especially if a sticky navigation bar is used.

---

​

Content

Content settings control additional information shown on your ordering page. The Content section includes:

• Description
• Notices
• Order status
• Custom sections

---

​

Description

The Description section lets you update the venue description shown on your ordering page. You can use the description to introduce your venue, explain your cuisine, or provide useful ordering information.

​

Description tips

• Keep the description clear and concise.
• Use customer-friendly wording.
• Avoid long paragraphs.
• Do not include information that may quickly become outdated unless you plan to maintain it.
• Check how the description appears on mobile.

​

Example uses

You can use the description for:

• A short venue introduction
• Cuisine type
• Ordering instructions
• Brand messaging
• Useful service information

---

​

Notices

The Notices section lets you add customer-facing messages to your ordering page. Notices can be used for important updates, service information, or messages customers should see before ordering.

​

Menu notice

The Menu notice is shown at the bottom of your menu. It is typically used for information such as allergen, calorie, or service charge notices.

​

Closed message

The Closed message is displayed when your store is closed or snoozed. This lets you customise the message customers see when ordering is not currently available.

​

Formatting and links

Both notices support basic formatting options:

• Bold
• Italic
• Underline
• Hyperlinks

Hyperlinks can be useful for linking to extra information, such as allergen guidance, terms, or another customer-facing page.

​

Notice tips

• Keep notices short and clear.
• Use the menu notice for information related to the menu, such as allergens, calories, or service charges.
• Use the closed message to explain why ordering is unavailable or when customers should try again.
• Remove or update temporary notices when they are no longer relevant.
• Check that notices do not conflict with your opening hours, menu, or service settings.
• Preview notices on mobile before saving.

---

​

Order status

The Order status section lets you customise whether a map is shown on the customer’s order status page. This can help customers understand location or delivery-related information after placing an order.

​

Map visibility

Map visibility controls whether the map is shown or hidden on the order status page.

​

Map

The map settings let you customise how the map appears.

​

Order status tips

• Use Visible if the map helps customers understand location or delivery information.
• Use Hidden if the map is not needed for your ordering flow.
• Check the order status page after saving, where possible.
• Make sure any map marker or location shown is accurate.

---

​

Custom sections

The Custom sections area lets you add extra content blocks to your ordering page. Custom sections can be used to highlight promotions, add visual content, share venue information, or include additional customer-facing messages that do not fit into the standard description or notices.

​

Add a section

You can choose from several section templates:

---

​

Editing custom sections

After adding a section, you can edit the content and design from the custom section editor. Available controls may include:

---

​

Hero

The Hero section adds a large visual banner to the ordering page. It is useful for introducing your venue, showing a strong brand image, or highlighting a key message near the menu. Common uses include:

• Welcome messages
• Brand introductions
• Seasonal campaigns
• Featured imagery
• High-impact visual content

​

Hero tips

• Use a high-quality landscape image.
• Keep important image content centred.
• Use short, clear headline text.
• Check that text remains readable over the image.
• Use an overlay if the background image makes the text hard to read.
• Check both desktop and mobile preview before saving.

---

​

Call to action

The Call to action section is designed to encourage customers to take a specific action. It usually includes a short message and a link or button-style prompt, such as ordering now or viewing a menu. Common uses include:

• Encouraging customers to order
• Promoting delivery or collection
• Linking to a specific page
• Highlighting a campaign
• Directing customers to another service

​

Call to action tips

• Keep the message short and direct.
• Make the action clear.
• Use a link if customers need to go somewhere else.
• Check that the call-to-action text is easy to read.
• Make sure the section looks good on mobile.

---

​

Info card

The Info card section is useful for simple informational content. It can be used to show details customers may need before ordering. Common uses include:

• Opening hours
• Delivery information
• Collection instructions
• Service availability
• Location notes
• Contact information

​

Info card tips

• Keep the information concise.
• Avoid adding too much text.
• Make sure the details match your store settings.
• Update the card if the information changes.
• Check the mobile preview before saving.

---

​

Announcement

The Announcement section adds a highlighted message to the ordering page. It is useful for promotions, temporary updates, or important messages that should stand out. Common uses include:

• Limited-time offers
• Free delivery promotions
• Service updates
• Holiday messages
• Temporary changes
• Important reminders

​

Announcement tips

• Keep announcements short.
• Remove or update temporary announcements when they are no longer relevant.
• Make sure promotional details are accurate.
• Check that the announcement does not conflict with notices, menu settings, or service settings.
• Use readable colours with strong contrast.

---

​

About us

The About us section lets you share more about your venue, brand, food, or story. It is useful for adding personality to your ordering page and helping customers understand what makes your venue unique. Common uses include:

• Venue story
• Brand message
• Food philosophy
• Local sourcing information
• Community message
• Restaurant background

​

About us tips

• Keep the copy customer-friendly.
• Avoid long paragraphs.
• Use a strong image that reflects your venue.
• Make sure the text remains readable over the background.
• Check the section on mobile before saving.

---

​

Custom section tips

• Use custom sections to support the ordering experience, not distract from it.
• Keep content short and relevant.
• Avoid adding too many sections.
• Use high-quality images.
• Check text contrast over images.
• Make sure hyperlinks work before saving.
• Review the full ordering page on mobile before saving.

---

​

Best practices

​

Start with presets, then customise

For colours, start with a preset if you want a quick theme, then adjust individual colour fields manually. Turn on Show contrast warnings while editing so you can check whether text and background colour combinations are easy to read.

​

Check interactive elements

Before saving, check important customer actions such as:

• Add to basket
• Modifier selection
• Selected modifier cards
• View basket
• Checkout
• Order status page
• Custom section links

​

Check restricted or sensitive content

If you use age gates, allergen display, low stock display, or macro information, make sure the information is accurate before saving. Pay close attention to:

• Allergen labels
• Inventory levels
• Age-gated items
• Nutritional or macro information
• Price visibility in the basket

​

Keep custom sections focused

Custom sections should support the ordering experience. Use them for useful customer-facing information such as:

• Promotions
• Opening hours
• Delivery or collection information
• Venue story
• Allergen or service information
• Calls to action

Avoid adding too many sections, as this can make the menu harder to browse.

​

Check mobile preview

Most customers order from mobile devices, so always check mobile preview before saving. Pay close attention to:

• Header image cropping
• Logo visibility
• Menu layout
• Menu item cards
• Item modals
• Modifier selection
• Basket visibility
• Checkout button layout
• Button readability
• Notices
• Custom sections
• Order status map, where used

​

Use clear images

For best results:

• Use square images for logos and favicons.
• Use landscape images for headers.
• Keep important image content centred.
• Avoid text-heavy images.
• Avoid uploading images that are blurry or low quality.

​

Keep text concise

Long text can make your ordering page harder to use, especially on mobile. Try to keep the following short and clear:

• Store descriptions
• Notices
• Custom sections
• Product descriptions

​

Prioritise readability

When choosing fonts and colours, make sure customers can easily read:

• Product names
• Product descriptions
• Prices
• Notices
• Basket totals
• Checkout buttons

​

Keep the ordering journey clear

Design changes should make ordering easier, not harder. Before saving, check that customers can easily:

• Browse the menu
• Understand product options
• Add items to the basket
• View their basket
• Continue to checkout
• Place an order

---

​

Troubleshooting

​

A section is locked or unavailable

Some Design & Branding sections are only available with storekit+. If a section is locked in your admin, contact storekit Support to add this feature to your account. A storekit+ subscription is required.

​

My text is hard to read over an image

If text is difficult to read over a header image, hero section, or custom section image, try:

• Using a darker or lighter overlay
• Changing the text colour
• Choosing a simpler image
• Keeping important text away from busy areas of the image
• Checking the section on mobile

​

My menu looks crowded on mobile

If the menu feels too crowded, check:

• Mobile columns
• Image size
• Item direction
• Large images
• Item description lines
• Menu item name line clamp
• Category navigation images

Using fewer columns, smaller images, or shorter description previews can make the menu easier to browse.

​

My item modal looks too large or difficult to use

Check:

• Modal image style
• Modal desktop view
• Content position
• Modifier style
• Modal border
• Item image size
• Mobile preview

Open a few products with modifiers before saving.

​

Modifier options are hard to understand

Check the selected modifier style. If modifier options are difficult to scan, try a simpler layout or make sure modifier names and images are clear.

​

Low stock or inventory information looks wrong

Low stock and inventory display should only be used if inventory levels are accurate and actively maintained. If the numbers look wrong, check the item inventory settings before changing the display style.

​

Allergen information is missing or unclear

The allergen display controls how allergen information appears, but the allergen details themselves may need to be managed in the relevant menu item settings. Check that allergen information is accurate before relying on the display.

​

The basket does not show prices as expected

Check the Prices setting in the Basket section. Basket prices can be set to:

• Show all
• Hide basket total
• Hide all

Be careful when hiding prices, as customers should clearly understand their order cost before checkout.

​

My custom section link does not work

Check that the hyperlink is correct and customer-facing. Make sure the link includes the full URL where needed, then save and test it on the live ordering page.

​

The order status map is not showing

Check:

• Map visibility is set to Visible
• The order status page supports the map for your store setup
• The map marker or location has been configured correctly

​

My changes appear in preview but not on the live ordering page

Make sure you clicked Save. The preview updates as you make changes, but your live ordering page will not update until the changes are saved. After saving, refresh your live ordering page and check that you are viewing the correct store.

​

My image looks cropped

Some images, especially header images, automatically crop to fit different screen sizes. Check the mobile preview and use an image where the most important content is centred.

​

My logo or favicon looks distorted

Use a square image for logos and favicons. Transparent PNG files usually work best for logos.

​

My colours are hard to read

Check the contrast between your text, background, and buttons. Customers should be able to clearly read:

• Product names
• Product descriptions
• Prices
• Notices
• Basket totals
• Checkout buttons

​

My buttons do not stand out

Button colours should be clearly visible against the page background. Check important customer actions such as:

• Add to basket
• View basket
• Checkout
• Place order

​

The mobile version does not look right

Switch to mobile preview and check:

• Header image cropping
• Logo visibility
• Menu category navigation
• Product card layout
• Basket visibility
• Button readability
• Notices and custom sections

​

My notice is no longer relevant

If a notice was added for a temporary update, remember to remove or update it once it no longer applies. Examples include:

• Holiday opening updates
• Delivery delay notices
• Temporary closure notices
• Collection-only notices
• Kitchen issue notices

​

My page feels too cluttered

Too much content can make the ordering page harder to use. Check whether you can shorten or remove:

• Long descriptions
• Multiple notices
• Too many custom sections
• Text-heavy images
• Repeated information

---

​

When to contact storekit Support

Contact storekit Support if:

• A setting does not save.
• The live page does not update after saving.
• A Design & Branding section is locked and you want to enable it.
• You want to add a feature that requires storekit+.
• You cannot find the design option you need.
• An image or colour is not displaying correctly.
• Text or buttons remain difficult to read after editing.
• Your ordering page looks broken after making changes.
• A custom section does not display as expected.
• A hyperlink in a notice or custom section does not work.
• The order status map does not appear as expected.
• You need help customising a design element that is not available in Design & Branding.