Skip to main content
On this page

Product Page Setup & Configuration Guide

The TanaFlows theme includes a dedicated product page layout called custom-product.hbs that turns a regular post or page into a professional digital product sales landing page (Sales Page) without requiring third-party tools.

The interface is split into 2 columns:

  • Left Column: Displays the product’s feature image, detailed description (written directly inside the Ghost Editor), and a comments section (if enabled).
  • Right Column (Sticky Sidebar): Displays the pricing table, feature checklist, purchase button, technical specifications, a customer testimonial, and a creator/brand card.

Here is the step-by-step guide to setting up your product page.

Step 1: Activate the Product Page Layout

  1. In Ghost Admin, create a new Page or Post for your product.
  2. Open page settings (gear icon in the top-right corner):
    • Find the Template field and select: custom-product.
    • Upload a Feature Image for the product.
    • Fill in the Excerpt field with a short description (this description will appear in the right sidebar).
  3. Click Publish (or update the page).

Step 2: Configure Sales Data in the Sidebar using Code Injection

All information displayed in the right sidebar (price, features, buttons, author, etc.) is configured via a JavaScript block inserted into the Code Injection section of that specific page.

  1. Open the product page you created in Step 1.
  2. Open page settings (gear icon) and select Code Injection.
  3. Copy the code block below and paste it into the Page header (or Post header) box:
<script>
window.product = () => ({
  price: "$49", // Display price


  // Checklist bullets of product features
  feature: [
    "Over 30+ detailed hands-on lessons",
    "Free included Tana management template",
    "Lifetime community support group access",
    "Free lifetime content updates"
  ],


  button_text: "BUY NOW ON LEMONSQUEEZY", // Text for the primary purchase button
  buyNowUrl: "https://lemonsqueezy.com/checkout/example", // Checkout page link


  button_demo_text: "VIEW LIVE DEMO", // Text for the secondary button (demo/preview)
  liveDemoUrl: "https://demo.tanaflows.com", // Live demo link


  note: "* 7-day money-back guarantee if not satisfied.", // Small disclaimer/note under the button


  // Product specifications (metadata table showing label - content)
  productInfo: [
    { name: "Version", info: "v1.2.0" },
    { name: "Last Updated", info: "20-May-2026" },
    { name: "Supported Platform", info: "Tana app" }
  ],


  // Featured student/customer testimonial
  testimonial: {
    words: "This product completely transformed how I document daily projects. Highly recommended!",
    name: "John Doe",
    title: "Product Manager",
    website: "https://johndoe.com"
  },


  // Developer / Creator card details
  // You can change the key 'author' to 'brand' (both use identical property keys)
  author: {
    name: "Cường Thạch",
    bio: "Blogger sharing productivity and digital second brain system building using Tana.",
    avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e", // Avatar image link
    background_img: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe", // Author card background banner link
    subscribe: "https://tanaflows.com/subscribe" // Newsletter subscribe link
  }
});
</script>
  1. Change the text values, images, and links in the code block above to match your actual product.
  2. Click Save and refresh your web page to see the results.

Notes and Advanced Features

Enable Comments on Product Pages

To allow readers to leave comments or ask questions at the bottom of the page, simply add the internal tag #comment to the product page settings under Tags.

Automated Product SEO Schema

If you add the internal tag #review to this product page, the system will automatically scan the fields on the page to build structured Product Schema data and send it to Google. This allows your product to show star ratings directly in Google search results.

Mobile Responsiveness

On smartphones, the sidebar box (price, checklist, buy button) automatically shifts to display directly below the product feature image, allowing mobile customers to purchase easily without scrolling to the bottom.