Articles on: Upsell widgets

How to Embed Smart Upsell Widgets in Your Shopify Store Theme 1.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 pages with the help of a code. The smart upsell widget's location settings can be configured in the AfterShip Personalization’s admin.

What you’ll learn



In this tutorial, we’ll show you how to:

Embed widget code in the Shopify Theme 1.0 (DEBUT)
- Home page
- Cart drawer
- Cart
- Product page
- Thank you page

Embed widget code in the Shopify Theme 1.0 (DEBUT)



Home page



Log into your AfterShip Personalization admin dashboard
Go to Smart upsell widgets > Home page


Click Create widget
In the editor, go to Installation > Copy code


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-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”: “home-recommendation”


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

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

<div data-personalization-id="00005"></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 settings_data.json and insert home-recommendation.liquid into the specific location on the homepage

In the example below, the product recommendation widget is inserted between the feature-columns and collection sections on the homepage



Cart drawer



If your Shopify theme supports the cart drawer feature, you can follow the instructions to embed the smart upsell widget into your Shopify store’s cart drawer here.
However, if you are using a third-party cart drawer app from the Shopify app store, you need to find the integration method with the app to embed AfterShip Personalization’s smart upsell widget into your cart drawer app.

Here’s a quick example for one of the cart drawer apps.

Once the app is downloaded and installed for your Shopify store, follow these steps

Open the Cart Drawer app
Navigate to the section where you can add code snippets or custom code
Copy the code below and paste it into the appropriate field

Note: Replace the widget code with your AfterShip Personalization admin widget code.


Save the change
The customer can now view the cart drawer and smart upsell widget on their store


Cart



Copy the widget code from the AfterShip Personalization admin > Smart upsell widgets > Cart

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


Go to Themes under Online store settings in the Shopify admin
Migrate to where your store theme is mentioned and click {...} > Edit code
Find the liquid or JSON file for the cart page cart-template.liquid and insert the widget code copied from AfterShip Personalization admin into the specific location on the cart page (see below)


Product page



Copy the widget code from the AfterShip Personalization admin > Smart upsell widget > Product page

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


Go to Themes under Online store settings in the Shopify admin
Migrate to where your store theme is mentioned and click {...} > Edit code
Find the liquid or JSON file for the product page product-template.liquid and insert the widget code copied from AfterShip Personalization admin into the specific location on the cart 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 to the Order status page section
In the Additional scripts dialogue box, insert the widget code

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


Click Save

For any further questions or help, please contact our chat support team

Updated on: 21/11/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!