Skip to content
New: Customize your theme with an AI assistant. Read the guide
Ultimate Astro Theme GuidesDocs
Log inBrowse Themes

Common Changes (Cookbook)

Common Changes

Skill level: Beginner unless marked

Short recipes for the changes people ask about most. Each one names the goal, the file, the change, and what to check. Make every content change in english/ and french/, and keep npm run dev running to see it.

Change A Price

File: src/content/pricing/english/-index.md and french/-index.md

Every price on the site (estimator, plans, from-prices on cards and menus, booking summary) is computed from the rate cards, so you change it once:

rateCards:
  - id: "standard-cleaning"
    mode: "rooms" # rooms | hourly | units
    base: 70        # sample
    perBedroom: 20  # sample
    perBathroom: 25 # sample
    minimum: 110    # sample; smallest total for one visit

Set the same numbers in the French file. Check: /pricing/ and a service page; npm run build prints a [pricing] warning if the two files differ. Discounts are in frequencies, add-ons in addOns. Full guide: Pricing & Estimator.

Change Your Phone, Email, Or Address

File: src/config/config.toml, [business]

[business]
  phone        = "+15550100199"   # E.164: + country code, digits only (tel: links)
  phoneDisplay = "(555) 010-0199" # how the number is shown
  email        = "[email protected]"

The header, phone bar, footer, contact page, forms, area pages, and structured data all read these. Check: the header call button and /contact/. See Business Info.

Change Opening Hours And Holidays

File: src/config/config.toml, [business.hours] and closedDates

[business]
  timezone    = "America/New_York"
  closedDates = ["2026-12-25", "2027-01-01"] # no bookings on these days


  [business.hours]
    mon = "07:30-18:00"
    sat = "08:00-14:00"
    sun = ""   # empty = closed

Use 24-hour HH:MM-HH:MM, and "08:00-12:00,13:00-17:00" for a lunch break. Check: the “Open now” line and hours table on /contact/, and that the booking calendar skips closed days.

Add A Service Area

Folder: src/content/areas/english/ and french/

  1. Copy elm-park.md to lake-view.md (the file name becomes /areas/lake-view/).
  2. Change title, description, zips, neighborhoods, order, and the body. Remove the # sample values you don’t replace.
  3. Create the French file with the same name.

The Areas menu, footer column, area finder, and booking ZIP check pick up the new area by themselves. Check: /areas/, and type one of its ZIP codes in the finder. Full guide: Service Areas.

Change The Main Button

File: src/config/config.toml, [settings.navigationButton]

The sunflower button in the header, also used by the phone action bar:

[settings.navigationButton]
  enable = true
  label  = ""        # empty uses navigation.buttonLabel ("Get a price") from src/i18n/en.json and fr.json
  url    = "/book/"

To change the words in both languages, edit navigation.buttonLabel in src/i18n/en.json and fr.json. To change the button on one page only, add a primaryCta block to that page’s file (it changes the header button, phone action bar, announcement link, and the footer link to the booking page), as the commercial homepage does:

primaryCta:
  label: "Request a walkthrough"
  url: "#walkthrough"     # a section id on the page, or a path
  announcement: "hide"    # link | hide | keep: what the announcement bar does on this page

Check: the header at desktop width and the bottom bar at phone width.

Hide A Demo Homepage

Files: src/pages/[...lang]/home-<name>.astro, src/content/homepage/english/home-<name>.md (and french/), the menus

  1. Delete the route file and both content files of the homepage you don’t want, for example home-commercial.
  2. Remove its link from the Pages menu in src/config/menu.en.json and menu.fr.json (or turn the whole Pages menu off).
  3. Run npm run astro-check.

Homepages don’t read draft, so deleting is the way. To use a demo homepage as your main home instead, see Homepages.

Hide A Section

  • Everywhere: enable: false at the top of src/content/sections/english/<section>.md.
  • On one page: add its block to the page file with enable: false, for example questionsSection: then enable: false under it. The block names are in Sections.

Reorder The Homepage(light code)

  • Main homepage: open src/pages/[...lang]/index.astro and move the section lines inside <Base>. Top to bottom in the file is top to bottom on the page.
  • Demo homepages: move the lines of the sections list near the top of the route, for example in home-cleaning.astro.

Keep the <LayoutVariants ... /> lines whole when you move them.

Change The Homepage Hero Text Or Photo

File: src/content/homepage/english/-index.md, block heroSection

The main homepage sets its own hero in its file, so edit it there (not in hero-section.md):

heroSection:
  title: "A cleaner home, the same crew every visit"
  description: "Cleaning, small repairs, windows and carpets. Relax while we look after your home."
  checks: ["Insured", "Background-checked", "Fixed prices"]
  image: "/images/people/camera-install.jpg" # src/assets/images/people/camera-install.jpg
  imageAlt: "A technician in work clothes fitting a fixture to a wall"

Check: the title at phone width: a long title wraps onto more lines. The other hero layouts are in Section Layouts.

Change The Rating And Trust Facts

File: src/content/sections/english/trust-strip.md

rating.value and rating.count feed every rating chip, line, and summary on the site, and facts the insured, vetted, and guarantee facts. Use real figures from your review sources, or set rating.enable: false. Keep value in metrics-section.md equal to the rating.

Change Or Show A Layout

Set options.layout in the section file or in a page block, for example layout: "carousel" for the reviews. Allowed values are in the comment next to layout: and on /elements/. See Section Layouts.

Button Options

Every button in the content files (button, primaryButton, secondaryButton, submitButton) uses sharedButton from src/sections.schema.ts:

button:
  enable: true            # false hides it without deleting it
  label: "Book a visit"   # required
  url: "/book/"           # a page, a full https:// address, #section-id, tel:, or mailto:
  variant: "fill"         # fill | soft | outline | accent | fill-white | text
  hoverEffect: ""         # "" | text-flip
  target: ""              # "_blank" opens a new tab (links to other sites do this on their own)
  rel: ""
  class: ""               # extra CSS classes, for example "w-full justify-center"
  icon:
    enable: true
    name: "ArrowRight"    # any Lucide icon name
    position: "right"     # left | right

Use accent for at most one button per view. fill-white is for buttons on photos and dark bands.

Turn On The Announcement Bar

File: src/content/sections/english/announcement-bar.md

Set enable: true, write text (Markdown and {phone} work), and set a link. Change id whenever the message changes, so visitors who closed the old one see the new one. end: "2026-10-31" hides it after that day. Check: the strip above the header.

Change The Currency

File: src/config/config.toml, [settings.estimator]

[settings.estimator]
  currency        = "EUR"    # ISO 4217 code, one currency for every language
  currencyDisplay = "symbol" # symbol | narrowSymbol | code

Prices format themselves for each language. Change the numbers in the pricing file to your own prices too.

Turn Off Dark Mode

File: src/config/config.toml, [settings.colorScheme]

[settings.colorScheme]
  default  = "light" # system | light | dark
  switcher = false   # hides the light/dark button in the header, mobile menu, and footer

Add, Remove, Or Reorder Items In A List

Plans, FAQ questions, steps, facts, form fields, and logos are YAML lists. Each item starts with - . Copy a whole item (from its - to the line before the next -) to add one, delete it to remove one, and move it to reorder. Keep the indentation exactly as in the other items. In a page block, a list replaces the whole list from the section file: repeat every item you keep.

Change The 404 Page

File: src/content/sections/english/not-found-section.md

The title, text, buttons, photo, and the “Or call” line. Check: open any missing address, such as /nothing-here/.

Change The Number Of Posts Per Page

blogPagination in [settings] of config.toml (6 by default). pagination sets the other paginated lists.

Hide A Page Without Deleting It

Add draft: true to its frontmatter. It stays visible in npm run dev so you can keep working on it, and is left out of the built site, the sitemap, and llms.txt.

Replace The Theme Name And Sample Brand

  1. In config.toml: [site] title, description, tagline, and logoText (ships as "homio"), and [business] name.
  2. Search the whole project (Ctrl + Shift + F) for Homio and homio, and change what is visible text.
  3. Replace the logo mark and favicons: see Site Identity & Logo.

Change Wording That Isn’t In Any Content File

Labels such as “Get a price”, “Call”, “All services”, form errors, booking steps, and units live in src/i18n/en.json and fr.json. Search those files for the words you see, and change both. Then run npm run check-i18n.

Do It With AI

Make these changes to my Homio site, in English and French: [LIST, e.g. phone (555) 123-4567,
hours Mon–Fri 8:00–17:00, Saturday closed, standard clean base price 80]. Use the files named in
the Common Changes docs ([business] in src/config/config.toml for contact details and hours,
src/content/pricing/*/-index.md for prices, with identical numbers in both languages). Remove the
# sample comment from each value you replace, then run npm run astro-check.
Type something to search...
to navigateto selectESC to close