Add-on

Add-on

Add-on is to suggest service product on the checkout page and encourage customers to buy more before moving to Payment.
Let's explore how to set an Add-on.

Step 1: General Settings

Before creating an Add-on extension, you should set up the General settings first.       



1. Display Settings


  1. Offer main title: The center title for the add-on, for instance: "Recommended for you".
  2. Offer sub-title: The description line will be smaller and below the main title. For instance: "Here are some extras to complete your order".
  3. Title text alignment: Used to align the main title and sub-title of the add-on.

2. Layout


  1. Total offers displayed at a time: This app only allows showing a maximum of 3 offers to fit with performance.
  2. Enable slider buttons: Display next & previous buttons to navigate through offers.
  3. Display ADD button as outline style: Enable this option to show Add button in outline style.
  4. 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.
  5. Show product price: Allow to show product price on the Add-on.

3. List Add-ons

This part will show all of the product offers you've created. You can also manage the offers here.


  1. Status: Active/Inactive offer.
  2. Conditions: Show how many conditions are applied to the offer.
  3. Duplicate: Duplicate the offer to quick edit.
  4. Pen icon: Edit the offer.
  5. Bin icon: Remove/Delete the offer. 
Warning
Only one offer can be displayed at a time.
If you have multiple offers with the same conditionals, the latest created offer will display.

Step 2: Create Offer

1. 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.

2. Display conditions


  1. Display for all product: Show the Add-on no matter the trigger products the customers add to their cart.
  2. Display by conditions: You could add multiple conditions to show the Add-on.
    1. All rules pass: Only show the Add-on if all conditions are met.
    2. Any rules passes: The Add-on will display if one of those conditions is met.

3. Advanced settings


  1. 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.
  2. Automatic add to cart: This option could only work if the product price is zero without any discount.
  3. Start date: Define when the form should begin displaying.
  4. Set end date: Enable this option to schedule when the form will stop displaying.
  5. Enable repeat: Check this box to repeat the form display on specific days. You can choose the days of the week for recurring schedules.
Info
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.
  1. Step 1: Choose Checkout page > Choose Add app block > Select Add-on.

  1. 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.





Notes
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.

Info
If you need any assistance with this feature, please contact our support team or reach out through the live chat in the app portal.

    • Related Articles

    • Add & edit Fields

      Title Title is the heading of the contact form, you can change it to fit your form purpose. Description Description is a small paragraph under Title. You can use it to present the introduction or purpose of contact form. Fields In fields list, you ...

    • Add slideshow to other pages

      To add slideshows to other pages outside collection pages, you need to create slideshows in the "Other pages" section.  In your Collection Slideshow app, go to “Other Pages” and create new slideshow For all slideshows in this section, there is only ...

    • How to add scrollbar to your submenu?

      Warning: Basically, we DON'T suggest adding a scrollbar. Read reasons & other solutions here: Why we don't suggest scrollbar in menu?  For Flyout menu, can only add scroll bar if flyout menu has 1 level. How to add scrollbar to your submenu? But ...

    • Add Sections in Mobile Menu app

      Mobile Menu app supports 12 types of section: Menu Use this section to add your Links list. Section settings: Section title (optional): Enter a title for the section. This title will be displayed in the menu. Disable title: If you don't want to show ...

    • Add Mobile Menu app to your store

      After creating your menu in Mobile Menu app (not Smart Menu), you can go to Display settings tab to: Replace theme menu: select a current menu on your store to be replaced with Mobile Menu OR Add an extra menu separately with floating button, not ...