This guide explains how to manually add Bundle and Discount blocks to your store using the Manual Integration feature — ideal when your theme doesn't support App Blocks, or when you want to display bundle blocks in a custom position such as the homepage, collection pages, or custom sections.
🧩 What is Manual Integration?
If your theme doesn't support App Blocks, you can use the Manual Integration feature to add bundle blocks to your product pages. You can also place Bundle or Discount blocks in a custom position on your store by pasting a small HTML code snippet where you'd like the widget to appear.
👥 Who is This Feature For?
This feature is designed for merchants who:
Use themes that do not support App Blocks.
Want to display bundle blocks in specific locations or within custom HTML on Product Pages.
Want to display bundle blocks on collection pages, featured product sections, or custom pages that include product data (Beta).
Want to embed the bundle widget directly on the bundle's product page, so customers can purchase the bundle there instead of visiting the separate bundle page link.
📌 Key Requirement: Product Data
The only requirement is that the product data must be rendered on the page. The bundle widget relies on the product information to determine which bundle to display. If the product data is not available on the page (for example, a homepage section without any product content), the widget will not be able to render correctly.
📌 Important: For bundles that use a dedicated bundle page (such as a Fixed Pricing Bundle / Build-a-Box), the bundle only applies when the purchase goes through the bundle page or the bundle widget. If a customer orders the parent product directly from its product page without the widget, the child products will not be added to the order and their inventory will not be deducted. Embedding the bundle snippet on the product page (as described below) ensures orders placed there correctly include all child products.
🛠️ Step 1: Open the Manual Integration Page
In the Appstle Bundles dashboard, go to Design — this opens the Manually Adding Bundle and Discount Blocks page.
📋 Step 2: Choose Your Offer Type
Each offer type has its own code snippet. Open the tab for the offer you want to display:
Volume Discount
Combo Bundle
Product Discount
Buy X Get Y Discount
Dynamic Bundle
Sectioned Bundle
And more, under More views.
📎 Step 3: Copy the Code Snippet
Each tab provides the snippets for that offer type. Click Copy next to the snippet you need:
Code Snippet for the Product Page → Add this snippet to display the block on the product page. For example, the Volume Discount snippet is:
<div class="ab-volume-discount-container" id="appstleVolumeDiscountContainer"></div>
Code Snippet for Non-Product Pages (Beta) → Use this snippet to display the block on pages other than the product page (such as the homepage or collection pages), as long as product data is rendered on that page.
🧩 Step 4: Paste the Snippet in Your Theme
In your Shopify Theme Editor, add a Custom Liquid (or custom HTML) section/block on the page where you want the widget to appear.
Paste the copied snippet into it. You can place the code above the Add to Cart button, below it, or anywhere else you'd like the widget to appear.
On customized themes, the snippet may need to be placed within the product template itself (for example, inside the product form section).
Save your theme changes and preview the page on your storefront.
🔧 Troubleshooting: Widget Not Rendering?
If the widget doesn't appear after adding the snippet:
Check the product data → Make sure the page or section actually renders product information; without it, the widget cannot determine which bundle to display.
Theme editor limitations → Some themes don't render the code properly through the Theme Editor's Custom Liquid section. In these cases, the snippet may need to be added directly to the relevant theme file (for example, the Buy Buttons file) instead.
Theme interference → A theme element may be interfering with the widget. Our team can review this and apply the fix for you.
Child products missing from orders/inventory not deducted → This usually means the order was placed through the parent product page without the bundle widget. Child products are only added (and their inventory tracked) when the purchase goes through the bundle page or the embedded widget — adding the snippet to the product page resolves this.
If you need any assistance with the integration, just let us know the exact location where you'd like the widget to appear — our support team is happy to help with the implementation.
🌟 Top-Rated 24/7/365 Support
At Appstle, our expert support team is available around the clock to help with everything from setup to troubleshooting.
Why Appstle Support?
🕒 24/7/365 Availability: Always here when you need us.
🎯 Expert Help: Personalised support tailored to your business.
⚡ Quick Resolutions: Fast and efficient solutions to keep you moving.
Contact Support:
📧 Email: support@appstle.com
💬 Live Chat: Instant help via live chat.
With Appstle, you're never alone. Our team is always here to support your success!