Create a Bar Display
Collect emails or make an announcement with a bar at the top or bottom of your website.
A Bar display snaps to the top or bottom of your web page and can remain visible as your visitors navigate around. It’s a great way to get your visitors’ attention without interrupting their experience, and it takes up less real estate than a Banner display would. This display is perfect for collecting a single field of information, such as an email address, or just displaying a promotional message like an ongoing sale.
Looking to use our Free Shipping Bar? Check out this guide instead.
Create a new Bar display
To create a new Bar:
-
Navigate to Convert > All Displays.
-
Click Create new display. This will open our Templates page.
-
Our Embedded Forms need to be built using our Classic display builder, so navigate to this builder by selecting the Get started option in the lower left corner of your screen.
-
Name your display in the following prompt, specify whether you want to collect email, phone, or both, and select Create display.
Not planning on collecting email or phone number? We’ll show you how to remove these form fields below.
In the Create step of the Classic display builder, you can click to edit:
-
Form Fields: what information you want to collect at sign up. If you do not plan on collecting any information, uncheck the “Enable Form?” checkbox as shown below.
-
Compliance: whether you want new sign ups to go through a Single Opt-In or Double Opt-In process.
-
Validations: set any rules to restrict who may sign up for your display.
-
Click to Add a display.
-
On the following screen, select Bar from the left side. Browse the templates and choose which one you’d like to start with. Press Choose selected in the upper right corner to open the designer.
Customize your Bar display
Now that you’ve selected a template to start from, it’s time to customize your display’s appearance.
Add new elements
To add a text box, click + Add new element on the left.
Edit existing elements
To edit existing elements, click directly on them in your display, or select them from the menu on the left. You can edit their settings, duplicate, or delete the element on the left.
Under your Elements on the left, you can also edit your bar’s background and specify whether you want the bar to be positioned at the top or bottom of your page.
Once you’re happy with your design, press Save & Close in the upper right corner.
Customize your Thank You Page
After saving your changes, you’ll be brought back to the Create step of your display builder. If you’re collecting sign ups with your bar, you’ll want to customize its Thank You Page to confirm your contact’s sign up.
-
Scroll down and click to edit your Thank You Page Design.
-
If you’re offering a coupon code in exchange for a sign up, be sure to include the
{{ signup.coupon_code }}
merge tag on your Thank You Page.
Edit your settings
Attach a coupon
If you are offering a coupon code in exchange for a sign up, be sure to attach your coupon to your display:
- In your display’s Create step, scroll to edit the Coupon section and select the desired Coupon from the dropdown menu. Save.
Targeting
To customize your Bar’s settings and audience targeting, navigate to the Target step of the builder:
-
When To Show It: determine when and how your display triggers.
-
Who To Show It To: determine who is eligible to view your display.
-
How Long To Show It: specify whether this display should be Ongoing, or set to run on a fixed schedule.
Edit your Follow-Up Actions
Once you’ve finalized your settings and audience targeting, you’ll want to make sure that you’re properly following up with your new sign up. Head to the Follow-Up step of your builder.
Launch your Bar display
Once you’ve finalized your design, targeting, and follow-up actions, select the Publish button at the upper right of the Follow-Up step and confirm your decision in the prompt.
Your Bar is now live on your site! You can review its reporting at any time.
Was this page helpful?