# 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:\
   \&#xNAN;**“BundleSuite Embed by BundleSuite”**

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

<div align="center"><figure><img src="/files/9V8PSV6JLzSghvJrYPTc" 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="/files/aEilLNXwveI7XEa5NAUG" 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="/files/xIgsGqI0YYc0r5MJN6PU" 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="/files/QdAoc85aEj1WvnKPpnSt" 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:\
   \&#xNAN;**“**<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="/files/5K4kITkrbAwQKvIfgrxu" 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="/files/GQJZBbQGyLksXcf2Pa8a" 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>" %}

***


---

# 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://bundle-suite.gitbook.io/bundle-suite-help-doc/installation-and-requirements/installation-guide.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.