Bundle as Product theme settings

Overview

The Bundle as Product feature automatically replaces your product page's standard add-to-cart form with a customized bundle widget. By default, it hides the original form elements and displays the bundle interface instead.

These advanced settings allow you to customize this automatic behavior when the default approach doesn't work perfectly with your theme, or when you want to implement custom behavior for your specific needs.

Table of Contents

  • When to use these settings
  • Implementation
  • Available settings
    • atcBtnSelector: CSS selector of add-to-cart button
    • hideElements: CSS selector of extra elements to hide
    • volumeVariantSelector: - Specific CSS selector if theme contains volume variant selector
    • excludeHidingSelector: CSS selector of elements to not hide
    • mainCartForm: CSS selector of main add to cart form
  • Common use cases

When to use these settings

You should consider using these settings if you experience:

  • Bundle widget appears but original form elements are still visible
  • Add to cart button is not being found correctly
  • Important elements are being hidden unintentionally
  • Bundle widget is placed in the wrong location
  • Theme-specific elements are interfering with the bundle functionality

Note: These are advanced settings. Use them when the default behavior isn't working correctly with your theme, or when you want to customize the behavior for your specific requirements. These settings can be updated anytime to adjust the bundle as product functionality.

Implementation

Add the settings object in your theme's theme.liquid file, immediately after the opening html

tag:

<head>
<script>
window.revyBundleBapSettings = {
  atcBtnSelector: '.my-custom-add-to-cart',
  hideElements: '.elements-to-hide',
  // ... other settings
};
</script>
  <!-- Your existing head content -->
</head>

<!-- Rest of your page content -->

Important: This script must be placed before the Revy Bundle app loads to ensure proper initialization.

Available settings


atcBtnSelector

Purpose: Specifies a custom CSS selector for the Add to Cart button.

When to use: When the app can't automatically find your theme's add-to-cart button.

Example:

window.revyBundleBapSettings = { atcBtnSelector: '#custom-add-to-cart-btn' };

Possible use cases: - Class-based selector for themes with custom button classes - ID-based selector when button has specific identifier - Attribute-based selector for data-driven themes - Complex selector for nested button structures

hideElements

Purpose: Defines additional elements to hide when the bundle widget is active.

When to use: When you want to hide specific theme elements that interfere with the bundle display.

Example:

window.revyBundleBapSettings = { hideElements: '.product-badges, .delivery-info, .payment-buttons' };

Possible use cases: - Hide promotional badges that overlap with bundle widget - Hide express payment buttons that conflict with bundle functionality - Hide delivery information that becomes irrelevant with bundles - Hide multiple theme-specific elements that interfere with bundle display

volumeVariantSelector

Purpose: Identifies volume/bulk variant selectors that should be treated specially.

When to use: When your theme has volume discounts or bulk variant selectors that need special handling.

Example:

window.revyBundleBapSettings = { volumeVariantSelector: '.volume-selector, [data-volume-discount]' };

Possible use cases: - Themes with bulk purchase options that need special handling - Volume discount selectors that should remain functional - Quantity break elements that need to work alongside bundles - Wholesale pricing components that require custom behavior

excludeHidingSelector

Purpose: Prevents specific elements from being hidden by the bundle system.

When to use: When important elements are being hidden incorrectly and need to remain visible.

Example:

window.revyBundleBapSettings = { excludeHidingSelector: '.keep-visible, [data-important], .theme-essential' };

Possible use cases: - Keep important navigation elements visible - Preserve notification bars and alerts - Maintain essential theme functionality - Protect custom theme components from being hidden - Ensure accessibility elements remain available

mainCartForm

Purpose: Specifies the main cart form container for bundle placement.

When to use: When the bundle widget appears in the wrong location on your product page.

Example: window.revyBundleBapSettings = { mainCartForm: '.main-product-form' };

Possible use cases: - Themes with multiple form containers requiring specific targeting - Custom form wrappers that need precise bundle placement - Data-driven form structures in modern themes - Complex product page layouts with nested form elements


Common use cases


Case 1: Theme with Custom Add-to-Cart Button

Problem: Bundle widget appears but original button is still visible.

Solution: javascript window.revyBundleBapSettings = { atcBtnSelector: '.theme-specific-add-to-cart-button' };


Case 2: Hiding Theme-Specific Elements

Problem: Theme elements overlap with bundle widget.

Solution: javascript window.revyBundleBapSettings = { hideElements: '.product-recommendations, .recently-viewed, .social-sharing' };


Case 3: Preserving Important Elements

Problem: Bundle system hides essential theme functionality.

Solution: javascript window.revyBundleBapSettings = { excludeHidingSelector: '.size-chart-button, .product-reviews-summary' };


Case 4: Complex Theme Requirements

Problem: Multiple customizations needed.

Solution: javascript window.revyBundleBapSettings = { atcBtnSelector: '.custom-cart-button', hideElements: '.theme-extras, .promotional-content', excludeHidingSelector: '.essential-info, .trust-badges', mainCartForm: '.main-product-container' };



Need help? Contact our support team through the Unlimited Bundles & Discounts app dashboard.

Still need help? Contact Us Contact Us