This article completes: Allow front-end customers to select specifications and calculate the correct price (or request a quote without calculating the price).
Please have at least one product, see How to Publish a Product.
Prerequisites
- The edit page for the product has been opened.
- Quote Product: Usually only requires 'Specification Fields', no need for price lookup tables and calculation components.
- Purchasable Product: Choose 'Specification Fields', 'Price Lookup Table', and 'Calculation Components' to use in combination based on the pricing method.
Path
- Shop → Product Management → Enable Product.
- Click on the Pricing and Specifications tab above (it may be called Specification Fields when in inquiry mode or online purchase is not enabled).
- The default is Visual mode. Unless you are very familiar with the settings structure, do not switch to 'JSON Advanced'.
Under Visual, there are sub-tabs:
| Tab | When to Use |
|---|---|
| Specification Fields | Frontend form: size, material, style, file upload, quantity counter, etc. |
| Data Table Pricing | Use the 'Specification Combination × Quantity → Price' table (can be imported via CSV) |
| Calculation Components | Fixed base price, unit price × quantity, option surcharge, tiered pricing, formulas (can be used with data tables) |
| Estimate | Simulate the price after selecting specifications on the frontend using the current screen settings (even if not saved yet) |
Inquiry mode will not show Data Table Pricing, Calculation Components, or frontend quantity/amount related settings.
The bottom toolbar Save Draft/Publish will also save the pricing settings; a successful prompt will say 'Pricing and specifications settings have been saved.'
Advanced: You can use Export Bundle/Import Bundle to copy entire settings between products; please check before saving after import.
Specification Fields
Applicable: Each item that customers can select/fill in on the product page.
- Switch to Specification Fields.
- If blank, click Add Field (or import from bundle).
- Each field can be dragged to adjust the display order on the front end, and can also be moved up, copied, or deleted.
- Expand the field and fill in the table below.
Common Items for Each Field
| Item | Description |
|---|---|
| Display Label | The name seen on the front end, such as "Size" or "Material". |
| Field Name (API key) | For system identification, try not to change after saving. Automatically generated when added. |
| Type | See the table below. |
| Field Width | Takes up 1/3, 50%, or 100% of a row on the front end. |
| Number of Options Displayed Directly | Only applicable for single choice. Filling in 3 means only the first 3 options are displayed directly on the front end, with the rest included in the last box labeled "More" dropdown; leaving it blank will display all. The order of display is determined by the option sequence; if only one option will be hidden, all will be displayed directly on the front end. |
| Description (Optional) | Hint text below the label. |
| Required | Customers must fill/select to add to the cart or inquiry form. |
| Enabled | When disabled, it will not be displayed on the front end and will not be included in calculations (the field will still remain in the backend). |
Add options (option name, value, optional price increase) for dropdown, single choice, and multiple choice. Options can be reordered by dragging, copied, or deleted.
Options for dropdown/single choice can bind product images (select from the product media). When customers select that option, the left image on the product page will switch; please complete how to set product images first. Multiple choice does not support image binding.
How to choose the type
| Type (Screen Name) | Frontend Appearance | Typical Use |
|---|---|---|
| Single Choice | A group of buttons, only one can be selected; when there are many options, only a few are displayed, the rest are hidden under 'more' | Size, print surface |
| Dropdown Menu | Select one from a dropdown | When there are many options |
| Multiple Choice | Can select multiple | Additional processing |
| Text/Multiline Text | Allows customers to type | Custom text, remarks |
| Number/Quantity Counter | Numeric input box, or '－／＋' incrementer | Custom size, pages, quantities. Minimum, maximum, and step values can be set (all can be left blank) |
| Date | Select a date | Desired shipping date |
| File Upload | Customers upload files | Finished files (different from online design) |
| Design Editor | Enter online design | Requires platform authorization for Web-to-Print, see online design |
File upload can also set: maximum number of files, maximum file size, allowed file extensions. Please keep at least one format.
Selectable formats include PDF, JPG, PNG, TIFF, AI, EPS, PS, PSD, CDR, WEBP, HEIC, ZIP, RAR, 7Z. When all are checked (no restrictions), new formats added by the platform will also be automatically enabled. The system will check if the file content is indeed of that format during upload; files with changed extensions will be blocked.
Number and quantity counters can also set minimum value, maximum value, step value (all can be left blank):
- Number: If minimum value is not filled, the frontend minimum is 1; if step value is not filled, there is no restriction on decimals.
- Canvas Size: After checking the box for "Canvas Size" in the numeric field, this field will represent the width or height of the online design. The numbers entered by customers, as well as the minimum and maximum values here, are calculated based on the editor units of this product (mm, cm, or px), and the checked box will indicate the current unit. If minimum and maximum values are not filled in, the default canvas size is 10–1200 mm, displayed in the product unit (for example, 1–120 cm for cm). The unit only affects input and display; the output print file is always at actual size.
- Quantity Counter: Unfilled items will use the minimum, maximum, and step settings from this product's "Quantity Settings". The counter can also include units (e.g., sheets, books).
Conditional Display (Optional)
Fields or single options can enable Conditional Display Logic: For example, "Gold Foil" will only appear if "Gold Foil" is selected.
- Enable Conditional Logic, and select to Show or Hide when "Conditions are Met".
- Conditions can be set as "Another Field Equals a Certain Option"; multiple conditions can use AND or OR.
- If no conditions are added, the field/option will always be displayed.
There is no need to use conditions for the first listing; add them later if specifications become more complex.
Price Lookup Table
Suitable for: Prices are determined by the "Specification Combination + Quantity" lookup table (e.g., business cards: size × paper type × quantity → unit price).
- Switch to Price Lookup Table.
- In Specification Dimensions, click Add Dimension (e.g., "Size", "Material"). Dimension names correspond to table columns.
- Add rows to the table: each row is a set of specification values + Quantity + Price.
- You can fill in Quantity Unit (pieces, boxes, books, etc.), which will be displayed next to the quantity on the front end.
- Below each dimension, you can select how to present it on the front end:
- Front End: Button (Single Choice): Default value. You can fill in "Show how many directly"; if exceeded, the excess will be included in the last cell under "More" dropdown; leaving it blank will show all. Specification values will be automatically sorted by numerical size or alphabetical order, with the first few displayed first.
- Frontend: Dropdown Menu: Use when there are many specification values and you don't need to see them all at once.
If the data table already has a quantity column, the frontend quantity option will follow the table, and 'Quantity Settings' will be marked as not applicable.
Import using CSV all at once.
Suitable for when there are many rows:
- You can first check the Template or Export CSV to see the column format.
- The file must have Quantity and Price columns (English headers
qty/priceare also accepted). - The specification column names must match the dimensions you created.
- Click Import CSV. After importing, please check the screen before clicking save at the bottom.
Multilingual: The price comparison will still be based on the original specifications in the primary language (Traditional Chinese); other languages can have additional fields, with the column name being the specification name followed by _en or _ja, and only fill in display translation. Details are based on the screen 'CSV Upload Rules'.
You can search for specifications, quantities, or prices above the table for easy modification.
Bind specification values to product images.
Suitable for: Dimensions in the data table that change the appearance of the product, such as 'color/style'.
- First, go to the product Media tab to add real photos and save (see How to Set Product Images).
- Return to Data Table Price Check, and select a media for each specification value in Bind Specification Values to Product Images.
- When the front end selects that value, the left carousel will change the image. Dimensions without bound images (e.g., size) will not overwrite the already switched image.
Dropdown/single selection for specification fields can also bind the same batch of media in the options, following the same method.
Calculation Component
Suitable for: No complete price list, or a hybrid algorithm of 'base price + additional charges' (screen prompt: component charges will be summed with the price table query results).
- Switch to Calculation Component, click Add Component.
- Fill in Name, select Type, and confirm Enable.
| Type | Purpose |
|---|---|
| Fixed Amount (Base Price) | Adds a fixed amount regardless of specifications |
| Unit Price × Quantity | Unit price multiplied by customer quantity |
| Field Option Surcharge | Surcharge for options corresponding to a specific specification field |
| Tiered Pricing | Different unit prices based on quantity ranges |
| Custom Formula | Advanced. Use 'Insert Variable' to include purchase quantity, table dimensions, query unit price, and each specification field (including selected option prices, base fees, unit prices, as well as each option's own price, base fee, unit price). If the formula does not specify quantity, the result will be multiplied by the number of items purchased. If unfamiliar, please use the first four types first |
Components can also have conditional logic (only counted if conditions are met). You can drag to reorder, copy, or disable.
Quantity Settings (when there is no quantity in the data table)
In the pricing area, you can see Quantity Settings (when there is a quantity column in the data table, it will be determined by the table):
| Field | Description |
|---|---|
| Unit of Quantity | For example, sheets, copies, books |
| Minimum Quantity | Cannot be lower than this value on the front end |
| Maximum Quantity | Optional; cannot be less than the minimum quantity |
| Step Value | The interval for each increment or decrement, cannot exceed (maximum - minimum) |
Use "Trial Calculation" to check
- Switch to Trial Calculation.
- Select specifications and fill in the quantity like a customer.
- It will automatically calculate after selection; you can also press Execute Trial Calculation.
- File uploads/design draft fields are not included in the trial calculation (usually does not affect the price).
- If prompted "No calculable fields available", please add specification fields or data table dimensions first.
The trial calculation uses the currently being edited, unsaved settings. Be sure to save at the bottom after confirming everything is correct.
How to verify
- The backend estimated amount matches your expectations.
- The product page on the frontend shows the same specifications, required fields, and conditions as the backend.
- For purchased products: After selecting specifications, the price/quantity should match the estimate and can be added to the shopping cart.
- For inquiry products: Specifications can be selected and added to the inquiry list, but will not show a checkout amount estimate.
- After changing specifications, the old shopping cart may prompt 'Specifications have changed', and customers need to reselect - this is expected behavior.
Common issues
| Situation | What to do |
|---|---|
| The tab is called 'Specification Fields' but there is no price inquiry/component | The product is for inquiry, or the platform has not enabled online purchasing. This is expected. |
| No specifications on the frontend | Are the fields enabled? Are they hidden by conditional logic? Have they been saved? |
| Price mismatch | Use the estimate for the same set of specifications; check if the data table has corresponding rows and if the calculation components are enabled. |
| CSV import failed | Check the 'Quantity/Price' column names and dimension names; download the template first. |
| Unable to switch visualization | The structure in the advanced JSON is incomplete; revert to valid JSON or seek platform assistance, do not force cut. |