> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 📍 How to set Bundles Offer for custom placement

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 🚀