# 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: ```yaml 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](/homio/customization/pricing-estimator/). ### Change Your Phone, Email, Or Address **File:** `src/config/config.toml`, `[business]` ```toml [business] phone = "+15550100199" # E.164: + country code, digits only (tel: links) phoneDisplay = "(555) 010-0199" # how the number is shown email = "hello@example.com" ``` 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](/homio/customization/business-info/). ### Change Opening Hours And Holidays **File:** `src/config/config.toml`, `[business.hours]` and `closedDates` ```toml [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](/homio/customization/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: ```toml [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: ```yaml 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-.astro`, `src/content/homepage/english/home-.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](/homio/customization/homepages/). ### Hide A Section - **Everywhere:** `enable: false` at the top of `src/content/sections/english/
.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](/homio/customization/sections/#section-catalog). ### Reorder The Homepage *(light code)* - **Main homepage:** open `src/pages/[...lang]/index.astro` and move the section lines inside ``. 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 `` 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`): ```yaml 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](/homio/customization/section-layouts/#hero). ### 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](/homio/customization/section-layouts/). ### Button Options Every button in the content files (`button`, `primaryButton`, `secondaryButton`, `submitButton`) uses `sharedButton` from `src/sections.schema.ts`: ```yaml 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]` ```toml [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]` ```toml [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](/homio/customization/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 ```text 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. ```