> For the complete documentation index, see [llms.txt](https://sitesbyseth.gitbook.io/sitesbyseth-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sitesbyseth.gitbook.io/sitesbyseth-docs/reign/sections/product-bundle.md).

# Product Bundle

Reign has **two** bundle tools:

1. The **Product bundle section** — a full "Complete Collection" builder for up to 4 products with a percentage discount, for homepage/landing pages
2. The **Product bundle block** on the product page — a compact "Frequently bought together" with up to 2 add-ons

## Product bundle section

Add via **⊕ Add section → Product bundle**. The wrapper section has **Full width**, **Color scheme**, and padding settings; everything else lives in the bundle block panel.

### Content & pricing

| Setting         | What it does                                   | Default                   |
| --------------- | ---------------------------------------------- | ------------------------- |
| Eyebrow text    | Kicker line                                    | "Limited Edition"         |
| Headline        | Bundle title                                   | "The Complete Collection" |
| Subheadline     | Supporting line                                | "Curated essentials…"     |
| Button text     | CTA                                            | "Add Bundle to Cart"      |
| Savings text    | Optional line under the price ("You save $45") | —                         |
| Bundle discount | 0–50% off the combined price                   | 15%                       |

⚠️ **Set up the matching discount in Shopify.** The section displays the discounted total and adds all items to the cart — create an automatic discount in **Shopify admin → Discounts** (e.g. "Buy X get % off" for those products) so the price at checkout matches what you promised.

### Layout

| Setting                    | What it does                | Default      |
| -------------------------- | --------------------------- | ------------ |
| Card layout                | Image on top / left / right | Image on top |
| Image width                | 30–70% (horizontal layouts) | 50%          |
| Image fit                  | Cover or Contain            | Contain      |
| Products per row (desktop) | 2–4                         | 4            |
| Size selector type         | **Buttons** or Dropdown     | Buttons      |

### Products 1–4

Each slot: **Product** picker, optional **Custom image**, **Custom title**, **Description**, and **Available sizes** — a comma list (`S, M, L, XL`) to limit which variants are offered; blank shows all.

### Styling

Complete color control: background, eyebrow/headline/subheadline, card background/border, product title/price/description, total label, original/discounted price, button (bg/text/hover), savings text — plus a 9-color size-button group (default/hover/selected × bg/text/border) and spacing/radius sliders (section padding 60, card radius 8, button radius 4, size-button radius 20).

## "Frequently bought together" block (product page)

On the product template, inside **Product information**, the **Product bundle** block shows the current product + up to 2 add-ons with size dropdowns and one add-all button.

| Setting                             | What it does                 | Default                      |
| ----------------------------------- | ---------------------------- | ---------------------------- |
| Add-on product 1 / 2                | The companion products       | —                            |
| Section label                       | Heading                      | "Frequently bought together" |
| Total price label                   | Label                        | "Bundle total"               |
| Button label                        | CTA                          | "Add bundle to cart"         |
| Size field label / placeholder      | For multi-variant add-ons    | "Size" / "Select size"       |
| Bundle products layout              | Horizontal or Vertical stack | Horizontal                   |
| Product image size                  | 40–120px                     | 64                           |
| Text / label colors, button bg/text | Styling                      | dark/#FFF                    |
| Vertical padding / Desktop width    | Spacing                      | 16 / 100%                    |

💡 **Pro tip:** Pair a hoodie with its matching sweatpants and beanie. Keep add-ons cheaper than the main product — a $30 accessory on a $90 hoodie converts far better than a second $90 item.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://sitesbyseth.gitbook.io/sitesbyseth-docs/reign/sections/product-bundle.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.