Adding Products to Your Website

Overview

Once you have created your products in "Store › Products", you can display them on your live website for visitors to browse and purchase in two ways:

1. Add a "Store Module" to any page (Available on all plans): Embed a single product or a product list directly onto your homepage, landing page, or blog sidebar.
2. Publish "Store System Pages" (Exclusive to Pro and Business plans): Enable dedicated individual product pages (/product/...), a main shop page (/shop) that lists all your products, and product category pages (/shop/category/...).

---

How to Choose Between the 4 Product & Pricing Modules?

When you go to "Edit Website" and click "Add Module," you will see four modules related to products or pricing. Choose the one that best fits your sales scenario:

Product data within modules is read-only preview: The "Product Display" and "Plan Selection" modules pull data directly from your store backend. When you click these modules in the website editor, the panel only allows you to adjust heading levels (H1–H6) or switch the linked product. To modify product names, prices, specifications, or photos, click "Go to Settings" in the top-right corner of the panel to edit in the store backend. Changes will automatically sync across all pages after saving.

---

Two Ways to Add Product Modules to Standard Pages

Method 1: Add to a page with one click from the product list

1. Go to "Store › Products".
2. Find the product you want to list and click "Add to Page" in the right-hand menu.
3. Select the target page (e.g., homepage) and the module type. The system will add the product block to your page draft.

Method 2: Manually add in the website editor

1. Go to "Edit Website" and switch to the page where you want to place the product.
2. Click "Add Module" in the left sidebar and switch to the "Store" category.
3. Select "Product Display", "Plan Selection", or "Product Catalog" to add it to the canvas, then select the product or category to link in the right-hand panel.
4. Once you have verified the preview, click "Publish" in the top-right corner.

Why isn't the product module showing on the live website? If the linked product has no display images, all variants are set to out-of-stock, or the product has been archived, the module will be automatically hidden on the live site to prevent visitors from seeing incomplete sections. A reminder will appear in the editor panel.

---

Understanding the 3 Main Store System Pages (Pro & Business)

In "Edit Website", click "Page Management" in the left sidebar and switch to the "Store" tab. You will see three types of store-specific pages maintained automatically by the system (these system pages do not count toward your website's standard page limit):

Differences in "Product Catalog" click experience between Free and Paid plans

• Pro and Business plans: When visitors click a product card in the "Product Catalog," they are taken to the product's individual product page (/product/...) to view the full gallery, long-form sales descriptions, purchase info, and customer reviews.
• Free plan: Since individual product pages and the main shop page are not available, clicking a product card in the "Product Catalog" on the homepage or standard pages will trigger a "Quick Buy" drawer, allowing buyers to switch variants, view summaries, and checkout or add to cart without leaving the page.

---

Enabling Individual Product Pages & Using AI to Generate Long-form Sales Copy

To prevent new products from being exposed before you have finished setting up their layout, "Product Pages" are set to "Hidden" by default:

1. Publish a Product Page: Go to "Edit Website" › "Page Management" › "Store" tab. Find the product and click the eye icon on the right to toggle it to "Show," then click "Publish" in the top-right corner.
2. Use AI to automatically write long-form sales copy: When you first open a product page in the editor that doesn't have a detailed description yet, the system will ask: "This sales page has no content. Would you like AI to write it for you?"
   • Click "Let AI write it" (deducts 2 AI credits). AI will generate a structured Markdown sales copy (approx. 300–2,500 words, including pain points, core selling points, and FAQs) based on your product name, description, pricing, and brand memory.
   • After generation, you can freely edit the text, insert images, or embed videos in the editor. You can also add other modules like FAQs or testimonials below the product page.

---

Automatically Integrated "Purchase Information" Block

Below the purchase button in the "Product Display" module and on individual product pages, the system automatically derives and displays a "Purchase Information" block based on your backend settings. No manual maintenance is required:

• Payment Methods: Automatically lists all payment tools enabled in your checkout settings (e.g., Credit Card, Apple Pay, etc.).
• Shipping Methods & Free Shipping Threshold (Physical products only): Automatically lists enabled shipping methods, estimated delivery days (e.g., approx. 2-3 days), and store-wide free shipping thresholds (e.g., Free shipping on orders over NT$1,000).
• Delivery & Fulfillment Time: Digital products are automatically marked as Instant access after payment; physical products display the "Fulfillment Time" set in "Store › Settings › General" (e.g., Ships within 1-3 business days).
• E-Invoices: If you have enabled an invoice provider in "Website Settings › Invoices", it will automatically indicate E-invoice issued automatically after payment.
• Return Policy & Purchase Notes: If you have published a "Return Policy" page in "Page Management › Terms," a link will be automatically attached here, along with the "General Store Purchase Notes" and "Product-Specific Purchase Notes."

Related Documentation