Custom Position using Placeholder Code
Custom placement for our Ultimate Sales Boost Product Page widgets will allow you to place the various USB widgets wherever you would like on your store Product Pages!
Enabling Custom Position Widget
The Custom Placement feature is located at the bottom of each Product Page widget.
Once you check the “Use custom position on product page” option, a new dialog box will appear underneath which includes instructions on how to use this feature.
Here are the HTML codes for each widget:
Message
<div class="htusb-placeholder-static"></div>
Get-it-by timer
<div class="htusb-placeholder-deadline"></div>
BOGO
<div class="htusb-placeholder-bogo"></div>
Countdown Timer
<div class="htusb-placeholder-countdown"></div>
Stock inventory message
<div class="htusb-placeholder-stock"></div>
Payment badge
<div class="htusb-placeholder-trust"></div>
Trust badge
<div class="htusb-placeholder-trust-advanced"></div>
After copying the custom placement code, make sure to save your campaign before moving on to the next step!
For this example, the Get-It-By timer will be moved to just under the Free Shipping message on the Product Page.
Opening Shopify Editor
Once you have saved the campaign, navigate to your Online Store -> Themes page on your Shopify Admin.
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 backup your store’s theme file before making any changes to the code.
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 this example, the theme on this store is called Debut and the Product Page file is named “product-template.liquid” and is located within the “Sections” folder.
Once in the Product Page liquid file for your theme, locate where you would like to place the widget on the page. For this example, the code is placed just under the “Shipping Policy”.
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. In this case the original Get-It-By timer was leftover.
Simply remove the duplicated code.
After inserting the new position for your preferred USB widget, save the theme file and manually refresh your store’s Product Page!
The Get-It-By timer is now just below the Free Shipping message!
You can also watch our video tutorial on how to use the custom placement feature.
This article is aimed for themes that does not utilize Shopify 2.0 themes, or a third party theme where the app block feature cannot be supported. For setting up the widget using App Block, refer to this article Custom Position using App Block (Themes 2.0)