Common Changes

Skill level: Beginner unless marked

Quick recipes for the changes people ask about most. Each one names the file and the exact lines.

Button Options

Every button in Kivo’s content files (hero, call to action, plans, page headers) uses the same options:

button:
  enable: true
  label: "Start for free"
  url: "/signup/"            # a page on your site, a full https:// address, or mailto:
  variant: "fill"            # fill | fill-white | outline | text | circle
  hoverEffect: ""            # "" | text-flip | creative-fill | magnetic | magnetic-text-flip
  target: ""                 # "_blank" opens in a new tab
  rel: ""                    # for example "nofollow"
  class: ""                  # extra CSS classes, for example "w-full justify-center"
  icon:
    enable: true
    name: "ChevronRight"     # any Lucide icon name
    position: "right"        # left | right

Set enable: false to hide a button without deleting it.

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, for example questionsSection: with enable: false under it. This works where the route passes the block to the section (the homepages, security, solutions, compare). On /pricing/ only plansSection and planComparisonSection are read from the page file, and /faq/ reads none, so there you remove the section’s line from the route file instead.

Reorder The Homepage(light code)

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.

Change The Hero Look

In src/content/sections/english/hero-saas.md, set options.layout to default, centered, screenshot, code, or form. For the screenshot layout, add your product screenshot:

image: "/images/dashboard.png"     # src/assets/images/dashboard.png
imageAlt: "Product dashboard"
options:
  layout: "screenshot"

Remove The Rotating Words In The Hero

Delete the rotatingWords list (or leave it empty) and write the whole headline in title.

Show GitHub Stars In The Hero

In hero-saas.md, under badges, set github to your repository. The star count is fetched when the site is built, and value is used if the build is offline:

badges:
  enable: true
  list:
    - icon: "/images/icons/github.svg"
      label: "GitHub stars"
      value: "1.2k"
      url: "https://github.com/your-org/your-repo"
      github: "your-org/your-repo"

Add, Remove, Or Reorder Items In A List

Features, plans, FAQ questions, logos, and steps 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.

Open A Link In A New Tab

For buttons, add target: "_blank". Links to other sites in Markdown text already open in a new tab.

Point The Header To Your App

In config.toml:

[settings.navigationButton]
  url = "https://app.example.com/signup"

[settings.navigationSecondaryLink]
  url = "https://app.example.com/login"

Set enable = false on either one to hide it.

Link The Docs Page To Your Documentation

Set docsUrl in config.toml to your documentation site. Relative links on the /docs/ page (for example guides/quickstart) are joined to it; links that start with /, #, or http are used as they are.

[settings]
  docsUrl = "https://docs.example.com"

Change The 404 Page

Edit src/content/sections/english/not-found-section.md: the heading, the text, the buttons, and the popular links.

Update The System Status Page

/status/ is a hand-edited page. Change services in status-section.md and past incidents in incidents-section.md. If you use a status service (such as Better Stack or Instatus), link the menus to it and delete the page and the footer status badge.

Change The Number Of Posts Per Page

blogPagination (blog) and pagination (changelog) in [settings] of config.toml.

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.

Remove The “Kivo” Name Everywhere

Change [site] title, logoText, and [seo] author in config.toml. Then search the whole project (Ctrl + Shift + F) for Kivo and change what is visible text. The {brand} in the copyright line follows site.title on its own.

Change Wording That Isn’t In Any Content File

Labels such as “Copy”, “Subscribe”, “Read story”, “Apply”, “min read”, or search messages live in src/i18n/en.json and fr.json. Search those files for the word you see.