Add-on
Add-on is to suggest service products on the checkout page and encourage customers to buy more before moving to Payment.
Let's explore how to set up an Add-on.
Before creating an Add-on extension, you should set up the General settings first.
Display Settings
Offer main title: The center title for the add-on, for instance: "Recommended for you".
Offer sub-title: The description line will be smaller and below the main title. For instance: "Here are some extras to complete your order".
Title text alignment: Used to align the main title and sub-title of the add-on.
If you would like to show different title and sub-title for each Add-on entry, please contact our team support to help.
Layout
Total offers displayed at a time: This app only allows showing a maximum of 3 offers to fit with performance.
Enable slider buttons: Display next & previous buttons to navigate through offers.
Display ADD button as outline style: Enable this option to show Add button in outline style.
Enable go to product link by clicking on product image & title: Allow directing your customers to the product page when they click on the product image & title.
Show product price: Allow to show product price on the Add-on.
List Add-ons
This part will show all of the product offers you've created. You can also manage the offers here.
Status: Active/Inactive offer.
Conditions: Show how many conditions are applied to the offer.
Duplicate: Duplicate the offer to quick edit.
Pen icon: Edit the offer.
Bin icon: Remove/Delete the offer.
Product add-ons
You can select the product you want to show in the Add-on. Please note that you can only select one variant of the product.
Display conditions
Display for all product: Show the Add-on no matter the trigger products the customers add to their cart.
Display by conditions: You could add multiple conditions to show the Add-on.
All rules pass: Only show the Add-on if all conditions are met.
Any rules passes: The Add-on will display if one of those conditions is met.
Advanced settings
Limit the number of product add-ons buyers can add in one order: If you have multiple products in the Add-on and want to limit the number of product that customer could add, please tick on this option and type the number in the label below.
Automatic add to cart: This option could only work if the product price is zero without any discount.
Start date: Define when the form should begin displaying.
Set end date: Enable this option to schedule when the form will stop displaying.
Enable repeat: Check this box to repeat the form display on specific days. You can choose the days of the week for recurring schedules.
If you want to auto add a product that has a original price, please contact our support team to help.
Before previewing the Add-on, you will need to add it to your Checkout page in Checkout editor. Please go to the your theme customization and follow our steps to add Add-on.
Step 1: Choose Checkout page > Choose Add app block > Select Add-on.
Step 2: You can consider adding the Add-on ID in the Entry ID label if you have multiple Add-on sections.
You can also remove this feature by clicking on the bin icon at the bottom right and change the position of this Add-on by holding the item and dragging it to the place you want.
If you have only one Add-on, you don't have to fill the Entry ID. Our app will auto show the Add-on once the condition is reached.
In case you have multiple Add-ons and want to show multiple sections or display each Add-on in different positions, please kindly type the Add-on ID to the Entry ID label. You can find the Add-on ID at the preview section in Add-on settings.
If you need any assistance with this feature, please send us a ticket or reach out through the live chat in the app portal.
Let's explore how to set up an Add-on.
General Settings
Before creating an Add-on extension, you should set up the General settings first.
Display Settings
Offer main title: The center title for the add-on, for instance: "Recommended for you".
Offer sub-title: The description line will be smaller and below the main title. For instance: "Here are some extras to complete your order".
Title text alignment: Used to align the main title and sub-title of the add-on.
If you would like to show different title and sub-title for each Add-on entry, please contact our team support to help.
Layout
Total offers displayed at a time: This app only allows showing a maximum of 3 offers to fit with performance.
Enable slider buttons: Display next & previous buttons to navigate through offers.
Display ADD button as outline style: Enable this option to show Add button in outline style.
Enable go to product link by clicking on product image & title: Allow directing your customers to the product page when they click on the product image & title.
Show product price: Allow to show product price on the Add-on.
List Add-ons
This part will show all of the product offers you've created. You can also manage the offers here.
Status: Active/Inactive offer.
Conditions: Show how many conditions are applied to the offer.
Duplicate: Duplicate the offer to quick edit.
Pen icon: Edit the offer.
Bin icon: Remove/Delete the offer.
Create Offer
Product add-ons
You can select the product you want to show in the Add-on. Please note that you can only select one variant of the product.
Display conditions
Display for all product: Show the Add-on no matter the trigger products the customers add to their cart.
Display by conditions: You could add multiple conditions to show the Add-on.
All rules pass: Only show the Add-on if all conditions are met.
Any rules passes: The Add-on will display if one of those conditions is met.
Advanced settings
Limit the number of product add-ons buyers can add in one order: If you have multiple products in the Add-on and want to limit the number of product that customer could add, please tick on this option and type the number in the label below.
Automatic add to cart: This option could only work if the product price is zero without any discount.
Start date: Define when the form should begin displaying.
Set end date: Enable this option to schedule when the form will stop displaying.
Enable repeat: Check this box to repeat the form display on specific days. You can choose the days of the week for recurring schedules.
If you want to auto add a product that has a original price, please contact our support team to help.
Preview
Before previewing the Add-on, you will need to add it to your Checkout page in Checkout editor. Please go to the your theme customization and follow our steps to add Add-on.
Step 1: Choose Checkout page > Choose Add app block > Select Add-on.
Step 2: You can consider adding the Add-on ID in the Entry ID label if you have multiple Add-on sections.
You can also remove this feature by clicking on the bin icon at the bottom right and change the position of this Add-on by holding the item and dragging it to the place you want.
If you have only one Add-on, you don't have to fill the Entry ID. Our app will auto show the Add-on once the condition is reached.
In case you have multiple Add-ons and want to show multiple sections or display each Add-on in different positions, please kindly type the Add-on ID to the Entry ID label. You can find the Add-on ID at the preview section in Add-on settings.
If you need any assistance with this feature, please send us a ticket or reach out through the live chat in the app portal.
Updated on: 19/01/2025
Thank you!