Site Settings

This page teaches you how to edit the site-wide settings of Finance App. You do not need to know how to code. You only need to edit one file: src/data/config.json.

By the end of this page, you will know:

• Where the settings file is located
• What each field does
• How to change the site title, navbar, footer, widgets, and social links
• How to change the logo and favicon

Where the File Is

Open your project folder. Then open this path:

src/data/config.json

That single file controls:

• Site title and description
• Favicon and default share image
• Navbar links and logo
• Blog and product widget headings
• Footer links, heading, and copyright
• Social media links
• Developer credit

The Full File

Here is the complete src/data/config.json file that comes with the theme:

{
  "url": "https://financeapp.pages.dev",
  "title": "Finance App — Astro JS Multipurpose Template for Startups and AI Products",
  "description": "Astro JS multipurpose theme for startups, fintech, and AI products. Landing page, product showcase, blog, and contact form in one project.",
  "favicon": "/img/astrojs.svg",
  "image": "/img/finance.webp",
  "navbar": {
    "title": "Finance App",
    "image": "/img/coverfinanceapp.avif"
  },
  "nav_list": [
    { "nav": "Home", "icon": "/img/icon/nav-home.svg", "link": "/" },
    { "nav": "About", "icon": "/img/icon/nav-about.svg", "link": "/about" },
    { "nav": "Product", "icon": "/img/icon/nav-product.svg", "link": "/product" },
    { "nav": "Blog", "icon": "/img/icon/nav-blog.svg", "link": "/blog" },
    { "nav": "Order", "icon": "/img/icon/nav-sto.svg", "link": "https://creativitaz.gumroad.com/l/financestartup-astrojs" },
    { "nav": "Contact", "icon": "/img/icon/nav-contact.svg", "link": "/contact" }
  ],
  "widget_blog": {
    "title": "Latest Insights",
    "description": "Articles on fintech, AI products, and building modern websites with Astro JS.",
    "button": "Read All Articles",
    "link": "/blog"
  },
  "widget_product": {
    "title": "Products and Services",
    "description": "Explore the product pages, service listings, and detail templates included in this theme.",
    "button": "View All Products",
    "link": "/product"
  },
  "nav_footer_title": "Finance App — Astro JS Multipurpose Theme",
  "social": {
    "facebook": "https://www.fiverr.com/creativitas/design-your-modern-website-using-jekyll",
    "twitter": "https://www.fiverr.com/creativitas/create-your-custom-website-and-app",
    "youtube": "https://www.fiverr.com/creativitas/design-your-website-with-progresive-web-application",
    "telegram": "https://www.fiverr.com/creativitas/design-presentation-website-for-marketing-product",
    "linked": "https://www.fiverr.com/creativitas/create-your-website-with-new-technology"
  },
  "nav_footer": [
    { "title": "Home", "link": "/" },
    { "title": "About", "link": "/about" },
    { "title": "Contact", "link": "/contact" }
  ],
  "developer": {
    "name": "Creativitas",
    "link": "https://www.fiverr.com/creativitas/"
  },
  "copyrights": "Finance App — Astro JS Multipurpose Theme."
}

What Each Part Does

The file has several blocks. Each block controls one part of the site.

Block	What It Controls
Top-level fields	Site URL, title, description, favicon, default image
navbar	Text and image shown in the mobile menu
nav_list	The links in the top navbar
widget_blog	The blog section on the homepage
widget_product	The product section on the homepage
nav_footer_title	The heading in the footer
social	Social media icons in the footer
nav_footer	The links in the footer
developer	Developer name and link
copyrights	Copyright text at the bottom

Field Reference

Site Metadata

Field	What It Does
url	Your site address. Used for sitemap and search engines.
title	The site title. Shown in the browser tab and in search results.
description	A short summary of your site. Shown in search results.
favicon	The small icon shown in the browser tab.
image	The default image used when your site is shared on social media.

Navbar

Field	What It Does
navbar.title	Text shown next to the logo in the mobile menu.
navbar.image	Image shown at the top of the mobile menu.
nav_list	The list of links in the top navbar.

Each item in nav_list has three fields:

Field	What It Does
nav	The label shown in the menu.
icon	The small image next to the label in the mobile menu.
link	Where the link goes. Can be a page on your site or an external URL.

Widgets

The blog and product widgets appear on the homepage.

Field	What It Does
widget_blog.title	The heading above the blog section.
widget_blog.description	The short text below the heading.
widget_blog.button	The text on the button.
widget_blog.link	Where the button goes.
widget_product.title	The heading above the product section.
widget_product.description	The short text below the heading.
widget_product.button	The text on the button.
widget_product.link	Where the button goes.

Footer

Field	What It Does
nav_footer_title	The heading at the top of the footer.
nav_footer	The list of links in the footer.
copyrights	The copyright text at the bottom.
developer.name	The name of the developer or company.
developer.link	The link to the developer’s website.

Social Links

Field	What It Does
social.facebook	Your Facebook page URL.
social.twitter	Your Twitter or X profile URL.
social.youtube	Your YouTube channel URL.
social.telegram	Your Telegram channel URL.
social.linked	Your LinkedIn profile URL.

How to Edit — Step by Step

Change the Site Title

The site title appears in the browser tab and in search results.

1. Open src/data/config.json
2. Find the line starting with "title"
3. Replace the text inside the quotes with your own
4. Save the file

Example:

"title": "Your Site Name"

Important: Keep the double quotes " on both sides. Do not remove the comma at the end of the line.

Change the Site Description

1. Find "description"
2. Replace the text inside the quotes
3. Save

Change the Site URL

1. Find "url"
2. Replace with your own domain

Example:

"url": "https://yourdomain.com"

Do not add a slash at the end.

Change the Logo

The logo appears in the navbar.

1. Put your logo in public/img/
2. Find the "image" field inside the "navbar" block
3. Replace the value with your logo path

Example:

"navbar": {
  "title": "Your Site",
  "image": "/img/your-logo.avif"
}

Change the Favicon

The favicon is the small icon in the browser tab.

1. Put your favicon in public/img/
2. Find the "favicon" field
3. Replace the value

Example:

"favicon": "/img/your-favicon.svg"

Change the Navbar Links

The navbar links are in the nav_list array.

1. Find "nav_list"
2. Each item has nav, icon, and link
3. Edit the values, add new items, or remove existing ones

Example of one item:

{ "nav": "Home", "icon": "/img/icon/nav-home.svg", "link": "/" }

To add a new link, copy an existing item and change the values. Make sure to put a comma after the previous item.

Change the Footer Links

1. Find "nav_footer"
2. Each item has title and link
3. Edit, add, or remove items

Example:

{ "title": "Home", "link": "/" }

Change the Footer Heading

1. Find "nav_footer_title"
2. Replace the text

Change the Copyright Text

1. Find "copyrights"
2. Replace the text

Change Social Links

1. Find the "social" block
2. Replace each URL with your own

Example:

"social": {
  "facebook": "https://facebook.com/yourpage",
  "twitter": "https://twitter.com/yourhandle",
  "youtube": "https://youtube.com/@yourchannel",
  "telegram": "https://t.me/yourchannel",
  "linked": "https://linkedin.com/in/yourprofile"
}

Change the Developer Credit

1. Find the "developer" block
2. Edit name and link

Rules for Editing JSON

JSON is picky. Follow these rules to avoid errors:

• Always use double quotes " for text. Not single quotes '.
• Always put a comma between items in a list, but not after the last one.
• Never add comments like // or /* */. JSON does not allow them.
• Keep the curly braces { and } and square brackets [ and ] balanced.
• Do not delete the commas at the end of lines, unless it is the last item in a block.

If the JSON is broken, the site will show an error. Use a JSON validator if you are unsure.

Where Images Go

• For local images: put them in public/img/ and reference them as /img/filename.ext
• For external images: paste the full URL starting with https://

Save and Preview

1. Save the file
2. If the dev server is running, the browser will reload automatically
3. If not, run:

npm run dev

4. Open http://localhost:4321 to see your changes

Common Mistakes

Mistake	What Happens	Fix
Missing comma	JSON error, site breaks	Add the comma
Extra comma	JSON error, site breaks	Remove the last comma in the block
Single quotes	JSON error, site breaks	Use double quotes
Wrong image path	Broken image	Check the file exists in public/img/
Missing closing bracket	JSON error, site breaks	Count your { and }
Link missing leading slash	Link goes to wrong page	Internal links start with /
External link without https://	Link does not work	Start external links with https://