How to Embed Smart Upsell Widgets in Your Shopify Store Theme 2.0
Plans: All plans Platforms: Shopify
This tutorial will help you insert the smart upsell widget into your Shopify store’s home, cart (page and drawer), product, and thank you page with the help of a code. This tutorial is focused on helping you display smart upsell offers on Shopify Theme Store 2.0.
Checkout this article to learn how you can embed smart upsell widgets in your Shopify Theme Store 1.0
In this tutorial, we’ll show you how to:
Embed smart upsell widget in Shopify
Pre and post-purchase widget installation: Via theme editor
Thank you page widget installation
Cart drawer widget installation
Additional resources
This method applies to Shopify theme 2.0 stores to display smart upsell widgets on the product, home, cart, and thank you pages.
Navigate to Smart upsell widgets in the AfterShip Personalization admin
Select the pre or post-purchase scenario or Shopify store page where you want the upsell widget to appear
For every pre and post-purchase scenario, a widget ID will be automatically created while setting up the product recommendation rules and configuring widget display and style settings
Enable the widget in AfterShip: Ensure your widget 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.
Copy the widget ID: Scroll down to the Installation section and click "Copy ID" in the top right corner. Scroll down to Installation and copy the widget ID. Widget code can also be copied from the widget dashboard and widget editor’s main header
Open the Shopify theme editor: Go to Themes under Online store settings in the Shopify admin
Migrate to where your store theme is mentioned and click Customize
You will land on the theme editor. Select the page—Product, Home page, or Cart page, where you want to embed the widget code from the dropdown menu situated centrally at the top of the editor.
The installation steps for all the scenarios are the same, you just have to copy the widget ID from their respective editors in AfterShip Personalization and add those codes to their respective theme editors.
A. Product page
If you choose Product page, select Default product to open the general editor that will automatically apply changes to all the associated product pages
B. Home page
C. Cart page
Add a new section in theme editor: From the three options on the side menu, select Sections settings
Click + Add section at the bottom under Theme settings, then select AfterShip Smart Offer
Click on AfterShip Smart Offer to open a side panel on the right-hand side
Enter the widget ID: Under Apps, select AfterShip Smart Offer, paste the widget ID copied from AfterShip Personalization in the Step 4 and click Save
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. For A/B testing, only the first enabled version will appear in the preview.* Drag-and-drop the AfterShip Smart Offer widget to reposition it on the product page
Save your Shopify theme
Duplicate widget IDs will be ignored and show a single smart upsell widget
Copy the smart upsell widget ID for the Thank you page widget editor from the AfterShip Personalization admin
Go to Settings in the Shopify admin
Navigate to Checkout and scroll down to Order status page
In the Additional scripts dialogue box, insert the widget code
Click Save
Copy the widget code from the AfterShip Personalization admin > Smart upsell widgets > Cart drawer
Go to Themes under Online store settings in the Shopify admin
Migrate to where your store theme is mentioned and click Customize
You will land on the theme editor. Select Cart where you want to embed the widget code from the dropdown menu at the top of the editor
From the three options on the side menu, select Theme settings
Move to the Cart section and select Drawer from the dropdown menu as your Cart type
Click Save and exist the online theme editor
If you are using Chrome, right-click on the page and select Inspect from the dropdown menu
Find the code for the section where you want to display the widget
Migrate to where your store theme is mentioned again and click {...} > Edit code
Navigate to Snippets in Shopify’s online theme editor and click cart-drawer.liquid
On the cart-drawer.liquid container, find cart-drawer-items and paste the widget code you copied in step 1 above it
Click Save
Checkout this article to learn how you can embed smart upsell widgets in your Shopify store theme 1.0.
For any further questions or help, please contact our chat support team.
Overview
This tutorial will help you insert the smart upsell widget into your Shopify store’s home, cart (page and drawer), product, and thank you page with the help of a code. This tutorial is focused on helping you display smart upsell offers on Shopify Theme Store 2.0.
Checkout this article to learn how you can embed smart upsell widgets in your Shopify Theme Store 1.0
What you’ll learn
In this tutorial, we’ll show you how to:
Embed smart upsell widget in Shopify
Pre and post-purchase widget installation: Via theme editor
Thank you page widget installation
Cart drawer widget installation
Additional resources
Embed smart upsell widget in Shopify
This method applies to Shopify theme 2.0 stores to display smart upsell widgets on the product, home, cart, and thank you pages.
Embed widget ID via theme editor
Navigate to Smart upsell widgets in the AfterShip Personalization admin
Select the pre or post-purchase scenario or Shopify store page where you want the upsell widget to appear
For every pre and post-purchase scenario, a widget ID will be automatically created while setting up the product recommendation rules and configuring widget display and style settings
Enable the widget in AfterShip: Ensure your widget 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.
Copy the widget ID: Scroll down to the Installation section and click "Copy ID" in the top right corner. Scroll down to Installation and copy the widget ID. Widget code can also be copied from the widget dashboard and widget editor’s main header
Open the Shopify theme editor: Go to Themes under Online store settings in the Shopify admin
Migrate to where your store theme is mentioned and click Customize
You will land on the theme editor. Select the page—Product, Home page, or Cart page, where you want to embed the widget code from the dropdown menu situated centrally at the top of the editor.
The installation steps for all the scenarios are the same, you just have to copy the widget ID from their respective editors in AfterShip Personalization and add those codes to their respective theme editors.
A. Product page
If you choose Product page, select Default product to open the general editor that will automatically apply changes to all the associated product pages
B. Home page
C. Cart page
Add a new section in theme editor: From the three options on the side menu, select Sections settings
Click + Add section at the bottom under Theme settings, then select AfterShip Smart Offer
Click on AfterShip Smart Offer to open a side panel on the right-hand side
Enter the widget ID: Under Apps, select AfterShip Smart Offer, paste the widget ID copied from AfterShip Personalization in the Step 4 and click Save
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. For A/B testing, only the first enabled version will appear in the preview.* Drag-and-drop the AfterShip Smart Offer widget to reposition it on the product page
Save your Shopify theme
Duplicate widget IDs will be ignored and show a single smart upsell widget
Thank you page widget installation
Copy the smart upsell widget ID for the Thank you page widget editor from the AfterShip Personalization admin
Go to Settings in the Shopify admin
Navigate to Checkout and scroll down to Order status page
In the Additional scripts dialogue box, insert the widget code
<div data-personalization-id=“00015"></div>Click Save
Cart drawer widget installation
Copy the widget code from the AfterShip Personalization admin > Smart upsell widgets > Cart drawer
Go to Themes under Online store settings in the Shopify admin
Migrate to where your store theme is mentioned and click Customize
You will land on the theme editor. Select Cart where you want to embed the widget code from the dropdown menu at the top of the editor
From the three options on the side menu, select Theme settings
Move to the Cart section and select Drawer from the dropdown menu as your Cart type
Click Save and exist the online theme editor
If you are using Chrome, right-click on the page and select Inspect from the dropdown menu
Find the code for the section where you want to display the widget
Migrate to where your store theme is mentioned again and click {...} > Edit code
Navigate to Snippets in Shopify’s online theme editor and click cart-drawer.liquid
On the cart-drawer.liquid container, find cart-drawer-items and paste the widget code you copied in step 1 above it
<from>
<div data-personalization-id="00007"></div>
</cart-drawer-items>Click Save
Additional Resources
Checkout this article to learn how you can embed smart upsell widgets in your Shopify store theme 1.0.
For any further questions or help, please contact our chat support team.
Updated on: 13/05/2024
Thank you!