Creating an e-commerce product page

E-commerce product page

Demo product page ⬇️

TanaFlows Theme - Unleash the Power of Language ghostfam.com

TanaFlows is a multilingual ghost theme with a variety of premade templates to create dedicated landing pages more quickly for entrepreneurs, SaaS founders, and multilingual bloggers.

---

1. Add a new page with a Product template
2. Put the script in ghost editor with the HTML card

Choose template Product and paste the customized script

Script

<script>
  function product() {
    return {
      // Feature list
      feature: [
        "Multilingual support",
        "Dark mode support",
        "Translation ready",
        "Ready-to-use templates for pages",
      ],
      price: "$149", // Product Price
      button_text: "Buy now", // Button Text
      buyNowUrl: "https://shop.ghostfam.com/xxxxx/", // Button URL
      button_demo_text: "Live Demo", // Button Demo Text
      liveDemoUrl: "https://ghostfam.win/en/", //Button Demo URL
      productInfo: [
        // Product Info
        { name: "Ghost 5.0", info: "Ghost Custom Settings" },
        { name: "Ghost Native Search", info: "Ghost Native Comments" },
        { name: "Dark Mode", info: "Translation" },
      ],
      // Testimonial
      testimonial: {
        words:
          "Thanks for your Tanaflows theme, I just bought it and I enjoy it!",
        name: "Bastien Perez",
        website: "https://itpro-tips.com/",
        title: "Early supporter",
      },
      // Author of Product
      author: {
        name: "Cuong Tran",
        avatar:
          "https://www.gravatar.com/avatar/85c46d3eef7f54a3bcc31df774bf413f?s=250&r=x&d=mp",
        background_img:
          "https://ucarecdn.com/8b844593-81af-4541-9942-e014b1704b5c/1500x500",
        website: "https://heycuong.com",
        twitter: "https://twitter.com/cuongtranhq",
        subscribe: "https://ghostfam.com/en/#/portal/signup/free",
        bio: "Tanaflows theme creator and founder at ghostFam, I am a solopreneur who is passionate about blogging and making money online through my writing career.",
      },
      // Product owned by brand
      brand: {
        name: "ghostFam",
        avatar:
          "https://ucarecdn.com/9f5b446e-dd5b-4744-bb96-bd288eb6e215/ghostFamAvatar.webp",
        background_img:
          "https://ghostfam.com/en/content/images/size/w1024/format/webp/2023/09/Authorbox-banner.webp",
        website: "https://ghostfam.com",
        twitter: "https://twitter.com/ghostFamHQ",
        subscribe: "https://ghostfam.com/en/#/portal/signup/free",
        bio: "Publish with Profit. Transform your Words into Wealth",
      },
    };
  }
</script>

The code will render like this

3. Put a #product tag on it if you want it to show up on the navigation
4. Make it a feature to make the badge “hot”