Skip to content

Make it yours

Business details

Name, contact details, opening hours, social links and currency.

Your business information lives in one file: src/config/site.ts. Change it once and it updates everywhere: the header, footer, contact page, forms and search engine data.

Name and description

src/config/site.ts
export const site = {  name: "Maison Fleur",  wordmark: "MAISON FLEUR",  tagline: "Spa & Beauty",  description: "Maison Fleur is a small spa and beauty salon offering…",  statement: "A small house for skin, body and self-care…",
  • name: your business name. Used in page titles, the footer and emails.
  • wordmark: the text logo in the header. See Logo & favicon.
  • tagline: a short label shown next to the name in some places.
  • description and statement: one or two sentences about your business.

Website address

Search engines and social media need to know your real web address. The easiest way is to set it where you host the website, as an environment variable called NEXT_PUBLIC_SITE_URL (see Publish your website). Or replace the fallback address directly:

src/config/site.ts
url: (process.env.NEXT_PUBLIC_SITE_URL ?? "https://www.your-domain.com").replace(/\/$/, ""),

Contact details

src/config/site.ts
contact: {  demo: false,  email: "hello@your-domain.com",  phone: "+44 20 1234 5678",  phoneHref: "tel:+442012345678",  addressLines: ["12 High Street", "London, W1 2AB"],  mapNote: "Five minutes from Oxford Circus station.",},
  • Set demo to false once your details are real. This removes the “demo” notes beside them.
  • phoneHref is the number used when someone taps it on a phone: start with tel: and use digits only, with your country code.
  • addressLines is a list. Each line in quotes, separated by commas.

Opening hours

src/config/site.ts
openingHours: [  { days: "Monday – Friday", hours: "09:00 – 18:00" },  { days: "Saturday", hours: "10:00 – 16:00" },  { days: "Sunday", hours: "Closed" },],

Add or remove lines as you like. Each line needs its curly brackets and a comma at the end.

Social media links

src/config/site.ts
social: [  { label: "Instagram", href: "https://www.instagram.com/yourname", handle: "@yourname", icon: "instagram" },  { label: "Facebook", href: "https://www.facebook.com/yourpage", handle: "yourpage", icon: "facebook" },],// Set this to false once the links above are yours:socialAreDemo: false,

The icon must be one of the icons the template includes. In the Spa template these are instagram, pinterest and facebook. To remove a network, delete its whole line.

Currency and language

src/config/site.ts
locale: "en_GB",language: "en", currency: {  code: "GBP",  locale: "en-GB",},
  • currency.code: a three-letter code such as USD, EUR, GBP, AED or INR. Prices update their symbol automatically.
  • currency.locale: controls number formatting, for example en-US shows $1,200.00 and de-DE shows 1.200,00 €.
  • language: the language of your text (en, fr, de…). It helps screen readers and search engines.

Business info for Google (optional)

The template can tell Google your business type and address, which can help you appear in local results. It is off by default because the demo address is not real. Fill in your details and switch it on:

src/config/site.ts
structuredData: {  enabled: true,  businessType: "DaySpa",  streetAddress: "12 High Street",  addressLocality: "London",  postalCode: "W1 2AB",  addressCountry: "GB",},