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:


  1. Embed widget code in the Shopify Theme 1.0 (DEBUT)



Embed widget code in the Shopify Theme 1.0 (DEBUT)


Home page


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



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



  1. Go to Themes under Online store settings in the Shopify admin
  2. Migrate to where your store theme is mentioned and click {...} > Edit code
  3. Navigate to Sections in Shopify’s online theme editor and click Add a new section



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


  1. 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>


  1. 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


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


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


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



Cart


  1. 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>


  1. Go to Themes under Online store settings in the Shopify admin
  2. Migrate to where your store theme is mentioned and click {...} > Edit code
  3. 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


  1. 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>


  1. Go to Themes under Online store settings in the Shopify admin
  2. Migrate to where your store theme is mentioned and click {...} > Edit code
  3. 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


  1. Copy the smart upsell widget ID for the thank you page from the AfterShip Personalization admin
  2. Go to Settings in the Shopify admin
  3. Navigate to Checkout and accounts and scroll to the Order status page section
  4. In the Additional scripts dialogue box, insert the widget code


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

  1. Click Save


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


Updated on: 13/05/2024