# Products bundle: Choose

<figure><img src="/files/5Wf7jwGIKjYdRfWX2IN7" alt=""><figcaption></figcaption></figure>

Create a customizable product bundle that lets customers mix and match items while enjoying a built-in discount.

{% hint style="warning" %}
This section only displays the bundle UI. To activate the actual discount at checkout, you must set it up in **Shopify admin > Discounts**.

[#how-to-set-up-the-discount](#how-to-set-up-the-discount "mention")
{% endhint %}

## How to add a Products bundle: Choose section to your Shopify store

{% hint style="success" %}

1. In the theme editor **(Customize)**, click **Add section.**
2. Select **Products bundle: Choose** section.
3. Make necessary changes.
4. **Save.**
   {% endhint %}

## How to customize a Products bundle: Choose section <a href="#how-to-customize-a-banner-with-tabs-section" id="how-to-customize-a-banner-with-tabs-section"></a>

### Section settings

{% hint style="success" %}
The section shows an **Add bundle to cart** button on the left of the bundled products list.

![](/files/Y9pfWS0Fso33XWoIEd0o)

✅ Customers can pick the variant (e.g., size, color) before adding everything to their cart.

* To change this button label, go to **Actions > Edit default theme content**.

![](/files/g8MnE1JR94BisunutjD7)

![](/files/l7GpAmqlHmG8mmQsb4K6)
{% endhint %}

#### General

<table><thead><tr><th width="231.00537109375">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Products</strong></td><td>Select products to include in the bundle section.</td></tr><tr><td><strong>Minimum items to reach discount</strong></td><td>Set the minimum number of products required to unlock the discount.</td></tr><tr><td><strong>Prevent duplicate products in the bundle</strong></td><td>Prevent customers from adding the same product multiple times in a bundle.</td></tr></tbody></table>

#### Layout

<table><thead><tr><th width="231.00537109375">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Columns</strong></td><td>Adjust the number of product columns displayed.</td></tr><tr><td><strong>Horizontal gap</strong></td><td>Control the horizontal spacing between product cards.</td></tr><tr><td><strong>Vertical gap</strong></td><td>Control the vertical spacing between product cards.</td></tr></tbody></table>

#### Product cards

<table><thead><tr><th width="231.00537109375">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image ratio</strong></td><td>Set the aspect ratio of product images.</td></tr><tr><td><strong>Text line limit</strong></td><td>Limit the number of lines shown for product titles.</td></tr></tbody></table>

{% tabs %}
{% tab title="Inherit" %}

<figure><img src="/files/wSGDtLmi9OvvQLu0i07G" alt=""><figcaption></figcaption></figure>

Use global theme settings, follow the image ratio defined in **Theme settings → Product cards**.

{% hint style="info" %}
Learn more: [Product cards](/pebble-theme/theme-settings/product-cards.md)
{% endhint %}
{% endtab %}

{% tab title="Auto" %}

<figure><img src="/files/5L0CZa0X1dEs2qISZY7R" alt=""><figcaption></figcaption></figure>

Adapt to image size, keeping the original aspect ratio of the product image
{% endtab %}

{% tab title="Square (1/1)" %}

<figure><img src="/files/KsOfqPrxfR9TYUGx1vEd" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Portrait (3/4)" %}

<figure><img src="/files/wBzJfn2vyQgYtDyTNFDO" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Landscape (4/3)" %}

<figure><img src="/files/rH63VFIKCROpFuEVd5gm" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

#### Mobile layout

<table><thead><tr><th width="231.00537109375">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Enable swipe on mobile</strong></td><td>Allow horizontal swipe interaction on mobile devices.</td></tr><tr><td><strong>Mobile columns</strong></td><td>Set the number of columns displayed on mobile.</td></tr><tr><td><strong>Mobile horizontal gap</strong></td><td>Adjust horizontal spacing between items on mobile.</td></tr><tr><td><strong>Mobile vertical gap</strong></td><td>Adjust vertical spacing between items on mobile.</td></tr></tbody></table>

{% tabs %}
{% tab title="Enable swipe on mobile" %}

<figure><img src="/files/vHP3JyImadTEhER7kYYN" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="1 column" %}

<figure><img src="/files/KZzXowNUoT3iZrNnv4AR" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="2 columns" %}

<figure><img src="/files/qMA9iUsGmNvgs1vXN596" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
Check out other section settings: [Overview](/pebble-theme/theme-sections/overview.md#common-settings-available-in-most-sections)
{% endhint %}

### Block settings

{% tabs %}
{% tab title="Header" %}

<figure><img src="/files/xGQfMt121nKq88s6PRUC" alt=""><figcaption></figcaption></figure>

Use the **Header** block to create and customize the section’s heading and introductory content.

<table><thead><tr><th width="214.1806640625">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Alignment</strong></td><td>Set the header alignment: left, center, or right.</td></tr><tr><td><strong>Devices</strong></td><td>Switch between desktop and mobile padding settings.</td></tr><tr><td><strong>Bottom</strong></td><td>Adjust the spacing below the header.</td></tr></tbody></table>

{% hint style="info" %}

#### 📦 Nested dynamic blocks

* **Heading** – Add a main title
* **Subheading** – Provide supporting text above or below the heading
* **Text** – Include additional descriptions or details
* **Image** – Display an image or icon
* **Button** – Add a call-to-action
  {% endhint %}

Learn more: [Basic](/pebble-theme/theme-blocks/basic.md)
{% endtab %}
{% endtabs %}

### 📌 How to set up the discount <a href="#how-to-set-up-the-discount" id="how-to-set-up-the-discount"></a>

The theme only displays the bundle visually. To make the discount functional at checkout, follow these steps:

{% hint style="success" %}

#### Create the discount in Shopify admin: <a href="#create-the-discount-in-shopify-admin" id="create-the-discount-in-shopify-admin"></a>

1. Go to **Shopify Admin > Discounts**
2. Click **Create Discount**
3. Choose:

* **Type**: `Amount off products`
* **Method**: `Automatic discount`

4. Set **Discount value**: e.g., 15%
5. Under **Applies to**, select **Specific products** → Choose the products used in the section.
6. Set **Minimum quantity of items**: Match the tier settings (e.g., 3 items minimum).
   {% endhint %}

<figure><img src="/files/wKa5EF4u5hIdjUXbSHfN" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: 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:

```
GET https://docs.foxecom.com/pebble-theme/theme-sections/products-bundle-choose.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.