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 a product ready, see How to Publish a Product.
Prerequisites
- The editing page for the product has been opened.
- Inquiry Product: Usually only requires 'Specification Fields', no need for Data Table Pricing and Calculation Components.
- Purchasable Product: Select 'Specification Fields', 'Data Table Pricing', and 'Calculation Components' according to the pricing method to use in combination.
Path
- E-commerce → Product Management → Enable product.
- The tabs above, in order after Media, are Price Table, Specification Fields, Calculation Components, and Estimation (when inquiring or not enabling online purchase, only Specification Fields is available).
- Default is Visual mode. Unless you are very familiar with the setting structure, do not switch to 'JSON Advanced'.
The four tabs share the same settings, switching tabs will not lose unsaved changes:
| Tab | When to Use |
|---|---|
| Specification Fields | Frontend form: size, material, style, file upload, quantity counter, etc. |
| Price Table | Use the 'Specification Combination × Quantity → Price' table (can be imported via CSV) |
| Calculation Components | Fixed reserve price, unit price × quantity, option surcharge, tiered pricing, formulas (can be used with the price table) |
| Estimation | Simulate the price after selecting specifications on the frontend using the current screen settings (even if not saved) |
Inquiry mode will not display Price Table, Calculation Components, or frontend quantity/amount related settings.
The bottom toolbar Save Draft/Publish will also save the pricing settings; upon success, it prompts 'Pricing and specification settings saved'.
Copy settings between products.
The export/import in the upper right corner of each tab only processes the settings of that tab, and will not affect other tabs:
| Tab | Button | Included Content |
|---|---|---|
| Price Table | Export/Import Table Settings | Price list, specification dimensions, front-end display, unit of quantity, specification value binding with images and templates |
| Specification Fields | Export/Import Specification Fields | All specification fields and quantity settings |
| Calculation Components | Export/Import Calculation Components | All calculation components |
- The 'Trial Calculation' tab does not have export/import.
- An old complete bundle file can also be imported in a single tab, which will only apply to that tab's part.
- Files exported from other tabs cannot be imported here; the screen will prompt which tab to go to.
- After importing calculation components, if there are components that use specification fields not available for this product, the screen will prompt you to go to Calculation Components to reselect the fields.
- To copy the entire set (including shipping rules and other settings): switch to JSON Advanced, and use Export Complete Bundle/Import Complete Bundle.
Importing will only change the settings on the screen, please check first and then click save at the bottom.
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 click Import Specification Fields to bring in from exported files of other products).
- Each field can be dragged to adjust the order displayed 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 | Occupies 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 directly displayed on the front end, with the rest included in the last box under "More" dropdown; leaving it blank will display all. The order of display is determined by the option sequence; if only one option will be collapsed, 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 | If turned off, it will not be displayed on the front end and will not be included in calculations (the field will still remain in the backend). |
For dropdown, single choice, and multiple choice, you need to add options (option name, value, optional additional price). Options can be reordered by dragging, copied, or deleted.
The options for dropdown/single choice can bind product images (select from the media of this product). When customers select that option, the image on the left side of 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, printing surface |
| Dropdown Menu | Select one from a dropdown | When there are many options |
| Multiple Choice | Can check multiple | Additional processing |
| Text/Multi-line 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 | Already completed 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.
The selectable formats include PDF, JPG, PNG, TIFF, AI, EPS, PS, PSD, CDR, WEBP, HEIC, ZIP, RAR, 7Z. When all are checked (no restrictions), any formats added by the platform in the future will also be automatically enabled. During upload, the system will check if the file content is indeed of that format; files with changed extensions will be blocked.
Numbers and quantity counters can also set minimum value, maximum value, and step value (all can be left blank):
- Number: If no minimum value is filled, the frontend minimum is 1; if no step value is filled, there is no restriction on decimals.
- As Canvas Size: After checking the box for "As Canvas Size" in the numeric field, this field will represent the width or height of the online design canvas. The numbers entered by the customer, as well as the minimum and maximum values here, are calculated based on the editor units of this product (mm, cm, or px), with the checked area indicating the current unit. If no minimum or maximum values are filled in, the canvas defaults to 10–1200 mm and is displayed in product units (for example, 1–120 cm for cm). The unit only affects input and display; the output print file is always in original 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 complex.
Batch edit options using CSV
Suitable for: many options, need to adjust prices or supplement translations at once.
- Click Export CSV (or Template to see the format) in the upper right corner of the Specification field.
- Edit using a spreadsheet. One row is one option; fields without options like text or date occupy one row only, leave the option column blank.
- Click Import CSV, check the screen, then press save at the bottom.
| Field | Description |
|---|---|
| Field Code | Corresponding field name (API key), required. Codes not found will be added as new fields. |
| Field Name | Frontend display label; leave blank to not change. |
| Type | select, radio, checkbox, text, number, textarea, counter, file-upload, date; leave blank to not change. |
| Required | Fill in "Yes" or "No"; leave blank to not change. |
| Option Name/Option Value | Corresponding existing options by option value; if not found, it will be added. When the option value is left blank, use the option name. |
| Option Price Increase | Number; leave blank to not change. |
- Import will only add and update, not delete fields or options. To delete, please operate on the screen.
- Conditions display, option binding images, binding printing templates, and other settings not in CSV will be retained.
- For multilingual sites, you can add translations in the fields by appending
_enor_jato the field names; exports will only include the languages enabled on this site. - When import fails, the screen will indicate which row and which field has an issue.
Price Lookup Table
Suitable for: Prices determined by "Specification Combination + Quantity" (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 will correspond to table columns.
- Add rows in the table: each row consists of 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.
- Select the front-end display method for each dimension:
- Front-end: Button (single choice): Default value. You can fill in "directly display how many"; any excess will be included in the last box under "more" dropdown; leaving it blank will display all. The specification values will be automatically sorted by number size or alphabetical order, showing the first few items.
- Front-end: 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 front-end quantity options will be based on the table, and "Quantity settings" will be marked as not applicable.
Import using CSV at once.
Suitable for when there are many rows:
- You can first 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 name must match the dimensions you created.
- Click Import CSV. After importing, please check the screen and then click save at the bottom.
Multilingual: The price comparison will still be based on the original specification in the main language (Traditional Chinese); other languages can have additional columns, with the column name being the specification name followed by _en or _ja, only fill in Display translation. Export CSV and Template will only include the languages enabled on this site; a single language site will not show translation columns. Translation fields that are not filled during import will retain the original translation. Details are based on the screen 'CSV Upload Rules'.
You can search for specifications, quantities, or prices at the top of the table for easy modification.
Bind specification values to product images.
Suitable for: Dimensions in the data table that will change the appearance of the product, such as 'Color/Style'.
- First, go to the product Media tab to add actual photos and save (see How to set product images).
- Return to Data Table Price Check, scroll down to below the price row, and open Bind specification values to product images (default collapsed; when bound, 'N items set' will be displayed next to the title), and select a media for each specification value of this product.
- When selecting this value at the front end, the left carousel will switch images. Dimensions without bound images (e.g., size) will not overwrite the switched images.
The dropdown/single selection in the specification field can also bind the same batch of media in the options, following the same method.
Calculation component
Suitable for: No complete price list, or hybrid algorithm of 'listed price + additional price' (screen prompt: component price will be summed with the data table pricing results).
- Switch to Calculation component, click Add component.
- Fill in Name, select Type, and confirm Enable.
| Type | Purpose |
|---|---|
| Fixed amount (reserve price) | Adds a fixed amount regardless of specifications |
| Unit price × Quantity | Unit price multiplied by customer quantity |
| Field option price increase | Price increase 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, data table dimensions, pricing table unit price, and each specification field (including the selected option's price, base fee, unit price, and each option's own price, base fee, unit price). If the formula does not specify quantity, the result will be multiplied by the purchase quantity. If unfamiliar, please start with the first four types |
Components can also have conditional logic (only counted if conditions are met). You can drag to reorder, copy, or disable.
There are many ranges for tiered pricing. You can click Export Range next to the range title of the component (click Template first if there are no ranges). After editing in a spreadsheet, click Import Range. The CSV has three columns: Quantity Start, Quantity End (leave blank for no upper limit), and Price. Importing will completely replace the original ranges of this component, so please check before clicking save at the bottom. Other types of components do not have CSV; to copy the entire set, use the Export/Import Calculation Component above.
Quantity Settings (when there are no data table quantities)
In the pricing area, you can see Quantity Settings (when there are data table quantity rows, it will be determined by the table):
| Field | Description |
|---|---|
| Quantity Unit | For example, sheets, portions, books |
| Minimum Quantity | Cannot be lower than this value in the front end |
| Maximum Quantity | Optional; cannot be less than the minimum quantity |
| Step Value | The interval for each increase or decrease, cannot exceed (maximum - minimum) |
Use 'Trial Calculation' to check
- Switch to Trial Calculation.
- Select specifications and fill in quantities like a customer.
- After selection, it will automatically calculate; you can also click Execute Trial Calculation.
- File uploads/design draft fields are not included in the calculation (usually does not affect the price).
- If prompted "No calculable fields available", please add specification fields or data table dimensions first.
The calculation uses the current settings that are being edited and not yet saved. Be sure to click save at the bottom after confirming everything is correct.
How to verify
- The backend calculation amount matches your expectations.
- On the frontend, the product page displays specifications, required fields, and conditions that match the backend.
- For purchasing products: After selecting specifications, the price/quantity matches the calculation and can be added to the shopping cart.
- For inquiry products: Specifications can be selected and added to the inquiry list, there will be no checkout amount calculation.
- After changing the 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 |
|---|---|
| Only the "Specifications" tab is present, no price check/components/calculation | The product is for inquiry, or the platform has not enabled online purchase. This is expected. |
| No specifications on the front end | Are the fields enabled? Are they hidden by conditional logic? Have they been saved? |
| Price mismatch | Use calculations for the same set of specifications; check if the data table has corresponding rows and if the calculation components are enabled. |
| CSV import failed | Data table price check: Verify the "Quantity/Price" column names and dimension names. Specification fields: Ensure each row has a "Field Code." Tiered intervals: Confirm that both "Starting Quantity" and "Price" are numbers. You can download the template for comparison. |
| Unable to switch visualization | The structure in advanced JSON is incomplete; revert to valid JSON or seek platform assistance, do not force cut. |