> For the complete documentation index, see [llms.txt](https://docs.bogos.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bogos.io/integration/page-builder-apps/ecomposer.md).

# Ecomposer

EComposer is an easy and fast page builder, that allows merchants to build any page type or section that is stunning and highly convert. Support Landing, Homepage, Collection page, Product, Blog page, Cart page, Footer, Coming Soon Page, 404 page & any theme section

**EComposer key features:**

* Build any page & section: landing to home page, collection page, product, etc.
* Live drag-drop page builder that is easy to use, no coding, Shopify-standard UI
* Design library: various page layouts, section templates, countless elements
* Built-in add-ons: Ajax Cart, Color Swatch, Image Optimizer, Cross-selling, etc.
* Advanced: Page Analytics, Global Blocks, AI Content Generator, Lazy load, etc.

{% hint style="info" %}
The integration between BOGOS and EComposer allows dynamic offer placement and customization.
{% endhint %}

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

## How to Install EComposer

**Step 1:** Install EComposer from the [Shopify app store](https://apps.shopify.com/freegifts?utm_source=BOGOS.io\&utm_medium=helpdoc).

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

**Step 2:** Create your EComposer page with this [quick guide](https://help.ecomposer.io/docs/getting-started/build-your-first-page/).

**Step 3:** From the panel, add new Elements -> Add New Extensions

<figure><img src="/files/7DGVE9vXIydcIgMrvCRk" alt=""><figcaption></figcaption></figure>

**Step 4:** Install BOGOS.io Free Gift extension. Please make sure to have the BOGOS app on your Shopify store. You can also create a [Gift offer](/detailed-guide/gift-offer.md) or [Bundle offer](/detailed-guide/bundle-offer.md) before setting up them in EComposer.

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

**Step 5:** Drag and drop the BOGOS elements to your pages or templates. You will find five different elements:

* Cart message: Notify customers about the offers, can show up on all types of pages
* Gift slider: List of gift or discounted products, can show up on all types of pages
* Gift icon: Show up only on product pages
* Gift thumbnail: Show up only on product pages
* Bundle: Show up only on product pages

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

Select the elements that suit your needs. Once chosen, your page will automatically update to reflect the new layout.


---

# 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.bogos.io/integration/page-builder-apps/ecomposer.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.