Documentation Custom Branding Custom Branding Customize your storefront appearance — colors, fonts, layout, and more
Custom Branding Hayya lets you fully customize your storefront to match your brand identity. Every visual element — from colors and fonts to card shapes and spacing — can be tailored through the branding editor.
In the admin dashboard, go to Settings → Branding . The editor has six tabs:
Logo & Banner — Upload your logo and banner imagesColors — Brand colors and status colorsTypography — Font family, sizes, and weightsBorders & Spacing — Roundness, shadows, and layout densityBackground — Page background color, image, and overlayComponents — Fine-tune individual storefront areasA live preview on the side of the editor updates in real-time as you make changes.
Upload your restaurant logo (displayed in the sidebar and top bar of your storefront) Recommended: Square image, at least 200×200 pixels Accepted formats: JPG, PNG, WebP, GIF Max file size: 5MB Upload a banner or hero image (displayed at the top of your storefront) Recommended: Wide landscape image, at least 1200×400 pixels Same format and size limits as the logo Setting Used For Primary Buttons, main actions, add-to-cart button Secondary Secondary buttons, links Accent Badges, highlights, special offers Surface Card backgrounds, input backgrounds Text Main body text Text Muted Secondary text, descriptions Border Card borders, input borders, dividers
Setting Used For Success "Open" status, success badges Warning Warnings, offer highlights Error "Closed" status, error messages
To pick a color, either type a hex code (e.g., #E63946) or use the color picker.
Setting Default What It Does Font Family System default The font used across your storefront Font Size 16px Base size for body text Heading Weight Bold (700) How thick headings and prices appear Body Weight Normal (400) How thick descriptions appear
Setting What It Does Border Radius How rounded your buttons and inputs are Card Radius How rounded your product cards are Card Shadow The shadow beneath product cards Border Width How thick card and input borders are Spacing Scale Controls how compact or spacious your layout feels
The spacing scale gives you four options:
Compact (0.85) — Tighter layout, more items visibleNormal (1.0) — Standard spacingRelaxed (1.15) — A bit more breathing roomSpacious (1.3) — Lots of space between elementsYou can customize individual parts of your storefront:
Name color — Text color for product namesPrice color — Text color for pricesDescription color — Text color for descriptionsAdd button color — Background color for the add-to-cart buttonBorder radius — How rounded the card corners areShadow — Shadow beneath the cardActive pill — Background and text color for the selected categoryInactive pill — Background and text color for unselected categoriesBackground , border , and roundness of the search inputBackground and text color of the top navigation barCart button — Background, text color, and roundnessCart header — Background and text color of the cart panel headerCart item — Background color of individual cart itemsBackground and text color of the desktop sidebarBackground and title color of the category bannerBackground and overlay of the hero section at the top of your storefrontBackground image , size , and position for your pageThe branding editor has an interactive preview of your storefront:
Switch between mobile and desktop views using the toolbarClick "Edit" in the preview to enter branding modeHover over any element to see a label (e.g., "Product Card", "Cart")Click any element to jump directly to its settingsClick "Done" to clear the selection and show all settings againThis makes it easy to find and change exactly what you want.
Your branding changes are saved automatically when you click Save. Changes appear on your storefront immediately — customers will see the updated look on their next visit.
All branding settings work on both mobile and desktop Arabic and English layouts both respect your branding choices No design or coding experience needed — everything is done through the visual editor