Set up Smart Cart
Plans: All plans Platforms: Shopify
AfterShip Personalization’s Smart Cart allows you to provide a personalized experience for shoppers by replacing your Shopify theme’s default cart drawer with a customized and on-brand fly-out cart. The smart cart feature is packed with full-stacked customization options, powerful AI and merchandising rules, and fully customizable styles for brands to set up out-of-the-box campaigns in the smart cart without writing long strings of coding.
AfterShip Personalization’s Cart Drawer widget requires additional steps during onboarding to ensure compatibility with various Shopify themes. The new Smart Cart does not face common compatibility issues with Shopify themes and can be tailored to your specific needs using a no-code, low-code, or custom-code approach to take your upsell game to the next level.
In this article, we will discuss:
Access smart cart
Smart cart editor
Smart cart editor: Sections
Smart cart editor: Styles
Revenue attribution
Go to Smart cart in your AfterShip Personalization admin.
Click Create cart and choose from the pre-built cart themes. Currently, you can enable and set up a Basic cart suitable for brands catering to different types of industries. More themes will be available soon.
Click Create to access the basic smart cart editor.
Status: Enable status of the smart cart from the dropdown menu at the top.
Title: Click the pencil icon to rename the cart for easy reference.
Configure the settings of the smart cart as per your requirements. There are 2 settings to set up the recommendation rules and style settings.
Under the Sections settings, configure
Input the header name, adjust the title padding, select the layout, and set the title’s font style, size, and weight.
Under cart items, entice your shopper with customized upsell offers to boost recurring revenue, enhance customer retention, and improve AOV.
Click + Add block.
Set up Subscription upsell or Upsell items offers to improve your brand’s opportunities for improving AOV and revenue generation.
Select Subscription upsell to encourage customers to upgrade their one-time purchases (products in their cart) to discounted subscriptions.
a. Select the checkbox Allow downgrade to one-time purchase to give customers the option to downgrade to a one-time purchase. The option of One-time purchase will appear in the dropdown when the customer clicks on the subscription upsell CTA to choose the delivery frequency.
When this checkbox is not selected, the option to downgrade to a one-time purchase will not be given.
b. Move on to the Subscription upsell Content and configure the incentive text that will display before and after the upgrade(subscription).
You can insert the merge tags to auto-populate the |SUBSCRIPTION_DISCOUNT| and |DELIVERY_FREQUENCY| data from the subscription management app you’ve installed in your Shopify store. Learn more
The delivery frequency options are the ones you set up in your Shopify subscription app.
Choose the font style of the incentive text or sync it with your Shopify store theme.
Configure the font size, weight, and color to make it prominent on the smart cart.
c. Set the subscription upsell’s CTA text to encourage customers to opt for a subscription instead of a one-time purchase
Click the smiley icon to insert an emoji for your choice.
Tip: Add subscription discount in the CTA
Configure the radius of the CTA button.
Select the button’s font style, size, and weight.
Set the color of the button’s background color and text.
You can also insert customized icon alongside your CTA text by inserting this simple svg code before or after the CTA text directly in the CTA text field.
You can change the width, height, icon image, and color by doing the necessary changes in the code itself.
Click + Add block again and select Upsell items to offer shoppers options to upgrade from a single product to a set, or from a lower-priced item to a higher-priced one.
a. Configure custom rules and conditions based on which the product recommendations will be shown to the customer in your items upsell offer on the smart cart. Click Edit rule to set up the custom rules. Learn more about setting up custom recommendations rules .
b. Configure the maximum number of upsell items that will be shown per offer
Select the checkbox Match the original product’s quantity if you want to match the quantity of the upsell items displayed to the quantity of the original item(s) added to the cart
Select the checkbox Exclude products in customer's cart to avoid recommending items that are already in the cart for upsell
c. Enable and select Discount you would like to give on the upsell items. Learn more
d. Set up the mobile and desktop layout of the upsell offer block. You can opt for the list or carousel format to display the upsell items
Configure the upsell offer block radius and color
e. Configure the incentive text that will display against the upsell item
Choose the font style of the incentive text or sync it with your Shopify store theme
Configure the font size and weight (regular, medium, or bold)
Select if you want to show or hide the trailing zeros after the product price
Configure the color of the Incentive text, product price, and compare-at-price
f. Variant selector preselection: The preselection option allows you to configure the logic behind the variant preselection.
Smart variant match: Automatically displays the best product variant based on the selected products or the cart items.
First available variant: Displays the first in-stock product variant in the Shopify admin to the shopper.
Unseleted: No recommendation will be pre-selected
Select the color of the selector’s, background, border, and text
g. Set the upsell offer’s CTA text to encourage users to opt for an upgraded item.
Add custom icon to button to personalize user experience
Configure the radius of the CTA button
Select the button’s font style, size, and weight
Set the color of the button’s background color and text
h. Configure the text, font size, style, weight, and color of the success message once the customer adds an upsell item to the cart.
Use AfterShip Personalization’s AI algorithms and merchandising rules to offer personalized product recommendations in the cart.
In this section, you can select the card drawer widget you want to display that you have configured under Smart upsell widget settings and apply their recommendations rules in the smart cart.
Click on Product recommendations and select the widget ID from the dropdown
Click Edit widget if you want to edit the existing cart drawer widget rules and it will take you to the smart upsell card drawer widget editor to make the changes
Promote any ongoing promotions, free shipping, or special offers happening in your store to ensure that customers are aware of the deals while they are shopping.
Click on Announcement bar and edit the banner text or use the default one
Incorporate a Tiered Progress Bar so customers can track their progress toward qualifying for free shipping and/or a free gift.
You can now create up to 3 bars with equivalent tiers of rewards: one free shipping tier and up to 2 free gift tiers. For each free gift tier, only 1 product can be offered as a free gift per bar.
Click Tiered progress bar to access the editor
Select Tier 1 and configure the reward settings for qualifying the Tier 1
Select the reward type between Free shipping and a Free gift
You may offer up to one free shipping tier and 2 free gift tiers per bar.
If you’re offering free shipping, input the amount at which shipping is free. Select the checkbox for Free shipping on subscription products, if you want to offer free shipping only if there is any subscription product in the cart, regardless of the goal amount.
If you're offering a free gift, choose the product you would like to offer as a free gift and input the amount at which shipping is free
Configure the content of the tiered progress bar offer
a. On progress bar: This content will show on the progress bar for the tier you are currently configuring
b. Before qualifying: This is the content that will tell a customer how far they are from qualifying for the reward associated with a tier
c. After reaching goal: This is the success message after qualifying for the reward associated with a tier
You can insert merge tags |GOAL_MINUS_CART VALUE| and |PRODUCT_TITLE| to auto-populate the remaining goal amount to qualify for a reward and the product title of the free gift the customer is getting in real-time based on the current cart scenario.
Just like the above settings, you can set up two more tiers to form a complete multi-tier progress bar in the cart.
Under the checkout settings,
Input the text to display the cart subtotal and choose a color in which the text and the subtotal in numbers will appear
Input the CTA text to encourage customers to checkout and choose a color for the CTA box and text
Under the style settings, configure the padding, border radius, and background color of the fly-out cart drawer.
Once your smart cart is enabled and set up on AfterShip Personalization, go to your Shopify admin, open the Theme editor, select Theme settings, and scroll down to Cart, and change the cart type of the current theme to cart drawer.
For a better customer experience, we suggest you hide the native cart drawer by following these steps.
a. Open up the developer tools (right-click, inspect element), and find the parent element that contains the entire native cart. In this example, the selector used is #CartDrawer.
b. In the "Custom CSS" section of the Smart Cart settings, add the selector and use the code below. You will need to add the specific selector that you find for your store. You will replace "INSERT-SELECTOR-HERE" with the selector of your store.
Make sure to include a space between the .apz-cart-drawer-mounted and your selector.
However, there might be some themes that may have compatibility issues and would require help from us to set up. Please reach out to our support team in case you have any questions or having difficulty implementing the smart cart.
Click anywhere on the smart card widget on the main dashboard to open it's editor
Click the {...} icon, Duplicate to make a carbon copy version of a particular smart cart. You must name the smart cart differently to be able to create it successfully.
Click the {...} icon, Delete to delete the smart cart permanently. You must disable the smart cart first to be able to delete it
Several features within APZ’s smart cart can drive additional revenues for merchants. These additional revenues will be calculated towards AfterShip Personalization’s revenue.
For more information on Revenue Attribution, refer to this article.
Overview
AfterShip Personalization’s Smart Cart allows you to provide a personalized experience for shoppers by replacing your Shopify theme’s default cart drawer with a customized and on-brand fly-out cart. The smart cart feature is packed with full-stacked customization options, powerful AI and merchandising rules, and fully customizable styles for brands to set up out-of-the-box campaigns in the smart cart without writing long strings of coding.
How is Smart Cart different from the Cart Drawer Upsell widget?
AfterShip Personalization’s Cart Drawer widget requires additional steps during onboarding to ensure compatibility with various Shopify themes. The new Smart Cart does not face common compatibility issues with Shopify themes and can be tailored to your specific needs using a no-code, low-code, or custom-code approach to take your upsell game to the next level.
What you'll learn
In this article, we will discuss:
Access smart cart
Smart cart editor
Smart cart editor: Sections
Smart cart editor: Styles
Revenue attribution
Access smart cart
Go to Smart cart in your AfterShip Personalization admin.
Click Create cart and choose from the pre-built cart themes. Currently, you can enable and set up a Basic cart suitable for brands catering to different types of industries. More themes will be available soon.
Click Create to access the basic smart cart editor.
Smart cart editor
Status: Enable status of the smart cart from the dropdown menu at the top.
Title: Click the pencil icon to rename the cart for easy reference.
Configure the settings of the smart cart as per your requirements. There are 2 settings to set up the recommendation rules and style settings.
Smart cart editor: Sections
Under the Sections settings, configure
1. Header
Input the header name, adjust the title padding, select the layout, and set the title’s font style, size, and weight.
2. Cart items
Under cart items, entice your shopper with customized upsell offers to boost recurring revenue, enhance customer retention, and improve AOV.
Click + Add block.
Set up Subscription upsell or Upsell items offers to improve your brand’s opportunities for improving AOV and revenue generation.
A. Subscription upsell
Select Subscription upsell to encourage customers to upgrade their one-time purchases (products in their cart) to discounted subscriptions.
a. Select the checkbox Allow downgrade to one-time purchase to give customers the option to downgrade to a one-time purchase. The option of One-time purchase will appear in the dropdown when the customer clicks on the subscription upsell CTA to choose the delivery frequency.
When this checkbox is not selected, the option to downgrade to a one-time purchase will not be given.
b. Move on to the Subscription upsell Content and configure the incentive text that will display before and after the upgrade(subscription).
You can insert the merge tags to auto-populate the |SUBSCRIPTION_DISCOUNT| and |DELIVERY_FREQUENCY| data from the subscription management app you’ve installed in your Shopify store. Learn more
The delivery frequency options are the ones you set up in your Shopify subscription app.
Choose the font style of the incentive text or sync it with your Shopify store theme.
Configure the font size, weight, and color to make it prominent on the smart cart.
c. Set the subscription upsell’s CTA text to encourage customers to opt for a subscription instead of a one-time purchase
Click the smiley icon to insert an emoji for your choice.
Tip: Add subscription discount in the CTA
Configure the radius of the CTA button.
Select the button’s font style, size, and weight.
Set the color of the button’s background color and text.
Add custom icons to buttons
You can also insert customized icon alongside your CTA text by inserting this simple svg code before or after the CTA text directly in the CTA text field.
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 6V8H1.5C0.671573 8 0 8.67157 0 9.5V18.5C0 19.3284 0.671573 20 1.5 20H16.5C17.3284 20 18 19.3284 18 18.5V9.5C18 8.67157 17.3284 8 16.5 8H15V6C15 2.68629 12.3137 0 9 0C5.68629 0 3 2.68629 3 6ZM9 2C6.79086 2 5 3.79086 5 6V8H13V6C13 3.79086 11.2091 2 9 2ZM10 16V12H8V16H10Z" fill="white"/>
</svg> Subscribe and save 15%You can change the width, height, icon image, and color by doing the necessary changes in the code itself.
B. Upsell items
Click + Add block again and select Upsell items to offer shoppers options to upgrade from a single product to a set, or from a lower-priced item to a higher-priced one.
a. Configure custom rules and conditions based on which the product recommendations will be shown to the customer in your items upsell offer on the smart cart. Click Edit rule to set up the custom rules. Learn more about setting up custom recommendations rules .
b. Configure the maximum number of upsell items that will be shown per offer
Select the checkbox Match the original product’s quantity if you want to match the quantity of the upsell items displayed to the quantity of the original item(s) added to the cart
Select the checkbox Exclude products in customer's cart to avoid recommending items that are already in the cart for upsell
c. Enable and select Discount you would like to give on the upsell items. Learn more
d. Set up the mobile and desktop layout of the upsell offer block. You can opt for the list or carousel format to display the upsell items
Configure the upsell offer block radius and color
e. Configure the incentive text that will display against the upsell item
Choose the font style of the incentive text or sync it with your Shopify store theme
Configure the font size and weight (regular, medium, or bold)
Select if you want to show or hide the trailing zeros after the product price
Configure the color of the Incentive text, product price, and compare-at-price
f. Variant selector preselection: The preselection option allows you to configure the logic behind the variant preselection.
Smart variant match: Automatically displays the best product variant based on the selected products or the cart items.
First available variant: Displays the first in-stock product variant in the Shopify admin to the shopper.
Unseleted: No recommendation will be pre-selected
Select the color of the selector’s, background, border, and text
g. Set the upsell offer’s CTA text to encourage users to opt for an upgraded item.
Add custom icon to button to personalize user experience
Configure the radius of the CTA button
Select the button’s font style, size, and weight
Set the color of the button’s background color and text
h. Configure the text, font size, style, weight, and color of the success message once the customer adds an upsell item to the cart.
3. Product recommendations
Use AfterShip Personalization’s AI algorithms and merchandising rules to offer personalized product recommendations in the cart.
In this section, you can select the card drawer widget you want to display that you have configured under Smart upsell widget settings and apply their recommendations rules in the smart cart.
Click on Product recommendations and select the widget ID from the dropdown
Click Edit widget if you want to edit the existing cart drawer widget rules and it will take you to the smart upsell card drawer widget editor to make the changes
4. Announcement bar
Promote any ongoing promotions, free shipping, or special offers happening in your store to ensure that customers are aware of the deals while they are shopping.
Click on Announcement bar and edit the banner text or use the default one
4. Tiered progress bar
Incorporate a Tiered Progress Bar so customers can track their progress toward qualifying for free shipping and/or a free gift.
You can now create up to 3 bars with equivalent tiers of rewards: one free shipping tier and up to 2 free gift tiers. For each free gift tier, only 1 product can be offered as a free gift per bar.
Click Tiered progress bar to access the editor
Select Tier 1 and configure the reward settings for qualifying the Tier 1
Select the reward type between Free shipping and a Free gift
You may offer up to one free shipping tier and 2 free gift tiers per bar.
If you’re offering free shipping, input the amount at which shipping is free. Select the checkbox for Free shipping on subscription products, if you want to offer free shipping only if there is any subscription product in the cart, regardless of the goal amount.
If you're offering a free gift, choose the product you would like to offer as a free gift and input the amount at which shipping is free
Configure the content of the tiered progress bar offer
a. On progress bar: This content will show on the progress bar for the tier you are currently configuring
b. Before qualifying: This is the content that will tell a customer how far they are from qualifying for the reward associated with a tier
c. After reaching goal: This is the success message after qualifying for the reward associated with a tier
You can insert merge tags |GOAL_MINUS_CART VALUE| and |PRODUCT_TITLE| to auto-populate the remaining goal amount to qualify for a reward and the product title of the free gift the customer is getting in real-time based on the current cart scenario.
Just like the above settings, you can set up two more tiers to form a complete multi-tier progress bar in the cart.
5. Checkout
Under the checkout settings,
Input the text to display the cart subtotal and choose a color in which the text and the subtotal in numbers will appear
Input the CTA text to encourage customers to checkout and choose a color for the CTA box and text
Smart cart editor: Styles
Under the style settings, configure the padding, border radius, and background color of the fly-out cart drawer.
Additional considerations
Once your smart cart is enabled and set up on AfterShip Personalization, go to your Shopify admin, open the Theme editor, select Theme settings, and scroll down to Cart, and change the cart type of the current theme to cart drawer.
For a better customer experience, we suggest you hide the native cart drawer by following these steps.
a. Open up the developer tools (right-click, inspect element), and find the parent element that contains the entire native cart. In this example, the selector used is #CartDrawer.
b. In the "Custom CSS" section of the Smart Cart settings, add the selector and use the code below. You will need to add the specific selector that you find for your store. You will replace "INSERT-SELECTOR-HERE" with the selector of your store.
.apz-cart-drawer-mounted INSERT-SELECTOR-HERE { display: none; }Make sure to include a space between the .apz-cart-drawer-mounted and your selector.
However, there might be some themes that may have compatibility issues and would require help from us to set up. Please reach out to our support team in case you have any questions or having difficulty implementing the smart cart.
Additional actions
Click anywhere on the smart card widget on the main dashboard to open it's editor
Click the {...} icon, Duplicate to make a carbon copy version of a particular smart cart. You must name the smart cart differently to be able to create it successfully.
Click the {...} icon, Delete to delete the smart cart permanently. You must disable the smart cart first to be able to delete it
Revenue attribution
Several features within APZ’s smart cart can drive additional revenues for merchants. These additional revenues will be calculated towards AfterShip Personalization’s revenue.
| Section | Revenue attribution |
|---|---|
| Tier progress bar | Free gift items will be calculated towards AfterShip Personalization’s revenue although their price is free. |
| Items upsell | The upgraded items will be calculated towards AfterShip Personalization’s revenue. |
| Subscription upsell | The new subscription item will be calculated towards AfterShip Personalization’s revenue. |
For more information on Revenue Attribution, refer to this article.
Updated on: 27/06/2024
Thank you!