How to place a widget in a custom position?

How to place a widget in a custom position?

You can place the widget anywhere on the page.
 
Note: Unfortunately custom pages are not compatible with UFE, so it is not possible to add the widget onto such pages.
Example URL for custom pages.
Example URL for custom pages.
 

How to place the ufe shortcode in the theme?

METHOD 1

This method will work on both page builders and the Shopify theme liquid files.
 
  • You can place the custom HTML/Liquid block (It will be available on all page builders) inside the gempages or other page builder then give <div class="ufe-custom-upsell"></div> and save it.
 
Example of how to place HTML/Liquid block in Pagefly page builder
Example of how to place HTML/Liquid block in Pagefly page builder
 
  • You can also place the <div class="ufe-custom-upsell"></div> in the theme liquid files too.
  • Then give .ufe-custom-upsell (including dot) inside position > inpage upsell position
 
notion image
Want to position multiple upsells in a single page?
Step1: add custom div files like
<div class="ufe-custom-upsell-1"></div>
<div class="ufe-custom-upsell-2"></div>
<div class="ufe-custom-upsell-3"></div>
in places you want to position offers.
Step2: open each widget and in position settings set any one of the appropriate selector
.ufe-custom-upsell-1 or .ufe-custom-upsell-2 or .ufe-custom-upsell-3
in inpage upsell position box.
 

METHOD 2 (In Shopify Homepage)

Go to Shopify admin > Online Store > Themes > Customize
Select Add section>Custom HTML>Custom HTML
 
  • Clear the content in the HTML text box
  • add <div class="ufe-custom-upsell"></div> and click save
 
notion image
 
Pro Tip! 
you can also position the content by dragging "Custom HTML" block up and down in the customize section
Pro Tip! you can also position the content by dragging "Custom HTML" block up and down in the customize section
 

METHOD 3 (Least recommended way)

Find the HTML id of the element you want to place by right-clicking the element > inspect element in Chrome browser
It's not recommended to use this method if you don't have developer knowledge about how to select the right unique html id
 
notion image
 
In this method paste this selector id from the page inside position > inpage upsell position in step 2.
 
 
 
Hope you've got some value from this article. Let us know your feedback 🙂 We are excited to hear your thoughts.
 
Did we miss something?
No worries! Message us by clicking the chat icon 💬  inside the app.
Or Just email our team at support@helixo.co ✌️
Did we miss something? No worries! Message us by clicking the chat icon 💬 inside the app. Or Just email our team at support@helixo.co ✌️