# 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 %}

## 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="https://1174860429-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBQEzvXIQmpPrTmxjT8T6%2Fuploads%2FItkP2X3DbN93FmeWuAcq%2Fimage.png?alt=media&#x26;token=d7079aba-61a0-4d77-9098-6ee95a90fe5e" 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="https://1174860429-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBQEzvXIQmpPrTmxjT8T6%2Fuploads%2FQgo3n4iOZTtXhkNL9GlA%2Fimage.png?alt=media&#x26;token=d9586f16-ce0e-42aa-8409-c67a6b018dee" 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](https://bogos-guideline.gitbook.io/user-guide/user-guide/gift-offer) or [Bundle offer](https://bogos-guideline.gitbook.io/user-guide/user-guide/bundle-offer) before setting up them in EComposer.

<figure><img src="https://1174860429-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBQEzvXIQmpPrTmxjT8T6%2Fuploads%2FlT3DHdE6CGZinq3mZ4Oq%2Fimage.png?alt=media&#x26;token=676a27a9-7178-439b-a82b-66aab6cf07ab" 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="https://1174860429-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBQEzvXIQmpPrTmxjT8T6%2Fuploads%2Fay7lm2GLlhGhXoAvVkpf%2Fimage.png?alt=media&#x26;token=48bd347e-0371-49a4-a90f-809da7a11b98" alt=""><figcaption></figcaption></figure>

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