Skip to main content

​
Bundle Templates

Bundle templates in Glood.AI control how product bundles are displayed in your Shopify store. Similar to section templates, they use Liquid templating with JavaScript hooks and CSS, rendered via Preact and LiquidJS.

​
What are Bundle Templates?

Bundle templates are modular components that determine how your product bundles appear to customers. They are:
  1. Liquid-Powered: Use Liquid templating for dynamic content rendering, consistent with Shopify’s template language.
  2. JavaScript-Enhanced: Templates include JS hooks that run at key lifecycle points — configuration load, render, variant change, and cart operations.
  3. Preact-Rendered: The bundle storefront uses Preact for efficient UI rendering and state management.
  4. Multi-Component Structure: Each template consists of:
    • Liquid template for markup
    • JavaScript hooks for interactivity
    • CSS (with Liquid variables) for styling
    • Settings JSON for configuration
    • Translation strings for internationalization

​
Layout Types

Bundle templates support two layout types:
LayoutValueDescription
BundlebundleFull bundle display on the product page, showing all bundled products together
Bundle Componentbundle_componentComponent selector view, allowing customers to customize bundle selections
The template conditionally renders different markup and applies different settings based on the active layout: 
{% if config.layout == 'bundle_component' %}
  {% assign setting = template.settings.bundleComponent %}
{% else %}
  {% assign setting = template.settings.bundle %}
{% endif %}

​
Template Components Overview

​
Liquid Template

The main markup defining bundle structure — product cards, images, titles, prices, variant selectors, and add-to-cart elements. See Default Template.

​
JavaScript Hooks

Five lifecycle hooks for customizing bundle behavior:
  • OnConfigLoad — modify bundle data at load time
  • OnBundleRender — transform product data before rendering
  • OnVariantChange — respond to variant selections
  • OnAddToCart — intercept add-to-cart actions
  • OnAddedToCart — handle post-cart operations
See Hooks for full documentation.

​
CSS Template

Liquid-powered CSS that uses template settings for dynamic theming — colors, fonts, sizes, and spacing are all configurable. See Default CSS.

​
Settings

JSON configuration controlling display mode, product card styling, pricing, colors, spacing, and mobile behavior. See Settings.

​
Translations

Localized text strings for all user-facing bundle UI elements. See Translations.

​
Extension Points

Customize bundle behavior through JavaScript hooks: 
return {
  OnBundleRender: function(bundle, utils, states) {
    // Transform product data before rendering
  },
  OnVariantChange: function(variantId, utils) {
    // Handle variant selection changes
  }
};

​
Libraries

The bundle template system uses the following core libraries:
  • Preact (^10.22.1) — Lightweight UI library for rendering bundle components
  • LiquidJS (^10.19.0) — Template engine for rendering Liquid markup on the client side

​
Next Steps

​
Support

If you need help with creating or customizing bundle templates, contact our support team at support@glood.ai