> For the complete documentation index, see [llms.txt](https://bundle-suite.gitbook.io/bundle-suite-help-doc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bundle-suite.gitbook.io/bundle-suite-help-doc/installation-and-requirements/installation-guide.md).

# Installation Guide

### 🧩 <mark style="color:red;">BundleSuite</mark> Embed

To display your bundles correctly on your storefront, **BundleSuite needs permission to inject bundle layouts into your product pages**. This is done using Shopify’s **App Embed feature**.

#### ✅ How to Enable the App Embed:

1. Go to your **Shopify Admin** and navigate to:\
   **Online Store → Themes**
2. Click **Customize** next to your current (live) theme.
3. In the theme editor, click the **App Embeds** icon on the left sidebar (looks like a puzzle piece 🧩).
4. Find the toggle labelled:\
   **“BundleSuite Embed by BundleSuite”**

   > *(This is usually turned on by default — if not, enable it manually.)*

<div align="center"><figure><img src="https://4164338169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKQ0b2FsDr6RyEn33yqR%2Fuploads%2Fi7ZGVxKUQq90U03sqT9t%2Fimage%20(4).png?alt=media&amp;token=0120b2d4-7393-426e-8cbf-b1adf292f67d" alt="" width="274"><figcaption></figcaption></figure></div>

Click **Save** in the top-right corner.

🎉 That’s it! Your bundles will now appear correctly on your product pages.

**Still Confused ? Watch Tutorial** ⬇️

{% embed url="<https://youtu.be/RkyYOq8oNLQ?si=4dRyiGUrdYtqIF9y>" %}

***

## App Blocks for Standard and Advanced Combo Bundles (Optional)

Adding these app blocks to your bundle pages is highly recommended. They allow you to **edit, customize, and control the look and behaviour of each bundle** so it fits perfectly with your store’s theme and preferences.

1. **Standard Combo Bundle App Block**

Use this App Block if you want to move the Standard Combo widget or customize its layout and display settings. You'll learn about customising this block in further sections.&#x20;

Steps:

* Open your Theme Editor
* Navigate to the Product template used for this bundle
* Click Add Block → Apps → Select Standard Combo Bundle

<figure><img src="https://4164338169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKQ0b2FsDr6RyEn33yqR%2Fuploads%2FmexkKoqx7VJPvzOxLYY0%2Fimage%20(9).png?alt=media&amp;token=0650db6b-86fb-4815-8f50-1b037530000f" alt=""><figcaption></figcaption></figure>

* Drag and place the block where you want it to appear
* Click Save.

**Still Confused ? Watch Tutorial** ⬇️

{% embed url="<https://www.youtube.com/watch?v=FvGEZlA89GI>" %}

2. **Advanced Combo Bundle App Block**

To change the position of the Advanced Combo widget on your product page or to use customization settings, you need to use this App Block. You'll learn about customising this block in further sections.&#x20;

Steps:

* Open your Theme Editor
* Navigate to the Product template used for this bundle
* Click Add Block → Apps → Select Advanced Combo Bundle

<figure><img src="https://4164338169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKQ0b2FsDr6RyEn33yqR%2Fuploads%2FWvQzRqbxUpZVwo2z4WuU%2Fimage%20(14).png?alt=media&amp;token=5dd9a3a0-3053-4f51-a401-c0a7f5dd9c7b" alt=""><figcaption></figcaption></figure>

* Drag and place the block where you want it to appear
* Click Save.

**Still Confused ? Watch Tutorial** ⬇️

{% embed url="<https://youtu.be/HDehiTN6mn4?si=2xDRP8t_k8TyMh4R>" %}

> 📌 These blocks are optional but strongly encouraged if you want full flexibility in how your bundles appear and perform.

***

## ⚙️Additional Features

### 1. Cart Components Toggle

The **Cart Components Toggle** is a feature that controls how the contents of a bundle are displayed on the cart page.

#### ✅ What It Does

When this toggle is **enabled**, a **Show/Hide Items** button will appear on the cart page. Clicking it will display the **images, titles, and quantities** of all the individual products included in the bundle.

When **disabled**, the toggle is hidden — but the **included items will still be listed openly** on the cart page without the option to collapse them.

<figure><img src="https://4164338169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKQ0b2FsDr6RyEn33yqR%2Fuploads%2FCxjd69ERJcVyah9fllaw%2FScreenshot%202025-07-23%20160003.png?alt=media&amp;token=a4e7cdda-737d-4405-b601-76ec182c516a" alt=""><figcaption></figcaption></figure>

#### ✅How to Enable The Toggle

1. Go to your **Shopify Admin** and navigate to:\
   **Online Store → Themes**
2. Click **Customize** next to your current (live) theme.
3. In the theme editor, click the **App Embeds** icon on the left sidebar (looks like a puzzle piece 🧩).
4. Find the toggle labelled:\
   **“**<mark style="color:red;">**BundleSuite Components Toggle**</mark>**&#x20;by BundleSuite”**
5. Switch it **ON** to show the collapsible toggle on the cart page
6. Switch it **OFF** to display all included items by default, without collapse

#### 🛒 When to Enable or Disable

* **Enable** if you want a **cleaner cart layout** with the ability for customers to expand and view bundle components.

<figure><img src="https://4164338169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKQ0b2FsDr6RyEn33yqR%2Fuploads%2FQloQ7ZIhUd2p6mtcx5bf%2FScreenshot%202025-07-22%20191546.png?alt=media&amp;token=e687112f-7f04-4995-a234-bbd7f0db4da0" alt="" width="375"><figcaption></figcaption></figure>

* **Disable** if you want **all components to be visible by default**, especially for transparency or compliance reasons.

**Still Confused ? Watch Tutorial** ⬇️

{% embed url="<https://youtu.be/JgmyW2bKy9c?si=u4MRCe1ZkrvGrDdQ>" %}

***

### 2. Upsell (FBT) App Block

Use this App Block to show Standard Combo Bundles as upsell on individual product pages — as “Bought Together,” “Deals,” or any custom title. You'll learn about customising this block in further sections.&#x20;

Steps:

* Open your Theme Editor
* Navigate to the Product template
* Click Add Block → Apps → Select FBT: Upsell block

<figure><img src="https://4164338169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKQ0b2FsDr6RyEn33yqR%2Fuploads%2FXGxV5Oad0tsDrIRt6rc4%2FScreenshot%202025-07-16%20174617.png?alt=media&amp;token=339b2e1c-7206-4d91-98bb-0698818ebd5f" alt=""><figcaption></figcaption></figure>

* Drag and place the block where you want it to appear
* Click Save.

**Still Confused ? Watch Tutorial** ⬇️

{% embed url="<https://youtu.be/qn4O_IEE4fk?si=zDl4-52OtlguXmiN>" %}

***