Colours
Edit the site's colour palette. Changes apply across all sections instantly on save.
Typography
Choose display and body typefaces. Uses Google Fonts — type a font name exactly as it appears on fonts.google.com.
Suggested pairings: Cormorant Garamond + DM Sans · Playfair Display + Inter · EB Garamond + Lato · Libre Baskerville + Source Sans Pro
Hero Section
Edit the full-screen hero: background image, brand name, tagline and banner text.
JPG, PNG, WEBP — max 5MB
Requires Supabase Storage to be enabled
Paste any image URL, or upload directly. Use Unsplash for free food photography. Recommended: 1600×900px minimum.
About Section
Edit the About text, photo, and location details.
JPG, PNG, WEBP — max 5MB
Services
Edit the three service cards — image, category label, name, and description.
Pricing
Edit the four pricing cards. Prices are shown as "From £X per person".
Dish Gallery
Add, remove, or edit the dish photos. Each card shows in the gallery lightbox.
Instagram Posts
Edit the six Instagram-style post cards. Each links to your profile.
Note: Instagram blocks live feed embeds on third-party sites. These cards visually replicate posts and link to @nella.catering. To change your Instagram handle site-wide, update it in Contact Info.
Contact Info
These details appear in the enquiry section, footer, and Instagram cards.
SEO & Meta
Control how the site appears in search results and when shared on social media.
Section Visibility
Toggle sections on or off. Hidden sections are removed from the live site.
Availability
Mark dates as booked so they appear greyed out on the public-facing calendar. Clients cannot request date holds on booked dates.
Add dates that are already booked or unavailable. These will show as blocked on the site calendar. Format: YYYY-MM-DD (e.g. 2026-08-15)
Google Analytics
Add your GA4 Measurement ID to track visitors, page views, and traffic sources on the live site.
How to get your Measurement ID: Go to analytics.google.com → Admin → Data Streams → your stream → copy the Measurement ID (starts with G-)
Review Inbox
Reviews submitted on the site appear here for approval before going live. Approve to publish, reject to discard.
How it works: When a visitor submits a review on the site, it saves to Supabase with status "pending". You approve or reject it here. Approved reviews go live on the site automatically — no rebuild needed. Requires Supabase to be configured.
Instagram Live Feed
Connect the Meta Graph API to pull your real Instagram posts automatically. The site shows your 6 most recent image posts and updates every time someone visits.
How to get your token (5 steps):
1. Go to developers.facebook.com → My Apps → Create App → Consumer
2. Add the Instagram Basic Display product
3. Under Instagram Basic Display → Basic Display → create a new app
4. Add your Instagram account as a test user and generate a User Token
5. Paste the token below — it lasts 60 days. Use the Token Refresher button to extend it.
If no token is configured, the site shows the curated posts you manage in the Instagram Posts tab — those always work as a fallback. The live API just makes it automatic.
Stripe Payments
Configure Stripe to accept deposit payments from clients directly on the site. The deposit page appears after a client submits an enquiry.
How to get your Stripe keys:
1. Sign up at dashboard.stripe.com (free account)
2. Go to Developers → API keys
3. Copy your Publishable key (starts with pk_live_) — this is safe to put on the site
4. For your server-side Secret key (starts with sk_live_) — never put this in frontend code. You'll need a small server-side function to create PaymentIntents. See the setup note below.
Stripe requires a server-side endpoint to create PaymentIntents securely. The easiest options for wearenella.com:
Test card: 4242 4242 4242 4242 · Any future expiry · Any CVC
Languages
Manage multi-language support reflecting the UK's most widely spoken languages. English is always active. Toggle others on/off and customise their translations below.
How it works: A language dropdown appears in the navigation showing each language in its native script. The site automatically detects the visitor's browser language and switches on first visit. Their choice is then remembered. Arabic and Urdu automatically apply right-to-left text direction.
Choose a language to edit its translated text. Defaults are pre-filled and have been professionally worded — only edit if you'd like to adjust tone or correct anything.
The Meet the Team page is a separate file (team.html) — edit the team members' bios and photos directly in that file, or use a text editor.