Brand Icon ScaffolderJS

← Back to Documentation

Managing Your Products & Pricing

Audience: Site owners (end users)
Related: Products & Pricing API (technical)

This guide explains how to add and manage products and pricing for your site in ScaffolderJS.

Where to Find Product Management

  1. Go to My Sites (or Home).
  2. On your site card, open the More actions menu (⋯) and choose Products.
  3. You’ll see:
    • A list of your products
    • A list of products
    • Buttons to manage Categories and Pricing (custom prices in other currencies)

Setting Up: Categories First

Products belong to categories. Create at least one category before adding products.

  1. Go to Products for your site.
  2. Click the Categories button to open the categories list.
  3. Click Create Category (or Add Category).
  4. Enter:
    • Name — e.g. "Plans", "Services", "Courses"
    • Description (optional)
  5. Save.

Creating a Product

  1. From the products list, click Add Product or Create Product.
  2. Fill in:
    • Name — Product or plan name (required)
    • Description — Short summary
    • Category — Choose from your categories (create categories first)
    • Type — One off, Subscription Trial, Subscription Silver/Gold/Platinum
    • Billing Cycle — None, Daily, Weekly, Monthly, or Yearly
    • Price (USD) — Base price in dollars
    • Sale Price (optional) — Promotional price; you can add sale text (e.g. "Limited Time")
    • Features — Add key-value features (e.g. "storage" → "10 GB", "support" → "Email support")
    • Product Images — Upload one or more images; add alt text for accessibility
    • Enabled — On to show on your site, off to hide
  3. Save.

Features

Features are shown on your pricing cards or table. You have two ways to manage them:

  1. List-based Editor: Use the Product Features Editor to add, edit, or remove key-value pairs (e.g., key: storage, value: 10 GB) one by one.
  2. JSON Editor: For advanced users or quick bulk-editing, you can switch to the JSON input mode to paste or edit the raw JSON format of your features list.

Each feature is displayed in the pricing section when the product is shown on your site.

Adding Product Images

  1. When creating or editing a product, use the Product Images section.
  2. Click the file input to choose one or more images.
  3. Add alt text for accessibility.
  4. Reorder with the up/down buttons.

Editing and Deleting Products

  • Edit: Open the product and click Save after changing fields.
  • Delete: Use the delete action (products are soft-deleted so they can be restored if needed).

Custom Pricing (Multiple Currencies)

If you need prices in other currencies (e.g. GBP, EUR):

  1. Go to Products for your site and click the Pricing button.
  2. Find the product in the list.
  3. Click Add Price (or edit an existing price) and set the currency and amount.

Showing Products on Your Site

  1. In the Site Builder, add or edit a page (e.g. "Pricing").
  2. Add a pricing section (pricing-cards, pricing-table, pricing-toggle, etc.).
  3. Turn on Fetch pricing data from API.
  4. Leave Use this site's products on (default) — your products will load automatically.
  5. Choose Product type (one-time, subscription, or all).
  6. Save and build your site.

You do not need to enter an API endpoint or site ID — the system uses your site automatically, the same way it does for your blog.

Tips

  • Create categories before products so you can organize them.
  • Use features to highlight what’s included (storage, support, etc.).
  • Add images to make products more engaging.
  • Use sale prices to show promotions.
  • Keep Enabled off for products you’re not ready to show yet.