Help Center

If you need to promote a special offer on your website, you can make use of our feature Banners. Additionally, With Usetiful themes, you can achieve an endless variety of ways to present your content. In this article, we'll show you how to turn a modal dialog into a bottom bar that's more subtle but still very effective for communicating with your customers.

1.  Create a new product tour

First of all, you will need to create a product tour with modal step. Use Page targeting to define where the bar will be displayed to your audience. Don't forget to save your changes.

2. Create a new theme with custom CSS

Create a new theme and adjust colors and style according to your desired design.

To turn the modal window into a bottom bar, go to the "Custom CSS" dialog box (button located at the bottom of the left panel) and insert the following CSS code:

.#{$classNamePrefix}-modal-inner{
        top: 0px;
        width: 100%;
        max-width: initial;
        display: flex;
        align-items: baseline;
        justify-content: center;
        border-radius: 0
  }
.#{$classNamePrefix}-modal::before{
        background: none;
        height: auto;
  }
.#{$classNamePrefix}-modal{
        bottom: 0px;
        width: 100%;
        position: fixed;
        z-index: 2;
        padding: 0;
        top: auto;
  }

.#{$classNamePrefix}-modal .#{$classNamePrefix}-close-button{
        order: 3;
  }

.#{$classNamePrefix}-modal .#{$classNamePrefix}-close-button path{
        stroke: white;
  }

.#{$classNamePrefix}-modal .#{$classNamePrefix}-actions{
        padding: 0;
}

.#{$classNamePrefix}-modal .#{$classNamePrefix}-content{
        padding: 16px;
}

4. Assign your theme to the tour

Once you created the theme, return back to your tour. In the "Settings" dialog, select you theme and save changes.

If your tour is published and targeted correctly, you can see this result:

5. Adjust the content

Now, you can play around with the content in the editor and make your bottom bar look perfect ?

Here is our sample  for inspiration.