How to Position Your Buno Widget Anywhere in Your Store

The Buno app automatically adds your offer widget to the product page, but sometimes you need more control. Whether you want to move it below the "Add to Cart" button, display it on landing pages, or integrate it with page builders, this guide covers everything you need to know.

Widget Snippet Overview

The Buno widget is powered by a simple, flexible snippet that can be placed anywhere in your store:

1<buno-offer product-id="{{ product.id }}"></buno-offer>
Copy

You can use this snippet as an app block in the theme customizer, or embed it directly into any liquid template.

Required Elements for the Widget to Work

Before positioning your widget, understand the three essential elements needed:

1. Product ID - Usually populated automatically with {{ product.id }} but can be hard-coded for specific products
2. Form Container - The widget must be inside a form that handles cart additions
3. Submit Button - A form submit button that triggers the add-to-cart action

Here's the basic structure:

1
2<form action="/cart/add" method="post" enctype="multipart/form-data">
3  <buno-offer product-id="{{ product.id }}"></buno-offer>
4  <button type="submit" name="add">Add to Cart</button>
5</form>
Copy

Repositioning on Product Pages

Method 1: Using the App Block (Recommended)

The easiest way to reposition your Buno widget:

1. Go to Online Store → Themes → Customize
2. Navigate to a product page
3. In the product information section, click "Add block"
4. Select "Buno Bundles" from the app blocks
5. Drag the block to your desired position
6. Keep the product selection as "Current page"

This method automatically handles all the technical requirements and gives you visual control over placement.

Method 2: Custom Liquid Block

For themes that don't support app blocks or when you need more control:

1. Add a Custom Liquid block to your product section
2. Insert the Buno snippet:

1<!-- Form wrapper -->
2<form action="/cart/add" method="post" enctype="multipart/form-data">
3  <!-- Buno widget with product ID -->
4  <buno-widget product-id="{{ product.id }}"></buno-widget>
5  <!-- Submit button (required) -->
6  <button type="submit" name="add">Add to Cart</button>
7</form>
Copy

The widget will automatically inherit the product context and form from the surrounding product page.

Adding Widget to Homepage Featured Products

To display quantity breaks on your homepage featured product section:

Option 1: App Block Method

1. Navigate to your homepage in the theme customizer
2. Find your featured product section
3. Add the "Buno Bundle" app block
4. Select the specific product you want to feature
5. Position the block where it looks best

Option 2: Custom Liquid Method

Add this snippet to a custom liquid block in your featured product section:

html

1<buno-offer product-id="{{ section.settings.featured_product.id }}"></buno-offer>
Copy

Integration with Page Builders

When using page builders like PageFly, Shogun, or GemPages, follow these steps:

1. Create a form element in your page builder
2. Add the Buno snippet inside the form
3. Include an add-to-cart button within the same form
4. Set the form action to /cart/add

Finding Your Product ID

To get the Product ID for hard-coding:

1. Go to your Shopify admin
2. Navigate to Products → Select your product
3. Look at the URL: admin.shopify.com/store/your-store/products/1234567890
4. The number at the end (1234567890) is your Product ID

Custom Landing Pages

Using Featured Product Sections

The best approach for custom pages is to use a featured product section with the Buno app block, as this automatically handles all the form requirements.

Theme Integration Tips

• Match your theme's button styles for consistency
• Use your brand colors in the widget styling
• Ensure proper spacing with surrounding elements
• Test on mobile devices for responsive behavior

Troubleshooting Common Issues

Widget Not Appearing

• Ensure the snippet is inside a <form> element
• Check that there's a submit button in the same form
• Verify the product ID is correct and the product exists

Page Builder Conflicts

• Some page builders strip out custom HTML - use their HTML/code blocks
• Test in preview mode to ensure the widget renders correctly
• Contact support if you encounter page builder-specific issues

Best Practices

1. Test thoroughly - Always test your widget placement on different devices
2. Keep it visible - Place the widget where customers naturally look for pricing
3. Maintain consistency - Use the same placement across similar product pages
4. Monitor performance - Track how different placements affect conversion rates
5. Update regularly - Keep your widget styling consistent with theme updates

Need Help?

If you're having trouble positioning your Buno widget or need custom implementation assistance, reach out to our support team. We're here to help you get the most out of your bundle offers!