> ## Documentation Index
> Fetch the complete documentation index at: https://docs.glood.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> Learn about bundle templates in Glood.AI

# Bundle Templates

Bundle templates in Glood.AI control how product bundles are displayed in your Shopify store. Similar to [section templates](/for-developers/section-template/introduction), 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:

| Layout               | Value              | Description                                                                    |
| -------------------- | ------------------ | ------------------------------------------------------------------------------ |
| **Bundle**           | `bundle`           | Full bundle display on the product page, showing all bundled products together |
| **Bundle Component** | `bundle_component` | Component selector view, allowing customers to customize bundle selections     |

The template conditionally renders different markup and applies different settings based on the active layout:

```liquid theme={null}
{% 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](/for-developers/bundles/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-developers/bundles/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](/for-developers/bundles/default-css).

### Settings

JSON configuration controlling display mode, product card styling, pricing, colors, spacing, and mobile behavior. See [Settings](/for-developers/bundles/settings).

### Translations

Localized text strings for all user-facing bundle UI elements. See [Translations](/for-developers/bundles/translations).

## Extension Points

Customize bundle behavior through JavaScript hooks:

```javascript theme={null}
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

* View the [Default Template](/for-developers/bundles/default-template) markup
* Explore [Hooks](/for-developers/bundles/hooks) for lifecycle customization
* Check [Settings](/for-developers/bundles/settings) for configuration options
* Review [Translations](/for-developers/bundles/translations) for localization

## Support

If you need help with creating or customizing bundle templates, contact our support team at [support@glood.ai](mailto:support@glood.ai)