> For the complete documentation index, see [llms.txt](https://docs.elitebundleapp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.elitebundleapp.com/customize-and-publish/publish-on-storefront.md).

# Publish on your storefront

Publish a Shopify bundle to your storefront: enable the Elite Embed Core app embed, choose product page or dedicated page, set the bundle live.

Three things make a bundle visible: the app embed is on, the bundle knows where to appear, and its status is **Active**.

## 1. Enable the Elite Embed Core app embed

Once per theme. **Online Store → Themes → Customize → App embeds → Elite Embed Core → Save.** Full steps in [Getting started](/get-started/getting-started.md#2-enable-the-elite-embed-core-app-embed).

<details>

<summary>Optional: Multi-Option Bundle app block</summary>

Multi-option bundles render above the theme's Add to cart button by default. To place the selector elsewhere on the product template, use the **Add app block** step in the editor's **Publish** tab, which opens the theme editor with the block ready to place. Or manually: **Customize → product template → Add block → Multi-Option Bundle → Save**. Without the block, the app embed still handles everything.

</details>

### App embed settings

Click **Elite Embed Core** in the App embeds panel to open its settings. The defaults suit every standard theme; the fields exist for custom-built themes.

| Setting                                                       | What it does                                                                                                                                                                                                                                                                | When to change it                                                                                                                                                                     |
| ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Main content selector                                         | Where the "Replace the product page" template mounts. The app looks for the theme's `main` element on its own.                                                                                                                                                              | Only if a replace-the-page bundle shows the plain product page on a custom theme. Enter the CSS selector of the element to replace, such as `#MainContent` or `.page-content`.        |
| Show the products inside a bundle under its cart line         | On by default. Adds a **Show 3 products** toggle under each bundle line in the cart page and the cart drawer, listing the picked products with quantity and image. On themes that draw their own plain list (Horizon and its variants) that list is replaced by the toggle. | Turn off if you prefer the theme's own list or a side-cart app already shows the contents.                                                                                            |
| Also show in the cart drawer                                  | On by default. Untick and the list appears on the cart page only, never in a drawer, mini cart or side-cart app.                                                                                                                                                            | Tight drawers, or a side-cart app that shows contents its own way.                                                                                                                    |
| How to show                                                   | **List with toggle** (image, quantity, variant behind a Show/Hide chevron) or **Text line** (always visible, e.g. "Includes: 1× Cleanser, 2× Honey").                                                                                                                       | Text line for tight drawers or when images distract.                                                                                                                                  |
| Text line prefix                                              | The word before the text line, default "Includes:". Blank for none.                                                                                                                                                                                                         | To translate.                                                                                                                                                                         |
| Toggle label, collapsed / expanded                            | The toggle text. `{count}` becomes the number of products.                                                                                                                                                                                                                  | To translate or reword.                                                                                                                                                               |
| Cart page line item selector / Cart drawer line item selector | Which element is one line item. Leave blank and the app detects it on standard themes.                                                                                                                                                                                      | Only if the toggle does not appear on a custom theme. Enter a CSS selector matching one line item, such as `.cart-item`. A line the app cannot place is simply left without the list. |
| Place after                                                   | Where inside a line item the list goes. Blank puts it right after the price (above quantity and remove in a drawer, after the price on the cart page).                                                                                                                      | On a custom theme, a CSS selector looked up inside each line item, such as `.cart-item__price`; the list is inserted directly after it.                                               |

{% hint style="info" %}
Cart contents are listed for bundles bought as one line, which is how the app adds them on Shopify Checkout. If you turned off Cart Transform for a third-party checkout, the picked products are already separate lines and the toggle does not appear.
{% endhint %}

#### How the app finds the cart line

With the selectors blank, the app tries, in order: the cart rows of the major theme families (Horizon and its variants, Dawn and its twelve siblings, Impulse, Motion, Expanse, Prestige, Impact, Warehouse, Symmetry, Empire, Turbo), then any product link inside a cart or cart drawer walked up to its row. Inside the row it goes right after the price. Themes that draw their own plain list of bundle contents (Horizon) have that list replaced. A row it cannot find is left as the theme renders it; nothing breaks.

Only if the toggle is missing or in the wrong spot on a custom theme or a side-cart app:

{% stepper %}
{% step %}
Right-click a cart line item in the browser and choose **Inspect**. Find the element that wraps one whole line (usually an `li`, `tr` or a `div` with a class like `cart-item`).
{% endstep %}

{% step %}
Put its class in **Cart page line item selector** (for example `.cart-item`) and the drawer's in **Cart drawer line item selector** (for example `.cart-drawer__item`). The same class in both is fine.
{% endstep %}

{% step %}
If it lands in the wrong place inside the line, put the class of the element it should follow in **Place after** (for example `.cart-item__price`).
{% endstep %}

{% step %}
Save, then reload the cart page and open the drawer to check both.
{% endstep %}
{% endstepper %}

## 2. Choose where the bundle appears

Set per bundle in the editor's **Template** tab.

| Where it shows           | What shoppers see                                                         | Recommended for                                |
| ------------------------ | ------------------------------------------------------------------------- | ---------------------------------------------- |
| Replace the product page | The bundle builder takes over its own product page                        | Most stores                                    |
| Dedicated page           | The product page redirects to a standalone bundle page                    | Landing-page style campaigns                   |
| Product page             | The bundle sits inside the theme's product page beside the normal content | Bundles that should feel like a normal product |

Multi-option bundles always use the product page.

## 3. Set the status

| Status   | Visibility       |
| -------- | ---------------- |
| Draft    | Hidden           |
| Unlisted | Direct link only |
| Active   | Public           |

{% hint style="success" %}
Use **Unlisted** first, test the full buying flow, then switch to **Active**.
{% endhint %}

## Test the live bundle

Click **View live** in the editor or the view action on the dashboard. If the bundle is not ready (a step with no products, the embed turned off), the editor lists what is missing instead of opening the page.

{% stepper %}
{% step %}
Open the bundle page and pick products or options.
{% endstep %}

{% step %}
Confirm required steps behave as set.
{% endstep %}

{% step %}
Add the bundle to cart and check it shows as one line.
{% endstep %}

{% step %}
Continue to checkout and confirm the discount.
{% endstep %}
{% endstepper %}

## After launch

Help shoppers find it: add the bundle to the main menu, feature it on the homepage or a collection page, link it from products that pair well with it, and use it in email or SMS campaigns.

## Publishing checklist

* [ ] **Elite Embed Core** is enabled on the live theme
* [ ] Status is **Active** or **Unlisted**
* [ ] The storefront page loads and looks right at mobile width
* [ ] Products, variants and images are correct
* [ ] Add to cart works and the discount applies at checkout


---

# 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://docs.elitebundleapp.com/customize-and-publish/publish-on-storefront.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.