Skip to content

Editing the Product Page

This page teaches you how to edit a product page in Finance App. You do not need to know how to code. You only need to edit one file inside the product folder.

By the end of this page, you will know:

  • Where product files are located
  • What each line does
  • How to change the title, description, image, date, and content
  • How the product list is generated

Where Product Files Are

Section titled “Where Product Files Are”

All product pages live in this folder:

src/pages/product/

Each .md file in this folder becomes one product page. For example:

File Route
src/pages/product/ai-automation.md /product/ai-automation/
src/pages/product/finance-app.md /product/finance-app/
src/pages/product/docuna.md /product/docuna/

You can add, remove, or edit any .md file in this folder to change your product lineup.

The Product List

Section titled “The Product List”

The product list page is at:

/product/

It is generated automatically from all .md files in src/pages/product/. You do not need to edit the list manually — just add or remove files.

The list uses pagination. Pagination is handled by:

src/pages/product/[...page].astro

You do not need to edit this file unless you want to change how pagination works.

A Full Product File Example

Section titled “A Full Product File Example”

Here is an example product file, src/pages/product/ai-automation.md:

---
layout: ../../design/product/productpost.astro
title: "AI Automation — Finance Vision and Autoblog SEO"
description: "Build a private AI employee that you own 100%. Finance Vision saves 20 hours per week. Autoblog SEO turns content spend into traffic equity. One-time build, no monthly rent."
image: "https://images.unsplash.com/photo-1620712943543-bcc4688e7485?w=800&auto=format&fit=crop&q=60"
pubDate: "2026-10-07"
---


## Stop renting. Start owning.


You pay **$2,400/month** for a staff member doing copy-paste. You pay **$800/month** for writers. That is **$38,400/year burned** — and at the end of the year, you own nothing.

What Each Line Does

Section titled “What Each Line Does”

Frontmatter

Section titled “Frontmatter”

The block between the two --- lines at the top is called frontmatter. It tells Astro how to build this product page.

Field What It Does
layout Which layout file to use. Do not change this.
title The product title. Shown on the product page and in the product list.
description A short summary. Shown in the list and in search results.
image The product image. Shown in the list and on the product page.
pubDate The publish date. Used for sorting in the product list.

Article Content

Section titled “Article Content”

Everything below the second --- is the article content. It appears on the product page under the header image.

You can write plain text, or use Markdown formatting like headings, bold, links, and lists.

How to Edit — Step by Step

Section titled “How to Edit — Step by Step”

Change the Product Title

Section titled “Change the Product Title”
  1. Open any file in src/pages/product/
  2. Find the line starting with title:
  3. Replace the text inside the quotes
  4. Save the file

Example:

title: "Your Product Name"

Important: Keep the double quotes " on both sides.

Change the Product Description

Section titled “Change the Product Description”
  1. Find the line starting with description:
  2. Replace the text inside the quotes
  3. Save

Example:

description: "A short one-sentence summary of your product."

The description is used in the product list and in search results. Keep it short — around 150 to 160 characters.

Change the Product Image

Section titled “Change the Product Image”
  1. Put your image in public/img/
  2. Find the line starting with image:
  3. Replace the URL with your image path
  4. Save

Using a local image:

image: "/img/your-product.avif"

Using an external image:

image: "https://example.com/your-product.jpg"

Change the Publish Date

Section titled “Change the Publish Date”
  1. Find the line starting with pubDate:
  2. Replace the date with today’s date, in the format "YYYY-MM-DD"
  3. Keep the double quotes

Example:

pubDate: "2026-01-15"

The date is used to sort products in the list — the newest product appears first.

Change the Article Content

Section titled “Change the Article Content”
  1. Find the text below the second --- line
  2. Replace it with your own text
  3. Save the file

You can write multiple paragraphs, add headings with ##, or use any standard Markdown syntax.

Example:

## What This Product Does


This product helps you do X, Y, and Z.


## Who It Is For


- Small teams
- Freelancers
- Product managers


## How to Get Started


Contact us or visit the order page.

How to Add a New Product

Section titled “How to Add a New Product”
  1. Open the src/pages/product/ folder
  2. Duplicate an existing .md file, or create a new one
  3. Give it a short, clear filename using lowercase and dashes:
my-new-product.md
  1. Add the frontmatter at the top of the file
  2. Write the product content
  3. Save the file

The new product will appear in the product list automatically.

How to Remove a Product

Section titled “How to Remove a Product”
  1. Open the src/pages/product/ folder
  2. Find the .md file you want to remove
  3. Delete the file

The product will disappear from the list automatically.

Rules for Frontmatter

Section titled “Rules for Frontmatter”
  • Keep the two --- lines. They mark the start and end of the frontmatter.
  • Do not delete the layout line. It tells Astro which layout to use.
  • Keep the spacing after the colon. Write title: "Product", not title:"Product".
  • Use double quotes for title, description, and image.
  • Use lowercase and dashes for filenames, like my-product.md. Do not use spaces.

Save and Preview

Section titled “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
  1. Open http://localhost:4321/product/ in your browser

Common Mistakes

Section titled “Common Mistakes”
Mistake What Happens Fix
Removed one of the --- lines Build error Add the missing --- line
Changed the layout path Build error, page cannot find layout Restore ../../design/product/productpost.astro
Filename has spaces Route looks broken Use dashes instead, like my-product.md
Missing space after the colon Field is not read correctly Write title: "Product", not title:"Product"
Wrong image path Broken image Check the file exists in public/img/
Deleted the pubDate field Product order may be random Add pubDate: back with a date

Relationship with Other Files

Section titled “Relationship with Other Files”

Each product page uses its own file, but shares layout and configuration with the rest of the site.

File What It Controls
src/pages/product/*.md Each product’s content
src/design/product/productpost.astro The product page layout
src/design/product/productlist.astro The product list layout
src/pages/product/[...page].astro Pagination for the product list
src/data/config.json The navbar and footer shown on product pages

Next Step

Section titled “Next Step”

After editing the product pages, you can continue to edit the blog, contact page, or SEO settings.