Skip to main content
On this page

Hướng dẫn Thiết lập & Cấu hình Trang Sản phẩm (Product Page)

Theme TanaFlows hỗ trợ giao diện trang sản phẩm chuyên biệt custom-product.hbs giúp bạn biến một bài viết hoặc trang đơn thành một trang bán sản phẩm số (Landing Page / Sales Page) chuyên nghiệp mà không cần dùng đến bên thứ ba.

Giao diện được chia thành 2 cột:

  • Cột bên trái: Hiển thị ảnh bìa sản phẩm, nội dung mô tả chi tiết (soạn thảo trực tiếp trong Ghost Editor) và khung bình luận (nếu bật).
  • Cột bên phải (Sidebar dính - Sticky Sidebar): Hiển thị bảng giá, danh sách tính năng (checklist), nút mua hàng, thông số kỹ thuật, lời đánh giá (Testimonial) và thẻ tác giả sáng tạo.

Dưới đây là hướng dẫn chi tiết các bước thiết lập.

Bước 1: Kích hoạt Giao diện Trang sản phẩm

  1. Trong Ghost Admin, tạo một Page (Trang) hoặc Post (Bài viết) mới cho sản phẩm của bạn.
  2. Mở cài đặt trang (biểu tượng bánh răng ở góc trên bên phải):
    • Tìm mục Template và chọn: custom-product.
    • Tải lên Feature Image (Ảnh đại diện) cho sản phẩm.
    • Điền mô tả ngắn gọn vào ô Excerpt (đoạn mô tả này sẽ hiển thị ở cột bên phải).
  3. Bấm Publish (Xuất bản) hoặc cập nhật trang.

Bước 2: Cấu hình dữ liệu bán hàng ở Sidebar bằng Code Injection

Toàn bộ thông tin ở cột Sidebar bên phải (Giá, tính năng, nút bấm, tác giả…) được cấu hình thông qua đoạn mã Javascript chèn vào phần Code Injection của trang đó.

  1. Mở trang sản phẩm bạn vừa tạo ở Bước 1.

  2. Mở cài đặt trang (biểu tượng bánh răng) và bấm chọn Code Injection.

  3. Sao chép đoạn mã dưới đây và dán vào ô Page header (hoặc Post header):

    <script>
    window.product = () => ({
      price: "990.000đ", // Giá bán hiển thị
    

      // Gạch đầu dòng checklist tính năng của sản phẩm
      feature: [
        "Hơn 30+ bài học thực hành chi tiết",
        "Template quản lý Tana đi kèm miễn phí",
        "Tham gia nhóm cộng đồng hỗ trợ trọn đời",
        "Cập nhật nội dung miễn phí mãi mãi"
      ],
    

      button_text: "MUA NGAY TRÊN LEMONSQUEEZY", // Chữ trên nút mua chính
      buyNowUrl: "https://lemonsqueezy.com/checkout/example", // Đường dẫn trang thanh toán
    

      button_demo_text: "XEM DÙNG THỬ (DEMO)", // Chữ nút phụ (xem thử)
      liveDemoUrl: "https://demo.tanaflows.com", // Đường dẫn trang demo
    

      note: "* Bảo hành hoàn tiền trong 7 ngày nếu không hài lòng.", // Ghi chú nhỏ dưới nút
    

      // Thông số kỹ thuật sản phẩm (Bảng chi tiết hiển thị dạng nhãn - nội dung)
      productInfo: [
        { name: "Phiên bản", info: "v1.2.0" },
        { name: "Cập nhật lần cuối", info: "20-May-2026" },
        { name: "Nền tảng hỗ trợ", info: "Tana app" }
      ],
    

      // Lời chứng thực của học viên/khách hàng tiêu biểu
      testimonial: {
        words: "Sản phẩm này đã thay đổi hoàn toàn cách tôi ghi chép dự án hằng ngày. Vô cùng khuyến nghị!",
        name: "Cường Thạch",
        title: "Product Manager",
        website: "https://cuongthach.com"
      },
    

      // Thẻ thông tin người làm ra sản phẩm (Nhà phát triển)
      // Bạn có thể đổi key 'author' thành 'brand' (các thuộc tính giống hệt nhau)
      author: {
        name: "Cường Thạch",
        bio: "Blogger chia sẻ kiến thức về năng suất và xây dựng hệ thống Tana bộ não số.",
        avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e", // Link ảnh đại diện
        background_img: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe", // Link ảnh bìa thẻ tác giả
        subscribe: "https://tanaflows.com/subscribe" // Link đăng ký theo dõi
      }
    });
    </script>

  4. Thay đổi các giá trị văn bản, hình ảnh và đường dẫn trong đoạn mã trên cho phù hợp với sản phẩm thực tế của bạn.

  5. Bấm Save (Lưu) và tải lại trang web để kiểm tra thành quả.

Các lưu ý và tính năng nâng cao

Bật bình luận cho Trang sản phẩm

Để độc giả có thể để lại bình luận hoặc hỏi đáp về sản phẩm ở cuối trang, bạn chỉ cần gắn tag nội bộ #comment vào trang sản phẩm trong mục Tags ở cài đặt của trang (Post/Page settings).

Hỗ trợ Tự động Tạo Product Schema (SEO)

Nếu bạn gắn tag nội bộ #review cho trang sản phẩm này, hệ thống sẽ tự động quét thông tin từ các khối trên trang để tạo cấu trúc Product Schema gửi lên Google, giúp sản phẩm hiển thị điểm đánh giá sao trực tiếp trên kết quả tìm kiếm Google.

Tương thích di động (Responsive)

Trên thiết bị di động (smartphone), phần hộp Sidebar bán hàng (Giá, checklist tính năng, nút mua) sẽ tự động được đẩy lên hiển thị ngay dưới ảnh bìa sản phẩm để khách hàng dễ dàng bấm mua mà không cần cuộn xuống tận đáy trang.