Product Add-Ons

Setup Product Add-Ons

You can manage product add-ons setting from here:

Go to Products > Add-Ons and then select Create New.
You can add product-level add-ons by editing a product.

Field types

Add-on fields are added the same way for both per-product and global add-ons. This panel is found on a new or existing product. To add your first add-on, click the “Add field” button. This will insert a blank add-on:

 

Select a field type from the top-most select box. As of writing, these options are available:

  • Multiple choice – Shows a list of options the user can choose from. Display as dropdowns, images, or radio buttons.
  • Customer-defined price – Shows a field where users can enter a numerical value that is added to the product price.
  • Quantity – Shows a spinner where users can input a number.
  • Checkboxes – Shows a checkbox or checkboxes that can be ticked/unticked by a customer.
  • Short text – There are five in-built types. This shows a text field where users can enter either any text; just letters; just numbers; both; or an email address only.
  • Long text – This shows a text field where users can write multiple lines of text (character limit possible).
  • File upload – Allows users to upload a file.
  • Heading – Add a heading between add-ons to group them into sections.

Multiple choice

Customers choose only one option from a set of predefined options. Examples: Color or size.

  • Title: Format the title as a Label or Heading, or hide it.
  • Display as: Choose how to present options to customers. Display as Dropdowns, Images, or Radio Buttons (see below).
  • Add a description: Displays more information about the add-on underneath the heading.
  • Required field Prevents product from being added to cart if an option is not selected.
  • Options: Add a label for each option as well as a price if needed. Calculate the price as a flat fee regardless of quantity, per quantity ordered, or, charge a percentage of the total. To remove an option row, click the ‘X’.

Note: You must add a Label for each option, so the information shows when viewing the order and is passed through in the confirmation email to the customer.

If the display option is set to images, an image upload icon will show up next to each option.

Website display

Radio buttons:

Dropdown

 

Images

Checkboxes

Customers choose one or multiple options. Examples: Gift wrapping, card, or upgrades.

 

  • Title: Format the title as a Label or Heading, or hide it.
  • Add a description: Displays more information about the add-on underneath the heading.
  • Required field Prevents product from being added to the cart if an option is not selected.
  • Options: Add a label for each option as well as a price if needed. Calculate the price as a flat fee regardless of quantity, per quantity ordered, or, charge a percentage of the total.

Note: You must add a Label for each option, so the information shows when viewing the order and is passed through in the confirmation email to the customer.

Website display

Short text

Customers can enter a single line of text. Examples: Email address, names, and engraving text.

  • Title: Format the title as a Label or Heading, or hide it.
  • Restriction: Limit the type of characters customers can enter from Any Text, Only Letters, Only Numbers, Only Letters and numbers, only Email Address.
  • Add description: Displays more information about the add-on underneath the heading.
  • Required field: Prevents product from being added to the cart if the field is empty.
  • Limit character length: Specify the minimum/maximum number of characters.
  • Adjust price: Add an additional cost to the add-on. Calculate the price as a flat fee regardless of quantity, per quantity ordered, or, charge a percentage of the total.

Website display

Long text

Customers can enter multiple lines of text. Examples: A gift note, an address, or special instructions.

  • Title: Format the title as a Label or Heading, or hide it.
  • Add description: Displays more information about the add-on underneath the heading.
  • Required field: Prevents product from being added to the cart if the field is empty.
  • Limit character length: Specify the minimum/maximum number of characters.
  • Adjust price: Add an additional cost to the add-on. Calculate the price as a flat fee regardless of quantity, per quantity ordered, or, charge a percentage of the total.

Website display

File upload

A customer can upload their own file. Example: To create custom designs on t-shirts, mugs, or business cards.

  • Title: The title is displayed above the multiple choice options. You can format the title as a Label, Heading, or hide it.
  • Add description: Displays more information about the add-on underneath the heading.
  • Required field: Prevents product from being added to the cart if the field is empty.
  • Adjust price: Add an additional cost to the add-on. Calculate the price as a flat fee regardless of quantity, per quantity ordered, or, charge a percentage of the total.

Website display

Customer-defined price

A customer can set their own price, which is added to the total. Example: Donations, tip.

  • Title: Format the title as a Label or Heading, or hide it.
  • Add description: Displays more information about the add-on underneath the heading.
  • Required field: Prevents product from being added to the cart if the field is empty.
  • Limit price range:  Specify the minimum/maximum price.

Quantity

Customers can select a quantity. Example: Used for ordering additional items that go with the main product.

  • Title: Format the title as a Label or Heading, or hide it.
  • Add description: Displays more information about the add-on underneath the heading.
  • Required field: Prevents product from being added to the cart if the field is empty.
  • Limit quantity range: Specify the minimum/maximum quantity.
  • Adjust price: Add an additional cost to the add-on. Calculate the price as a flat fee regardless of quantity, per quantity ordered, or, charge a percentage of the total.

Heading

Use headings to separate your add-ons into sections.

Website display

Pricing

Prices can increase or decrease the total cost of the product. Three price options are available:

  • Flat fee: Price applied only once, regardless of the quantity ordered.
  • Quantity based: Price is multiplied by the product quantity.
  • Percentage based: Calculates a percentage of the total.

Re-order add-ons

You can change the order of add-ons displayed within groups by dragging and dropping.

 

Importing / Exporting add-ons

Add-ons can be exported and imported using the buttons when editing a per-product or global add-on. Click ‘export’ to export the existing fields as serialized data. Then click import to paste the serialized data and append them to your existing add-ons.

Frontend display and viewing order add-ons

On the frontend, add-ons are shown on the single product page above the cart button. To see how your add-ons look, select “Preview Changes”:

Per-Product Add-Ons

Per-product add-ons only display for the product they are added to. Edit one of your products to add product-level add-ons. They appear in the Product Data panel under the subsection “Add-ons.”

Important Note

Add-ons can be applied to variable products, but can only be defined at the product level. Example: You cannot have an add-on for a specific variation of a variable product — for a blue shirt only.

This is how it will be displayed in the cart page: