Want your Upsell & Cross Sell widget to appear exactly where you want it — not just in the default spots? 🎯

That’s exactly what the Custom Position option in Hoppy Upsell & Cross Sell is designed for.

Instead of relying on the app’s automatic placement, Custom Position lets you decide the precise location of your widget using:

• 🧩 A theme App Block (no coding needed)
• 📝 A code snippet you can paste into a Custom Liquid section or your theme files

This is perfect when you want the widget to sit between specific sections — for example, right under your product description, inside a tab, or above the cart totals — so it blends naturally into your store’s design ✨

🗺️ Where Custom Position Works

Custom Position can be used on the following pages:

• Product Page → anywhere inside your product template
• Cart Page → anywhere inside your cart template

ℹ️ Custom Position is only supported on the Product Page and Cart Page. The Cart Drawer is rendered dynamically by your theme, so app blocks can’t be placed inside it — for the cart drawer, use the dedicated Cart Drawer placement type instead.

✅ Before You Begin

Make sure the following are in place before setting up a custom position:

• The Upsell Cross-Sell Slider app embed is enabled in your theme → Shopify Admin → Online Store → Themes → Edit theme → App Embeds → Upsell Cross-Sell Slider → ON → Save

  
  

  
  ⚠️ Without the app embed, the widget script never loads — so nothing will appear, even if the block is placed correctly.
• You have your Upsell ID handy. Not sure where to find it? See 🔎 How to Find Upsell ID?.

🛠️ Step 1 — Enable Custom Position in the App

There are two ways to turn on Custom Position — pick whichever matches your situation.

Option A — Create a New Custom Position Upsell

Open the Hoppy Upsell & Cross Sell app, then:

→ Click Create new upsell

→ On the placement type screen, select Custom Position

This creates a new upsell whose placement is already set to Custom position — you’ll configure its content and design as usual, then place it on your theme in the next steps.

Option B — Switch an Existing Upsell to Custom Position

Already have a Product Page or Cart Page upsell? You can convert it:

→ Open the upsell from your dashboard → Go to the Placement tab → Under Display On (Include), open the placement dropdown and select Custom position

💡 Switching to Custom position clears the automatic placement, so the widget will only appear where you place it yourself in the theme.

💾 Step 2 — Save to Get Your Upsell ID & Code Snippet

Custom Position works by matching your theme placement to a specific upsell using its Upsell ID.

After selecting Custom position:

→ Click Save

Once saved, the Placement tab reveals two ready-to-copy items:

• Upsell ID → the unique ID of this upsell (with a copy button 📋)
• Upsell code snippet → a ready-made HTML snippet (also with a copy button)

ℹ️ These only appear after saving. If you see “Save to see Upsell ID and code snippet”, just hit Save first.

🧩 Step 3 — Place the Widget on Your Theme

Now choose how you want to place the widget. Both methods work on the product template and the cart template.

Method 1 — Using the Theme App Block (Recommended)

This is the easiest, no-code way 🎉

→ Go to Shopify Admin → Online Store → Themes → Edit theme → From the top dropdown, open the template where you want the widget:

• Products → Default product (for product pages)
• Cart (for the cart page)

→ In the left panel, click Add block (or Add section) → Under Apps, select Upsell Cross-Sell Block

→ In the block settings, paste your Upsell ID into the Upsell ID field → Drag the block to your preferred position ⬆️⬇️ → Click Save

💡 Right after publishing an upsell, the app also shows an Add App Block shortcut button in the confirmation banner — it opens your theme editor directly with the block ready to add.

⚠️ If the Upsell ID field is left empty, the block displays a “Please configure the Upsell ID to use App Block.” placeholder instead of your widget — so always paste the ID.

Method 2 — Using a Custom Liquid Block / Code Snippet

Prefer more control, or want the widget somewhere app blocks aren’t available? Use the code snippet instead.

→ In the theme editor, add a Custom Liquid block or section where you want the widget → Paste the Upsell code snippet you copied from the app. It looks like this:

<div class="upsell-cross-sell-block" id=YOUR_UPSELL_ID></div>

→ Click Save

The app automatically finds this placeholder on the page and renders the matching upsell widget inside it — even if your theme re-renders the section later 🔄

💡 You can also paste the snippet directly into your theme’s Liquid files (e.g. inside a custom product section) if you’re comfortable editing code.

📌 Important Notes & Warnings

• ⚠️ App embed must stay ON — both methods depend on the Upsell Cross-Sell Slider app embed being enabled.
• ⚠️ Designed for Product & Cart pages — Custom Position is built and supported for product pages and the cart page. The widget renders wherever it finds the block/snippet placeholder on the page, so only place it on those templates — placing it elsewhere (like the home page or collections) isn’t supported and may produce unexpected results.
• 💡 One ID = one upsell — the Upsell ID inside the block or snippet decides which upsell shows. To display a different upsell, swap in its ID.
• 💡 Multiple placements — you can add the same block or snippet in more than one spot (e.g. product page and cart page) using the same Upsell ID.
• ⚠️ Publish your upsell — the upsell must be published in the app, otherwise nothing renders on the storefront.
• ℹ️ Display conditions still apply — targeting rules like customer login status, geolocation, cart value, or scheduling are still respected in custom positions. See 🎯 Advanced Targeting Options for Upsell & Cross Sell for details.

🎉 Final Result

Once everything is set up:

✅ Your upsell widget appears exactly where you placed the block or snippet ✅ It updates automatically with your content, design, and targeting settings from the app ✅ You can freely move, remove, or re-add the placement anytime from the theme editor — no need to touch the app again

Here’s what it looks like on a product page:

🛟 Troubleshooting

If your widget isn’t showing up after placement:

• 🔎 Double-check the app embed is enabled and saved
• 🔎 Confirm the Upsell ID in the block matches the upsell you published
• 🔎 Make sure you placed the block on a product or cart template
• 🔎 Verify the upsell is published and not scheduled outside the current date

Still stuck? Check Upsell & Cross Sell is Not Showing on My Store [Fixed] for a complete checklist.

📚 Related Guides

• 🔎 How to Find Upsell ID?
• 🎨 Upsell & Cross Sell – Design & Styling
• 🎯 Advanced Targeting Options for Upsell & Cross Sell
• Upsell & Cross Sell is Not Showing on My Store [Fixed]

Updated on: 15/09/2026