Set up Checkout Page Upsell Offers
Plans: All Plans Platforms: Shopify
Upsells work best when customers have already committed to a purchase. Hence, product recommendations on the checkout page warrant higher conversions and increase average order value (AOV). With AfterShip Personalization’s checkout upsell offers, you can interest your customers in buying additional products when they have already selected what they want and are emotionally invested in the purchase.
This tutorial will take you through the entire process of how to install checkout smart offers through your Shopify AfterShip Personalization admin.
In this article, we will show you:
Set up checkout page upsell offer
Basic settings
Display settings
Style settings
A/B testing
Log in to your AfterShip Personalization admin dashboard
Navigate to Checkout page on the menu
You can edit an existing product recommendation campaign (widget) or offer customers free shipping on the product recommendations on the checkout page (default options)
Select the campaign and click Edit to make the required changes
Once you are on the checkout page product recommendations editor, you will see 3 significant tabs to customize the offer’s basic settings and recommendation strategy, display criteria, and style
Status: Set the status of the offer to Enable.
Product settings: Choose the recommendation engine based on which the products will be displayed to the customers on the checkout page.
Select Pre-made rules like Frequently bought together, Complements, Same product upsell, Similar products, Best sellers, New arrivals, or Manual selection or,
Set up custom recommendation rules with this detailed guide.
Pinned products: You can select 1 product that will always appear first. The pinned product will override any exclusion rules.
Click Select and choose the product you want to pin from the list synced from your Shopify store.
Exclusions: Select products that will be excluded from the recommendations. You can configure the exclusion rules based on the following settings.
Exclude products in customer's order: Products in the customer’s order will not be recommended again
Exclude specific products: These are all the products that are currently listed in your Shopify store
Exclude by tag: As configured in your Shopify admin
Exclude by collection: As specified in your Shopify admin
Learn more>
Product type: Configure the product type for the recommended products as Subscription only, One-time purchase only, or Both (one-time and subscription). Get more details here .
Enable Discount if you want to give a discount on the recommended products.
You can select from the existing discount offers (includes Shopify and third-party discounts) or create a new one
You can either select the fixed amount or set the discount percentage
Get clarity here.
Installation: Enabling product recommendation offers on AfterShip Personalization is not enough. You need to install the app on the Shopify checkout editor. The detailed installation process is available on the admin, just click View instructions.
Enable the offer in AfterShip: Ensure your product offer is enabled in the AfterShip Personalization admin and customize its settings to your preference. If you're running an A/B test, remember to enable both versions. Learn more .
Open the Shopify checkout editor: Select your Information page, and in the left panel click "Add app".
Select AfterShip Smart Offer
Select the offer type: Click the dropdown menu and choose "Product offer".
Include app in Shop Pay (optional): Check this box if your store has activated Shop Pay.
Adjust the widget's location: Drag and drop the widget to your desired location in the left panel, ideally under "Express checkout" for better impressions. Use the preview in the top right to ensure it looks perfect. For A/B testing, only the first enabled version will appear in the preview.
Save your Shopify theme
Offer section: Configure the display settings of the product recommendations offer section.
a. Border: Select the kind of border you want around the offer section—Solid, Dashed, or None.
b. Radius: Select how rounded you want the corners of the offer section—Small, Regular, Large, Fully rounded, or None.
c. Padding: Select how much difference you want between the content and the border of the offer section from all sides—Extra tight, Tight, Regular, Loose, Extra Loose, and None.
Offer title: Give your offer a title and include suitable merge tags. You can also use our AI tool to fetch a suitable offer title.
a. Title padding: Select how much difference you want between the title and the product recommendations—Extra tight, Tight, Regular, Loose, Extra Loose, and None.
b. Select the appropriate alignment of the title.
Product layout: Configure the layout settings of the product recommendations that will be visible to the customers.
a. Number of products: Decide the number of products to be displayed in the upsell offer by dragging the radio button across the bar.
b. Configure the display style for product recommendations on desktop and mobile—List or Grid.
Product content: Configure how and what content will be displayed for the recommended products.
a. Image source: Select whether you want the product or variant image to be popped.
b. Image aspect ratio: Define the image’s ratio of its width to its height from the list of supported ratios.
c. Image border: Select the kind of border you want around the product images—Solid or None.
d. Image radius: Select how rounded you want the corners of the product images—Small, Regular, Large, Fully rounded, or None.
Product information: Select the checkbox of the fields you want to display with the product recommendations.
If you have any third-party apps integrated with your store and that app is also integrated with AfterShip Personalization, you will see the option of showcasing the product information related to that too. For example, Yotpo Reviews.
Variant selector: Configure the logic behind the variant preselection of the recommended products.
a. Display
Always: This setting displays the variants below the products with the option to select a different variant from the dropdown if required.
Dynamic: This setting does not display the variants option below the products. The shoppers will be presented with the variant list in a dropdown list or on a separate popup window to choose the variant they want of the recommended products only upon clicking the CTA button.
b. Layout
Dropdown: This layout allows shoppers to easily browse the available variants of a product from the dropdown list.
Window: This layout lets shoppers easily browse the available product variants on a separate pop-up window.
c. 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.
d. Select the checkbox for Allow customers to change product quantity, if you want to enable customers to change the number of units they would like to buy of the recommended variant.
Action buttons: Input the Add to cart button button text to encourage customers to add more to their existing order.
The widget section will automatically sync with your Shopify store and match its theme. However, you can customize the
Offer title: Select the color of the title and choose the font size and weight.
Product info: Choose the size and weight of the font of the product information and select the appropriate color of the product name, price, compare-at-price, and discount value.
Action button: Choose the size and weight of the font of the action button and select the type of button you want—Primary, Secondary, or Plain text.
A/B testing feature allows you to split your website visitors into two groups and display each with a different product recommendation strategy. You can determine which strategy is performing better and which needs improvement by analyzing the key metrics, including conversions and average order value (AOV).
Find the complete tutorial on A/B testing one-click upsell campaigns here >
Overview
Upsells work best when customers have already committed to a purchase. Hence, product recommendations on the checkout page warrant higher conversions and increase average order value (AOV). With AfterShip Personalization’s checkout upsell offers, you can interest your customers in buying additional products when they have already selected what they want and are emotionally invested in the purchase.
This tutorial will take you through the entire process of how to install checkout smart offers through your Shopify AfterShip Personalization admin.
What you’ll learn
In this article, we will show you:
Set up checkout page upsell offer
Basic settings
Display settings
Style settings
A/B testing
Set up checkout page upsell offer
Log in to your AfterShip Personalization admin dashboard
Navigate to Checkout page on the menu
You can edit an existing product recommendation campaign (widget) or offer customers free shipping on the product recommendations on the checkout page (default options)
Select the campaign and click Edit to make the required changes
Once you are on the checkout page product recommendations editor, you will see 3 significant tabs to customize the offer’s basic settings and recommendation strategy, display criteria, and style
Basic settings
Status: Set the status of the offer to Enable.
Product settings: Choose the recommendation engine based on which the products will be displayed to the customers on the checkout page.
Select Pre-made rules like Frequently bought together, Complements, Same product upsell, Similar products, Best sellers, New arrivals, or Manual selection or,
Set up custom recommendation rules with this detailed guide.
Pinned products: You can select 1 product that will always appear first. The pinned product will override any exclusion rules.
Click Select and choose the product you want to pin from the list synced from your Shopify store.
Exclusions: Select products that will be excluded from the recommendations. You can configure the exclusion rules based on the following settings.
Exclude products in customer's order: Products in the customer’s order will not be recommended again
Exclude specific products: These are all the products that are currently listed in your Shopify store
Exclude by tag: As configured in your Shopify admin
Exclude by collection: As specified in your Shopify admin
Learn more>
Product type: Configure the product type for the recommended products as Subscription only, One-time purchase only, or Both (one-time and subscription). Get more details here .
Enable Discount if you want to give a discount on the recommended products.
You can select from the existing discount offers (includes Shopify and third-party discounts) or create a new one
You can either select the fixed amount or set the discount percentage
Get clarity here.
Installation: Enabling product recommendation offers on AfterShip Personalization is not enough. You need to install the app on the Shopify checkout editor. The detailed installation process is available on the admin, just click View instructions.
Upsell widget installation in the Shopify checkout editor
Enable the offer in AfterShip: Ensure your product offer is enabled in the AfterShip Personalization admin and customize its settings to your preference. If you're running an A/B test, remember to enable both versions. Learn more .
Open the Shopify checkout editor: Select your Information page, and in the left panel click "Add app".
Select AfterShip Smart Offer
Select the offer type: Click the dropdown menu and choose "Product offer".
Include app in Shop Pay (optional): Check this box if your store has activated Shop Pay.
Adjust the widget's location: Drag and drop the widget to your desired location in the left panel, ideally under "Express checkout" for better impressions. Use the preview in the top right to ensure it looks perfect. For A/B testing, only the first enabled version will appear in the preview.
Save your Shopify theme
2. Display
Offer section: Configure the display settings of the product recommendations offer section.
a. Border: Select the kind of border you want around the offer section—Solid, Dashed, or None.
b. Radius: Select how rounded you want the corners of the offer section—Small, Regular, Large, Fully rounded, or None.
c. Padding: Select how much difference you want between the content and the border of the offer section from all sides—Extra tight, Tight, Regular, Loose, Extra Loose, and None.
Offer title: Give your offer a title and include suitable merge tags. You can also use our AI tool to fetch a suitable offer title.
a. Title padding: Select how much difference you want between the title and the product recommendations—Extra tight, Tight, Regular, Loose, Extra Loose, and None.
b. Select the appropriate alignment of the title.
Product layout: Configure the layout settings of the product recommendations that will be visible to the customers.
a. Number of products: Decide the number of products to be displayed in the upsell offer by dragging the radio button across the bar.
b. Configure the display style for product recommendations on desktop and mobile—List or Grid.
Product content: Configure how and what content will be displayed for the recommended products.
a. Image source: Select whether you want the product or variant image to be popped.
b. Image aspect ratio: Define the image’s ratio of its width to its height from the list of supported ratios.
c. Image border: Select the kind of border you want around the product images—Solid or None.
d. Image radius: Select how rounded you want the corners of the product images—Small, Regular, Large, Fully rounded, or None.
Product information: Select the checkbox of the fields you want to display with the product recommendations.
If you have any third-party apps integrated with your store and that app is also integrated with AfterShip Personalization, you will see the option of showcasing the product information related to that too. For example, Yotpo Reviews.
Variant selector: Configure the logic behind the variant preselection of the recommended products.
a. Display
Always: This setting displays the variants below the products with the option to select a different variant from the dropdown if required.
Dynamic: This setting does not display the variants option below the products. The shoppers will be presented with the variant list in a dropdown list or on a separate popup window to choose the variant they want of the recommended products only upon clicking the CTA button.
b. Layout
Dropdown: This layout allows shoppers to easily browse the available variants of a product from the dropdown list.
Window: This layout lets shoppers easily browse the available product variants on a separate pop-up window.
c. 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.
d. Select the checkbox for Allow customers to change product quantity, if you want to enable customers to change the number of units they would like to buy of the recommended variant.
Action buttons: Input the Add to cart button button text to encourage customers to add more to their existing order.
3. Style
The widget section will automatically sync with your Shopify store and match its theme. However, you can customize the
Offer title: Select the color of the title and choose the font size and weight.
Product info: Choose the size and weight of the font of the product information and select the appropriate color of the product name, price, compare-at-price, and discount value.
Action button: Choose the size and weight of the font of the action button and select the type of button you want—Primary, Secondary, or Plain text.
4. A/B testing
A/B testing feature allows you to split your website visitors into two groups and display each with a different product recommendation strategy. You can determine which strategy is performing better and which needs improvement by analyzing the key metrics, including conversions and average order value (AOV).
Find the complete tutorial on A/B testing one-click upsell campaigns here >
Updated on: 07/02/2024
Thank you!