Want your bundle offer to appear exactly where you want it on your product page — not just below the Add to Cart button? 🎯

That’s exactly what the Custom Placement option in Hoppy Bundles is designed for.

By default, every bundle offer is shown below the Add to Cart button automatically. But with Custom Placement, you can position the offer anywhere on your product page using either:

• 🧩 The Hoppy Bundle App Block inside the Shopify theme editor (no coding needed!)
• 📝 A small code snippet pasted into your theme code or a Custom Liquid section

This guide walks you through both methods step by step ✨

🤔 When Should You Use Custom Placement?

Custom Placement is useful when you want to:

• Show the bundle offer above the Add to Cart button
• Place the offer next to the product description, images, or reviews
• Move the offer lower on the page — for example below the product details
• Have full control over the exact position inside your theme layout

ℹ️ Custom Placement works only on the product page. Other pages are not affected by this setting.

✅ Before You Begin

Before setting up a custom placement, make sure you have:

• ✅ The Hoppy Bundles app installed on your store
• ✅ A Bundle offer already created (or create a new one)
• ✅ The App Embed enabled in your theme (see the next step)

💡 The same steps also work for Quantity Break offers — the Placement section looks and behaves exactly the same.

⚙️ Initial Step — Enable the App Embed

For the bundle offer to appear anywhere on your storefront, the app embed must be enabled inside your Shopify theme.

Go to:

Shopify Admin → Sales Channels → Online Store → Themes → Customize → App Embeds

Then:

• Find Bulk Discount Offer (the Hoppy Bundles embed)
• Toggle it ON
• Click Save

⚠️ Without the app embed enabled, neither the default placement nor the custom placement will render on your storefront.

🛠️ Step 1 — Select Custom Placement in Your Offer

Open the Hoppy Bundles app and open the bundle offer you want to place manually.

Then:

1. Go to the Targeting & Placement tab
2. Scroll down to the Placement section
3. In the dropdown, select Custom (only on product page) instead of Below Add to Cart Button (Default)

💾 Step 2 — Save the Offer First

This step is important ⚠️

The Hoppy bundles ID and the code snippet are only generated after the offer is saved.

If you select Custom placement on a brand-new (unsaved) offer, you’ll see this message instead:

Save to see Hoppy bundles ID and code snippet

So:

1. Click Save at the top of the page
2. Return to Targeting & Placement → Placement

You’ll now see two things 👇

🆔 Step 3 — Copy Your Hoppy bundles ID & Code Snippet

Once saved, the Placement section shows:

• Hoppy bundles ID → a unique ID for this specific offer, with a copy icon next to it
• Hoppy bundles code snippet → a ready-to-use HTML snippet, also with a copy icon:

<div class="futureblink-bundle-block" id=YOUR_BUNDLE_ID></div>

ℹ️ Each offer has its own unique ID. If you create multiple bundle offers, make sure you copy the ID/snippet from the correct one.

You can now place the offer using either of the two methods below 👇

🧩 Method 1 — Place the Offer Using the Theme Editor App Block (Recommended)

This is the easiest method — no coding required 🎉

The Hoppy bundles app block can be added, removed, repositioned, and customized through the theme editor using your Bundle ID.

Follow these steps:

1. Go to Shopify Admin → Online Store → Themes → Edit Theme
2. At the top of the theme editor, switch the page selector to Products → Default product (or the product template you use)
3. In the left sidebar, click Add block inside the Product section
4. Under the Apps tab, select Hoppy Bundle
5. In the block settings, paste your Bundle ID into the Bundle ID field
6. Drag the block up or down to position it exactly where you want the offer to appear
7. Click Save

⚠️ If you leave the Bundle ID field empty, the block will show a “Please configure the ID to use App Block” warning instead of your offer — so don’t forget to paste the ID!

💡 You can reposition the block anytime by simply dragging it in the theme editor — the offer will follow the block’s position on the page.

📝 Method 2 — Place the Offer Using the Code Snippet

Use this method if you want to place the offer inside a specific spot in your theme code, or inside a Custom Liquid section/block.

Option A — Using a Custom Liquid block in the theme editor

1. Go to Shopify Admin → Online Store → Themes → Customize
2. Switch to your product template
3. Click Add block (or Add section) → choose Custom Liquid
4. Paste the code snippet from Step 3:

<div class="futureblink-bundle-block" id=YOUR_BUNDLE_ID></div>

5. Position the block where you want the offer to appear
6. Click Save

Option B — Directly in your theme code

1. Go to Shopify Admin → Online Store → Themes → ⋯ (three dots) → Edit code
2. Open your product template file — usually something like product.liquid, main-product.liquid, or a product JSON/section file (the exact file depends on your theme)
3. Paste the snippet exactly where you want the bundle offer to render:

<div class="futureblink-bundle-block" id=YOUR_BUNDLE_ID></div>

4. Click Save

⚠️ Editing theme code directly can break your layout if done incorrectly. If you’re not comfortable editing code, use Method 1 or Option A instead — or duplicate your theme first as a backup.

📌 Important Notes & Warnings

• ⚠️ Save first! The Bundle ID and snippet only appear after the offer has been saved at least once.
• ⚠️ Custom placement works only on the product page — the offer will not be injected at custom positions on other pages.
• ⚠️ Make sure the App Embed is enabled in your theme, otherwise the snippet/block will stay empty on the storefront.
• ℹ️ The snippet must keep the exact class name futureblink-bundle-block and your offer’s unique id — don’t rename them, otherwise the app won’t find the container.
• ℹ️ Each bundle offer has its own unique ID. Copying the snippet from one offer and expecting another offer to show up won’t work.
• 💡 If you switch the Placement dropdown back to Below Add to Cart Button (Default), the app will render the offer automatically again — no ID or snippet needed.

🎉 Final Result

Once everything is configured:

✅ Your bundle offer appears at the exact position you chose on the product page ✅ You can reposition it anytime from the theme editor (App Block method) ✅ The offer stays fully dynamic — prices, discounts, and variants update in real time ✅ Your product page layout looks exactly the way you designed it ✨

Using Custom Placement gives you complete control over where your bundle offers live on the page — so they fit perfectly into your store’s design and shopping flow 🚀

Updated on: 20/08/2026