Add a Custom Banner to Checkout
Plans: All Plans Platforms: Shopify
AfterShip Personalization allows merchants to add Custom Banner to the checkout page to display important information to customers during checkout. Custom Banner can be set up and customized in the Checkout page section in the AfterShip Personalization admin.
In this tutorial, we will show you:
Custom banner setup
Custom banner widget installation
Navigate to Smart checkout > Checkout page > Smart content > Custom banner in your AfterShip Personalization admin
Click Edit
A custom banner editor will open with the following settings
Convert the status to Enabled for the custom banner to display
If you wish to display the custom banner to all the customers, select Show to all customer
If you want to display the custom banner to a specific set of customers, select Show to specific customers
Conditions represent the eligibility criteria of the customers to whom the custom banner will be shown.
The following conditions are currently available.
The date and time setting controls when the banner will display to customers based on the merchant's Shopify timezone. For example, suppose merchants have a promotion campaign from June 1st to June 3rd. In that case, they can set the promotion banner to notify customers and ensure it is only displayed between June 1st and June 3rd based on the date and time setting. Additionally, if merchants do not offer customer support from 00:00 to 13:00 daily, they can use the banner to inform customers of this and set the date and time to recur every day from 00:00 to 13:00.
Merchants can set up conditions like
a. Custom banner will be displayed to the customers on the checkout IF CONDITION A and CONDITION B are met (Both conditions should be met)
b. Custom banner will be displayed to the customers on the checkout IF CONDITION A and CONDITION B or IF CONDITION C and CONDITION D are met (Either set of the conditions (A+B or C+D should be met)
c. Custom banner will be displayed to the customers on the checkout IF CONDITION A or CONDITION B are met (Either A or B should be met)
d. Custom banner will be displayed to the customers on the checkout IF CONDITION A or CONDITION B or CONDITION C or CONDITION D are met (Either of the conditions A, B, C or D should be met)
e. Custom banner will be displayed to the customers on the checkout IF CONDITION A or CONDITION B and CONDITION C are met (Either A or B+C should be met)
f. Custom banner will be displayed to the customers on the checkout IF CONDITION A and CONDITION B or CONDITION C are met (Either A+B or C should be met)
If the conditions configured by you are met, the corresponding action would be the custom banner displayed on the checkout page.
1. Banner type
Normal: To convey regular product changes, developments, promotions, discounts, and customer service timings
Info: To convey essential information about changes in shipping time, convenience charges or additional cost of shipping
Warning: To convey out-of-stock, coupon invalidity, change in shipping times, and so on
Success: To convey a thank you or success message for order confirmation, successful payment, or order placement
Critical: To display messages critical to the fulfillment or delivery of the order, like business days for order processing/fulfillment, estimated delivery time, or payment failure
Select the checkbox to Allow customers to close the banner
Select the checkbox to Show collapsible description
2. Content
Select the Content font size from the dropdown
Customize the content of the custom banner based on your marketing or end goal, including the title and description
For both title and description, you get 200 characters
Merely enabling the Custom banner on AfterShip Personalization will not activate the banner on checkout. You need to install the AfterShip Personalization app on the Shopify checkout editor to enable and display the custom banner widget you’ve configured on the checkout page.
Step 1: Enable the widget in AfterShip
Enable the “Custom banner” in the AfterShip Personalization admin and customize its settings.
Step 2: Open the Shopify checkout editor
Select a page where you want to show the banner and click “Add app” in the left panel.
Step 3: Select “AfterShip Smart Content”
Step 4: Select the content type
Click the dropdown menu and choose “Custom banner”.
Step 5: Allow the app to block checkout
Tick the checkbox to ensure your custom fields work properly at checkout.
Step 6 (optional): Include the app in Shop Pay
Tick the checkbox if Shop Pay is activated for your store.
Step 7: Adjust the widget's location
Drag and drop the widget to your desired location in the left panel. Use the preview in the top right to ensure it looks perfect.
Step 8: Save your Shopify theme
Step 9: Hit Save
If you have any queries, feel free to connect with our support team for quick assistance.
Overview
AfterShip Personalization allows merchants to add Custom Banner to the checkout page to display important information to customers during checkout. Custom Banner can be set up and customized in the Checkout page section in the AfterShip Personalization admin.
What you’ll learn
In this tutorial, we will show you:
Custom banner setup
Custom banner widget installation
Custom banner setup
Navigate to Smart checkout > Checkout page > Smart content > Custom banner in your AfterShip Personalization admin
Click Edit
A custom banner editor will open with the following settings
A. Status
Convert the status to Enabled for the custom banner to display
B. Display rule
If you wish to display the custom banner to all the customers, select Show to all customer
If you want to display the custom banner to a specific set of customers, select Show to specific customers
C. Conditions
Conditions represent the eligibility criteria of the customers to whom the custom banner will be shown.
The following conditions are currently available.
| Type | Logic | Definition |
|---|---|---|
| Cart value | =, >, <, ≥, ≤ | The total value of the product(s) in the cart |
| No. of products in cart | =, >, <, ≥, ≤ | The total number of products in the cart |
| Products in cart | Include, Do not include | You can select specific products to be included or excluded from the cart |
| Country/region | Is any of, Is none of | Country or region of the customer(s) to whom the product(s) will be shipped You can select specific countries and regions from where the products will be shipped/delivered or vice-versa |
| Date and time | Is before, Is after, Is between (Date range), Is recurring (Date range and day frequency) | Date and time when the custom banner will *be shown to the customers and when it will end or for long it will run The timezone is based on your Shopify settings |
The date and time setting controls when the banner will display to customers based on the merchant's Shopify timezone. For example, suppose merchants have a promotion campaign from June 1st to June 3rd. In that case, they can set the promotion banner to notify customers and ensure it is only displayed between June 1st and June 3rd based on the date and time setting. Additionally, if merchants do not offer customer support from 00:00 to 13:00 daily, they can use the banner to inform customers of this and set the date and time to recur every day from 00:00 to 13:00.
Merchants can set up conditions like
a. Custom banner will be displayed to the customers on the checkout IF CONDITION A and CONDITION B are met (Both conditions should be met)
b. Custom banner will be displayed to the customers on the checkout IF CONDITION A and CONDITION B or IF CONDITION C and CONDITION D are met (Either set of the conditions (A+B or C+D should be met)
c. Custom banner will be displayed to the customers on the checkout IF CONDITION A or CONDITION B are met (Either A or B should be met)
d. Custom banner will be displayed to the customers on the checkout IF CONDITION A or CONDITION B or CONDITION C or CONDITION D are met (Either of the conditions A, B, C or D should be met)
e. Custom banner will be displayed to the customers on the checkout IF CONDITION A or CONDITION B and CONDITION C are met (Either A or B+C should be met)
f. Custom banner will be displayed to the customers on the checkout IF CONDITION A and CONDITION B or CONDITION C are met (Either A+B or C should be met)
If the conditions configured by you are met, the corresponding action would be the custom banner displayed on the checkout page.
D. Settings
1. Banner type
Normal: To convey regular product changes, developments, promotions, discounts, and customer service timings
Info: To convey essential information about changes in shipping time, convenience charges or additional cost of shipping
Warning: To convey out-of-stock, coupon invalidity, change in shipping times, and so on
Success: To convey a thank you or success message for order confirmation, successful payment, or order placement
Critical: To display messages critical to the fulfillment or delivery of the order, like business days for order processing/fulfillment, estimated delivery time, or payment failure
Select the checkbox to Allow customers to close the banner
Select the checkbox to Show collapsible description
2. Content
Select the Content font size from the dropdown
Customize the content of the custom banner based on your marketing or end goal, including the title and description
For both title and description, you get 200 characters
Custom banner widget installation
Merely enabling the Custom banner on AfterShip Personalization will not activate the banner on checkout. You need to install the AfterShip Personalization app on the Shopify checkout editor to enable and display the custom banner widget you’ve configured on the checkout page.
Step 1: Enable the widget in AfterShip
Enable the “Custom banner” in the AfterShip Personalization admin and customize its settings.
Step 2: Open the Shopify checkout editor
Select a page where you want to show the banner and click “Add app” in the left panel.
Step 3: Select “AfterShip Smart Content”
Step 4: Select the content type
Click the dropdown menu and choose “Custom banner”.
Step 5: Allow the app to block checkout
Tick the checkbox to ensure your custom fields work properly at checkout.
Step 6 (optional): Include the app in Shop Pay
Tick the checkbox if Shop Pay is activated for your store.
Step 7: Adjust the widget's location
Drag and drop the widget to your desired location in the left panel. Use the preview in the top right to ensure it looks perfect.
Step 8: Save your Shopify theme
Step 9: Hit Save
If you have any queries, feel free to connect with our support team for quick assistance.
Updated on: 13/05/2024
Thank you!