How to configure Custom Positioning on Upsell Campaigns?

By default, most Upsell campaign widgets in the Upsell Sales Boost App are strategically positioned below the Add-to-Cart button. However, in this article, we'll be discussing Custom Position options for Upsell campaign widgets.

Navigate to the following sections:

• Enabling USB Core Snippet
• 2.0 Themes (App Blocks)
• Older themes (Placeholder code)

Before you proceed...

It is important that the app snippet, also known as the USB Core Snippet, is enabled in the app to ensure that the widgets appear as intended. To enable this, follow these steps:

1. Click the Customize button next to the theme you wish to edit.
2. Select App embeds on the sidebar.
3. Turn on the toggle for USB Core Snippet and click Save.

2.0 Themes (App Blocks)

After enabling the above requirements, we can proceed with the step-by-step guide for custom placement.

Enabling Custom Position

The Custom Placement feature is located at the bottom of each Upsell campaign option's Product Page section. As an example, below is a Bundle campaign's configuration page:

Once you tick the box for 'Use custom position on product page', a new dialog box will appear underneath, which includes instructions on how to use this feature.

Opening Shopify Theme 2.0 Editor

1. Open the Shopify Theme Editor and switch the page view to the Product Page.

   

   

   
   
   
2. Once you're viewing the product page, you'll need to add the relevant App block. To do this:
   1. Click on 'Add block.'
   2. Select 'Apps.'

   3. Choose 'USB Upsell _____' (depending on the campaign). In the example below, I am adding the USB Upsell Bundle app block.

      
      

3. After adding the app block, you can drag it within the designated area. Position it as desired, then click 'Save' in the top right corner.

   

   
   

4. All set! Now, check your store to confirm that the widget appears in the saved position.

   

   
   

Older themes (Placeholder code)

This is aimed at themes that do not utilize Shopify 2.0 themes or a third-party theme where the app block feature cannot be supported. When it comes to themes that do not use App Blocks, you can use the following placeholder codes within your theme.

Enabling Custom Position

The Custom Placement feature is located at the bottom of each Upsell campaign option's Product Page section. As an example, below is a Volume campaign's configuration page:

Once you tick the box for the Use custom position on product page, a new dialog box will appear underneath, which includes instructions on how to use this feature.

Here are the HTML codes for each Upsell campaign:

Bogo
<div class="htusb-placeholder-bogo-2-0"></div>         



Bundle
<div class="htusb-placeholder-bundle-2-0"></div>         



Volume
<div class="htusb-placeholder-volume-2-0"></div>         



Recommended
<div class="htusb-placeholder-recommended-2-0"></div>         

After copying the custom placement code, make sure to save your campaign before moving on to the next step!

Opening Shopify Theme Code Editor

1. Navigate to your Online Store -> Themes page on your Shopify Admin.

   
   

2. On your store's theme page, navigate to your Live theme and, after clicking the three dots to open the dropdown, select “Edit Code”.

   

   We recommend that you back up your store’s theme file before making any changes to the code.

3. Once you have found the product page liquid file for your theme, simply locate where you would like to place the widget within the liquid file. For example, I want it to appear above the Product Title.

   

   
   

4. We recommend that you use the “find” command (“Control+F” on Windows or “Command + F” on Mac) and paste in the copied code to make sure that there are no duplicate placements leftover.

   
   

5. After inserting the new position for your preferred USB Upsell Campaign, save the theme file and manually refresh your store’s Product Page! 

   

   
   

Important: If you're using Gempages or PageFly, please refer to their respective Help Centers or the short articles we’ve provided for detailed instructions on how to achieve this. Gempages Pagefly

This article applies only to Upsell Campaigns. To see Custom Positioning tutorials for Boost Campaigns, please see:

• Custom Position using Placeholder Code
• Custom Position using App Block (Themes 2.0)

If you have any concerns or questions about custom placement, please reach out to us here at help@hextom.com