> ## 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 Setup Product Addons Want to increase your Average Order Value (AOV) by letting customers add extra products with a single click? 🛍️ That’s exactly what the **Product Addons** offer in **Hoppy Bundles** is designed for. With Product Addons, your customers see a list of optional products with **checkboxes** right on the product page. They simply tick the addons they want, and everything gets added to the cart together in one go ✅ ### **Perfect for things like** * 🎁 Gift wrapping or greeting cards * 🛡️ Extended warranties or protection plans * 🧢 Matching accessories (cap \+ t-shirt, socks \+ shoes) * 🧴 Complementary products (travel-size versions, refills) This guide explains each setting step by step so you can launch your first Product Addons offer in just a few minutes ⚡ --- # **✅ Before You Begin** Before creating your Product Addons offer, make sure of the following: * **Hoppy Bundles is installed** on your store and you can open it from **Shopify Admin → Apps**. * The products you want to offer as addons **already exist in your Shopify catalog** (with images and prices set). * The **Hoppy Bundles App Embed** is enabled in your theme, otherwise the widget won’t appear on your storefront. To enable the app embed, go to: **Shopify Admin → Online Store → Themes → Edit Theme → App Embeds** Then: * Find the **Hoppy Bundles** app embed * Toggle it ON * Click **Save** 💡 If you publish your offer without enabling the app embed, Hoppy Bundles will show you a reminder banner with an **Enable App Embed** shortcut button — so don’t worry, you can also do it later. --- # **🚀 Step 1 — Create a New Product Addons Offer** Open the **Hoppy Bundles** app from your Shopify Admin. Then: → Click **Create New Offer** (or the **\+ New** option) to open the offer type picker. → Select **Product Addons (With Checkboxes)** — *“Allow customers to add optional products via checkboxes.”* → Click **Create Product Addons**. The Product Addons setup page will open automatically. You’ll notice the setup page is organized into **3 tabs** on the left: * **General** → Offer content, products, discounts and settings * **Design** → Look & feel of the widget * **Targeting & Placement** → Where and to whom the widget is shown On the right side, you’ll see a **live preview** (both Desktop and Mobile) that updates instantly as you change any setting 👀 --- # **⚙️ Step 2 — Configure the General Settings** This is the main setup area. Let’s go through it section by section. --- # **🏷️ Offer Name** This name is used for internal purposes only. Customers will never see it. You can use any recognizable name such as: * Gift Wrap Addon * Warranty Upsell * Summer Accessories Addons 💡 Using proper internal naming makes it easier to identify setups later, especially if your store runs multiple offers. --- # **📝 Bundle Title** This is the heading customers see above the addon list on your product page. By default, it’s set to **“Product Addons”**, but feel free to make it your own: * “Make it a combo 🎉” * “Complete your look” * “Add these to your order” --- # **🎯 Addon Recommendation Type** This setting controls how the addon products are chosen. There are 2 available options: * **Manual Selection** → You pick the exact addon products yourself * **AI Recommended** → Hoppy Bundles automatically recommends relevant addons for each product --- ## **🙌 Manual Selection** Click **Select Products** and pick up to **3 products** (including specific variants) to show as addons. Each selected product appears as its own block where you can: * 🔢 Set the **quantity** added when the customer ticks the checkbox * ✏️ Edit the **display name** of the product (pencil icon) — the original Shopify product stays untouched * 🗑️ Remove the product from the offer ### **Show Modified Product Name** Enable this checkbox if you want the widget to display your **edited display name** instead of the original Shopify product title. ### **Example** * Original product title: *“Premium Cotton Cap — Black / One Size”* * Modified name shown in widget: *“Matching Cap 🧢”* ⚠️ You can select a maximum of **3 addon products** in Manual mode. --- ## **🤖 AI Recommended** ℹ️ These options only appear when **AddOn Recommendation Type** is set to **AI Recommended**. With AI mode, you don’t pick addon products yourself — Hoppy Bundles automatically suggests the most relevant addons for each product. Configure the following: * **Number of AI Recommended Products** → How many addon suggestions to show (default: 3\) * **AI Target Type** → Choose where the addon widget should appear: * **Specific Products** → Show on selected product pages * **Collections** → Show on products of the selected collections * **Target Products / Target Collections** → Click the select button and pick the products or collections where the AI addon widget should be displayed Selected targets appear in a list below the field, and you can remove any of them using the delete icon 🗑️ --- # **💸 Discount** Want to sweeten the deal? You can offer a discount on the addon products. --- ## **Discount Type** The following options are available: * **No Discount** → Addons are sold at full price (default) * **% Discount** → e.g. 25% off * **Flat Discount** → e.g. $10.00 off the addon total * **On Each Unit Flat Discount** → e.g. $2.00 off on each unit * **Specific Price** → Set an exact price, e.g. $29.00 ⚠️ BOGO / Buy X Get Y discount types are **not available** for Product Addons offers. --- ## **Discount** Enter the discount value here. ℹ️ This field stays disabled while **Discount Type** is set to **No Discount**. --- ## **Apply Discount On** This setting controls how many items the discount applies to. * **Same as the number of upsells** → The discount applies to all addon products in the offer (default) * **Custom Quantity** → The discount applies only to a specific number of units — enter the number in the **Custom Quantity** field that appears --- # **🎁 Free Gift** Enable the **Free Gift** checkbox if you want to automatically add a free product to the cart along with the addons. Once enabled: → Click **Select Gift Products** and choose one or more products to give away for free. Each gift product block lets you set the **quantity** and **edit the display name**, just like the addon products. 💡 Free gifts are a great way to push the addons — “Add a warranty and get a free cleaning cloth 🎁” --- # **🛠️ Settings** This section controls how the addon widget behaves on your storefront. --- ## **Show Unit Price** Enable this so customers can see the price of each individual addon product in the offer. --- ## **Skip Cart Directly to Checkout** When enabled, customers are redirected **straight to the checkout page** after adding the addons — skipping the cart page entirely. 💡 Useful for fast, impulse-style purchases. Disable it if you want customers to review their cart first. --- ## **Show Compare to Price** Enable this to show the **compare-at (strikethrough) price** in the offer, so customers can see the original price next to the discounted one. ℹ️ When enabled, an extra **Custom Compare Price** field appears. Use it to override Shopify’s compare-at price for this offer — leave it blank or 0 to keep using the Shopify listing compare price. --- ## **Use Custom Text for Inventory Tracking** Enable this to show a **custom message** to customers when a selected addon product is out of stock. ℹ️ When enabled, a text field appears where you can type your own message (e.g. *“Currently unavailable — check back soon\!”*). --- ## **Combination Discounts** This setting controls whether the addon discount can be combined with other discounts in the cart and checkout: * ✅ **Order Discounts** * ✅ **Shipping Discounts** ⚠️ Due to Shopify restrictions, this setting now applies **globally to all new offers** — not just this one. --- ## **Target Products** ℹ️ This section only appears when **AddOn Recommendation Type** is set to **Manual Selection**. Here you choose **on which products the addon widget is displayed**. Simply tick the checkboxes next to the products. ⚠️ At least one product must be selected as a target, otherwise the widget won’t show anywhere. ### **Example** You added a cap, socks and a wristband as addons, but you only want the widget to appear on the t-shirt page → tick only the t-shirt ✅ --- # **🔘 Call to Action** This is the text of the button customers click to add the selected addons to the cart. Default: **“Add Bundle To Cart”** ### **Examples** * “Add Selected to Cart 🛒” * “Yes, Add These\!” * “Complete My Order” --- # **✨ Highlighted Tag** Add a small attention-grabbing tag to the widget, e.g. **“Combo Offer”** or **“Limited Time”**. Click the 👁️ icon next to the field to show or hide the tag on the widget. --- # **📄 Footer Text** A short line of text displayed at the bottom of the widget. ### **Examples** * “Free shipping on all addons 🚚” * “Discounts applied automatically at checkout” --- # **🌍 Multiple Markets & Translations** Selling in multiple markets or languages? The **Multiple Markets** section lets you set different discount values per market/currency, and the **Translation** section lets you translate the widget texts into your store’s other languages. These are optional — your offer works perfectly fine without them. Check the dedicated Multiple Markets and Translation docs for a full walkthrough 📚 --- # **🎨 Step 3 — Customize the Design (Optional)** Switch to the **Design** tab to make the widget match your theme. You can adjust: * 🔤 **Font** → Use your theme font or pick from a list of Google Fonts * 🎨 **Typography & colours** → Title, price, tag, footer, total price and button styling * ⬛ **Border width & radius** → Round or sharpen the widget corners * 🖼️ **Background & border colours** → For product rows, footer, highlighted tag and button Every change shows up instantly in the live preview on the right — so play around until it feels right ✨ 💡 The default design already blends in nicely with most themes, so you can safely skip this tab on your first setup. --- # **📍 Step 4 — Set Targeting & Placement** Switch to the **Targeting & Placement** tab to control where and to whom the widget appears. --- ## **Placement** There are 2 placement options: * **Below Add to Cart Button (Default)** → The widget automatically appears under the Add to Cart button on your product pages. This is the recommended option for most stores. * **Custom (Only on Product Page)** → Place the widget anywhere on your product page using the **Hoppy Bundles app block** in the theme editor, or paste the provided **code snippet** directly into your theme. ⚠️ The **Hoppy Bundles ID** and the code snippet only become visible **after you save the offer for the first time** — so save first, then come back to grab them. --- ## **Other Targeting Options** Below the Placement card you’ll also find: * **Customer Targeting** → Show the widget to everyone, only logged-in customers, specific customer tags, or customers above a lifetime spend * **Geolocation Targeting** → Show the widget worldwide or only in specific countries * **Scheduling** → Set a start and end date/time for the offer (perfect for limited-time promotions ⏰) All of these are optional — by default the offer is visible to everyone, everywhere, all the time. Refer to the dedicated Targeting docs if you want to go deeper 📚 --- # **💾 Step 5 — Save & Publish Your Offer** Almost done\! 🎉 --- ## **Save Your Offer** Whenever you make changes, a **Save bar** appears at the top of the page. → Click **Save** to store your setup as a draft. You’ll notice the **Draft** badge next to the page title — this means the offer is saved but not yet live on your store. --- ## **Publish Your Offer** Once you’re happy with the preview: → Click the **Publish** button at the top of the page. The badge changes to **Published** 🟢 and your addon widget goes live on the selected product pages. If the app embed isn’t enabled yet, you’ll see a banner with an **Enable App Embed** button — click it, toggle the embed on in the theme editor, and you’re all set ✅ --- ## **Editing Later** Come back to the offer anytime from the Hoppy Bundles dashboard. From here you can also: * **Duplicate** → Create a copy of the offer (handy for creating variations) * **Delete** → Permanently remove the offer * **Unpublish** → Take the offer offline without deleting it ⚠️ Deleting an offer is **not reversible** — the offer and its discount will be permanently lost. --- # **⚠️ Important Things to Know** * ⚠️ Only **one published offer per set of products** is allowed. If a published bundle with the exact same products already exists, you’ll get an error when saving — either edit the existing one or change the product selection. * ⚠️ Manual mode supports a maximum of **3 addon products**. * ⚠️ At least one **Target Product** must be ticked in Manual mode, otherwise the widget won’t appear anywhere. * ⚠️ BOGO / Buy X Get Y discounts are not available for Product Addons. * ℹ️ The **Combination Discounts** setting applies globally to all new offers due to Shopify restrictions. * 💡 If the widget doesn’t show up after publishing, double-check that the **Hoppy Bundles App Embed** is enabled in your theme and that the offer shows the **Published** badge. --- # **🎉 Final Result** Here’s what your customers will see on the product page: * ✅ A clean list of optional addon products with checkboxes, right below the Add to Cart button * 💰 Live prices (and discounts, if configured) for each addon * 🔢 A total that updates as customers tick or untick addons * 🔘 Your custom call-to-action button that adds everything to the cart in one click * 🎁 Free gifts added automatically, if enabled Customers simply tick what they want and click the button — the main product, the selected addons and any free gifts all land in the cart together, with discounts applied automatically ✨ That’s it — your Product Addons offer is live and ready to boost your AOV\! 🚀 💡 Need a hand? Use the in-app **Contact Support** option anytime — we’re happy to help you get set up.