Embedding Bundles in Your Theme

Bundable now offers a theme block that lets you embed the bundle builder directly into any page of your Shopify theme — no code required.

Using the Bundle Widget Block

  1. Go to your Shopify admin → Online Store → Customize
  2. Navigate to the page where you want to add the bundle builder
  3. Click Add Block (or Add Section)
  4. Search for Bundable and choose the Bundle Widget block
  5. In the block settings, enter the Bundle Hash ID for the bundle you want to display. You can find this on the Bundable dashboard next to each bundle.
  6. Save your changes

The bundle builder will load directly on the page, matching your theme’s styling.

Styling the Block

The block has its own styling settings in the theme editor: a color mode (including Match my theme, which picks up your theme’s colors and button style automatically), color pickers for buttons, text, background and borders, a corner style, and layout options such as full page width. Fonts always follow your theme. See Styling the Bundle Widget Block for details.

Auto-Redirect Block

Bundable also provides a redirect block that automatically sends customers to the bundle builder page when they visit the bundle product page in your store. This prevents customers from seeing the raw bundle product and instead takes them directly to the interactive builder.

This block is installed in your theme’s head section and works automatically for any product that has a Bundable hash ID in its metafields.

Traditional Method: Navigation Links

You can also share your bundle builder pages by adding them to your store’s navigation:

  1. Go to Online Store → Navigation
  2. Edit your menu
  3. Add a new menu item with the bundle URL from the Bundable dashboard

App Proxy URLs

Bundle builder pages are served through Shopify’s app proxy system. Your bundle URLs follow this format:

https://your-store.myshopify.com/tools/bundle-builder/[hash-id]/new

These URLs are part of your store’s domain, so they load seamlessly within your theme’s header and footer.

Need help setting this up? Contact us at support@soviapps.com.

Still need help? Contact Us Contact Us