---
title: "Bottom Drawer"
description: "Bottom Drawer is a powerfull Sales Component which can be added to any Page as a fixed Element at the Bottom of Page."
path: https://www.eonshowroom.eon.com/en/content-elements/bottom-drawer.html
lastModified: 2025-04-09T12:34:28.203Z
---

# Bottom Drawer

# Bottom Drawer

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bottom-drawer_open%3A16-9?fmt=webp)

[How to Configure](#how-to)

### Description

The Bottom Drawer Component is a powerfull Sales Component which can be added to any Page as a fixed Element at the Bottom of a Page. This ensures that this Click to Action Element is always visible for any User.

- Consistent Content across different Pages by using Experience Fragments
- Always visible on Bottom of the Viewport

[Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/dialogues-bottom-drawer--interactive)

### Inspirations

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bottom-drawer_closed%3A16-9?fmt=webp)

### Usage Rules & Features

##### Features

- Consistent Content across different Pages
- Always visible on Bottom of the Viewport

##### Properties

- Text Alignment of Bottom Drawer Bar can be right or centered

##### Design

- Bottom Drawer Bar Color can be Yellow 300, Turquoise 300, or Red 300

##### In which Grid Columns does it fit?

The Bottom Drawer is never placed inside a Grid. It is a Component already located in Page Template on Bottom of the Page before the Footer.

##### DO's

- "Hide image on Mobile" is a good Option to reduce Height for Mobile Viewports
- Check in View as Published Mode for different Viewports
- Add only one Section with one or multiple Grids in linked Experience Fragment

##### DONT's

- Do not add to much Content considering Desktop Small and Mobile Viewport

## Configuration

## Trackable Component

This Component can be tracked.

[Read more about Tracking](https://www.eonshowroom.eon.com/en/aem-basics/tracking.html)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_7-1%3A2-1?fmt=webp-alpha)

### Create Experience Fragment

At first, Editor needs to create an Experience Fragment in Experience Fragments Part.

[Find out more about Experience Fragment Handling](https://www.eonshowroom.eon.com/en/aem-basics/experience-fragment-handling.html)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bottom-drawer_content%3A2-1?fmt=webp-alpha)

### Add Content of Experience Fragment

Inside the Experience Fragment, Editor needs to add a Section with at least one Grid and what ever Content he / she likes to have inside the opened Bottom Drawer in the End.

Editors have to ensure not to add too much Content for good User Experience on different Viewports. If adding Images it is recommended to hide these on Mobile Viewports.

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bottom-drawer_on-page%3A2-1?fmt=webp-alpha)

### Configure Bottom Drawer on a Page

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bottom-drawer_dialog%3A1-1?fmt=webp-alpha)

Editor can find Bottom Drawer as last Element of the Page directly before the Footer or via using the Content Tree on left Side of the Page.

Opening the Editor Dialog the following Things can be configured:

- Label for Opened Dawer

Editor can enter Text that will be displayed when Bottom Drawer is opened.

- Label for Closed Dawer

Editor can enter Text that will be displayed when Bottom Drawer is closed.

- Drawer Text Centered?

Checking this Checkbox displays Headline Text in center. Otherwise it will be displayed right aligned.

- Show Drawer in Edit Mode

Checking this Checkbox, the Bottom Drawer will be expanded in Edit Mode to see the Content inside it.

- Experience Fragment

The Path to the Experience Fragment needs to be selected, to display the Content in the opened Bottom Drawer.

Editor can directly maintain the Experience Fragment by clicking on corresponding Button.

- Color Bar Scheme

Select a Color for the Bottom Drawer Bar.

## See Our Best Offer

![Man with Smartphone in Natur on a sunny Day](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/man_with_phone_innatursunnyday%3A2-1?fmt=webp)

### Our Best Offer

It's what allows us to pursue our individual dreams and yet still come together as one American family. She's the one who put off buying a new car or a new dress for herself so that I could have a better life. This truth transcends nations and peoples - a belief that isn't new; that isn't black or white or brown; that isn't Christian, or Muslim or Jew.

[Find Out More](https://www.eon.de)

Close