Skip to main content

Product Page - Complete Customization Guide

The Product page shows your products and services. It is located at src/pages/product.js, but all content is controlled by data/Product.json. You can add unlimited products or services without touching React code.

Where to Edit​

  1. Open VS Code
  2. Go to the data/ or src/data/ folder
  3. Open Product.json
  4. Edit and save
  5. Check at http://localhost:3000/product

1. SEO for Product Page​

At the top of Product.json, set the SEO for Google and social sharing.

  "title": "Docusaurus Web Developer Product and Services",
  "description": "Website developer docusaurus - create themes and web developer services",
  "url": "/product",
  "image": "img/react.svg",

What to change:

  • title: SEO title (50-60 chars). Shows in the browser tab and Google. Example: Our Products & Services - Docusar or Docusaurus Development Services
  • description: Meta description for Google (150-160 chars). Example: We build modern documentation sites, Docusaurus themes, Jekyll, Eleventy, and headless CMS solutions.
  • url: Route of the page. Leave it as /product unless you rename the file in src/pages/product.js
  • image: Social card image for sharing on Twitter, Facebook, and Discord. Put the image in the static/img/ folder. Example: img/product-cover.png or img/react.svg. Recommended size: 1200x630px.

2. Header Area​

The top section of the product page - title and short description.

  "header": {
    "title": "Product Services",
    "description": "Docusa Docusarus web developer - Product and Services"
  }

How to edit:

  • title: Main H1 heading. Example: What We Build or Our Services or Product & Services
  • description: Paragraph under the title. 1-2 sentences explaining what you offer. Example: We help startups and developers launch modern documentation sites and Jamstack websites.

3. Product or Services List​

This is the main section - a grid of cards showing your products or services. You can add as many as you want.

Basic Structure:

Each product is an object inside the product_list array:

  "product_list": [
    {
      "image": "URL image here..",
      "title": "Title for your product services..",
      "content": "Content article for information about your product services list..."
    }
  ]

How to add a new product:

Copy-paste an existing object and edit it. Make sure to add a comma between objects.

  "product_list": [
    {
      "image": "img/product/eleventy.svg",
      "title": "Eleventy 11ty Dev",
      "content": "If you want to develop a site with a fast static site generator, then Eleventy 11ty is your solution."
    },
    {
      "image": "img/product/new-product.svg",
      "title": "My New Service",
      "content": "Description of my new service here..."
    }
  ]

Image field:

You have two options for the image:

  • Local image: Upload your image to the static/img/product/ folder, then use a path like img/product/my-image.svg or img/product/my-image.png. SVG is best for icons.
  • CDN image: Use a full URL like https://cdn.example.com/image.png

Real Implementation Example with 5 Services:

  "product_list": [
    {
      "image": "img/product/docsite.svg",
      "title": "Documentation Site",
      "content": "We can help you to create, develop and build documentation websites. - Tech Docusaurus or Starlight by Astro Js"
    },
    {
      "image": "img/product/jekyll.svg",
      "title": "Jekyll Web",
      "content": "If you need a Jekyll website developer, then we are the right choice for your Jekyll project."
    },
    {
      "image": "img/product/eleventy.svg",
      "title": "Eleventy 11ty Dev",
      "content": "If you want to develop a site with a fast static site generator, then Eleventy 11ty is your solution."
    },
    {
      "image": "img/product/react.svg",
      "title": "Docusaurus Theme Dev",
      "content": "Custom Docusaurus theme development from scratch or converting your Figma design to Docusaurus."
    },
    {
      "image": "img/product/cms.svg",
      "title": "Headless CMS Setup",
      "content": "Integrate Decap CMS or Tina CMS into your Docusaurus, Next.js, or Astro site for easy content editing."
    }
  ]

Each card displays:

  • image: Icon or illustration on top of the card
  • title: Product/service name - keep it short, 2-4 words
  • content: A 1-2 sentence description of the service

These cards are rendered by the component src/components/Product/List/index.js. You can edit its styles.module.css to change the card layout, columns, or hover effect.

After Editing​

  1. Save Product.json
  2. Run npm run start if it is not running
  3. Open http://localhost:3000/product
  4. Check that all product cards appear correctly

Tips:

  • Use a consistent image size and style for all product cards (all SVG icons or all illustrations)
  • Keep content short - 1-2 lines max per card for a clean grid
  • If you have many products (6+), the grid will auto-wrap into rows
  • To link each card to a detail page, you can add a link field in the JSON and update the component to use it: "link": "/product/docs-site"
  • Validate the JSON at https://jsonlint.com if the page shows blank - a missing comma is the most common error