Articles on: Upsell widgets

How to Embed Smart Upsell Widgets in Your Shopify Store Theme 2.0

Plans: All plans Platforms: Shopify

Overview



This tutorial will help you insert the smart upsell widget into your Shopify store’s home, cart, 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:

Demo
Embed smart upsell widget in Shopify
- Home page
- Cart drawer
- Cart
- Product page
- Thank you page
- Additional resources

Demo





Embed smart upsell widget in Shopify



Note: This method applies to Shopify theme 2.0 stores to display smart upsell widgets on the product, home, cart, and thank you pages.

There are two ways to embed smart upsell widget in Shopify to offer personalized recommendation offers.

Method 1. 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
Scroll down to Location and copy the widget ID
Widget code can also be copied from the widget dashboard and widget editor’s main header
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, Cart or Thank you where you want to embed the widget code from the dropdown menu situated centrally at the top of the editor
If you choose Product page, select Default product to open the general editor that will automatically apply changes to all the associated product pages
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
Paste the widget ID copied from AfterShip Personalization in the Widget ID field and click Save



Drag and drop the AfterShip Smart Offer widget to reposition it on the product page

Note: Duplicate widget IDs will be ignored and show a single smart upsell widget

Method 2: Embed widget code in the Shopify Theme 2.0 (DAWN) code


Besides adding the widget ID directly into the Shopify theme editor, there is another to embed the smart upsell widget into your Shopify store. You can copy the widget code from the AfterShip Personalization admin and insert it into the Shopify theme liquid code.

Home page



Copy the widget code from the AfterShip Personalization admin > Smart upsell widget > Home page
Go to Themes under Online store settings in the Shopify admin
Migrate to where your store theme is mentioned and click {...} > Edit code
Navigate to Sections in Shopify’s online theme editor and click Add a new section


Select the checkbox for liquid and input the File name, say home-recommendations for easy reference, and then click Done


Once the File name is added, a code container will open
Give a name to the section

"name": "Section name" 

“name”: “home-recommendations”


Add the widget code into the liquid container by adding the code

<div data-personalization-id="widget code"></div>

<div data-personalization-id="00050"></div>


If you want to give container page margins or control the widget’s width, you can do so by applying styles to the container

In the following example, a class page-width is applied to the container to give the upsell widget margins.

<div class=”page-width”></div>



Find the liquid or JSON file for the homepage index.json and insert home-recommendations.liquid into the specific location on the homepage

In the example below, the product recommendation widget is inserted between the collage and video sections on the homepage





Cart drawer



Copy the widget code from the AfterShip Personalization admin > Smart upsell widget > Cart
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 Product, Home page, or Cart page 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
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 above it

<from>         
<div data-personalization-id="00007"></div>
</cart-drawer-items>




Click Save
Copy the code below

We have taken widget code “00007” for reference, please replace it with the widget code from your AfterShip Personalization admin

setTimeout(() => {        
if ( window['pz-recommendations'] ) 
{            
window['pz-recommendations'].remove("00007");           
window['pz-recommendations'].initialRecommendation("00007")        
}      
}, 1000)


Navigate to Assets from Shopify’s online theme editor side panel and click cart-drawer.js
Find open(triggeredBy) { and paste the code after }, { once: true });

if ( window['pz-recommendations'] ) 
{            
window['pz-recommendations'].remove("00007");           
window['pz-recommendations'].initialRecommendation("00007")        }      
}, 1000)




Navigate to Assets from Shopify’s online theme editor side panel and click cart.js
Find updateQuantity(line, quantity, name) { and paste the code below after };



Cart



Copy the smart upsell widget code from the AfterShip Personalization admin
Go to Themes under Online store settings in the Shopify admin
Migrate to where your store theme is mentioned and click {...} > Edit code
Navigate to Sections in Shopify’s online theme editor and click Add a new section


Select the checkbox for liquid and input the File name, say cart-recommendation for easy reference, and then click Done


Once the File name is added, a code container will open
Give a name to the section

"name": "Section name" 

“name”: “cart-recommendation”


Add the widget code into the liquid container by adding the code below

<div data-personalization-id="widget code"></div>

<div data-personalization-id="00001"></div>


If you want to give container page margins or control the widget’s width, you can do so by applying styles to the container

In the following example, a class page-width is applied to the container to give the upsell widget margins

<div class=”page-width”></div>



Find the liquid or JSON file for the cart page cart.json and insert cart-recommendation.liquid into the specific location on the cart page

In the example below, the product recommendation widget is inserted between the cart footer and featured-collection sections on the cart page



Product page



Copy the smart upsell widget ID from the AfterShip Personalization admin
Go to Themes under Online store settings in the Shopify admin
Migrate to where your store theme is mentioned and click {...} > Edit code


Navigate to Sections in Shopify’s online theme editor and click Add a new section


Select the checkbox for liquid and input the File name, say product-recommendation for easy reference, and then click Done

Once the File name is added, a code container will open
Give a name to the section

"name": "Section name" 

“name”: “product-recommendation”


Add the widget code into the liquid container by adding the code below

<div data-personalization-id="widget code"></div>

<div data-personalization-id="00006"></div>


If you want to give container page margins or control the widget’s width, you can do so by applying styles to the container

In the following example, a class page-width is applied to the container to give the upsell widget margins

<div class=”page-width”></div>



Find the liquid or JSON file for the product page product.json and insert product-recommendation.liquid into the specific location on the product page

In the example below, the product recommendation widget is inserted between the main and image-with-text sections on the product page




Thank you page



Copy the smart upsell widget ID for the thank you page from the AfterShip Personalization admin




Go to Settings in the Shopify admin
Navigate to Checkout and accounts and scroll down to Order status page
In the Additional scripts dialogue box, insert the widget code

<div data-personalization-id="00041"></div>



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: 30/11/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!