Skip to main content

How to Configure Alert Banners in Prismic CMS

Display multiple rotating messages to your ecommerce customers!

B
Written by Beth Graff
Updated over a week ago

This guide will walk you through setting up and configuring alert banners in your Prismic CMS, including the new rotating banner feature that allows multiple messages to display in sequence.

Step 1: Access Your Prismic CMS

  1. Log into your Prismic CMS dashboard

  2. Navigate to your content repository

Step 2: Find and Edit Alert Banner Document

  1. Locate the "Alert Banner" document in your content list

  2. Click on the document to open it for editing

  3. To add additional alert banners, click "Add item in location" - this will create a new banner configuration that can rotate with existing ones

Step 3: Configure Your Alert Banner Settings

  • Purpose: Determines which location will display the banner on your site. Leave blank if you want it to appear for all locations, or, if you only run one location

  • Example: cali-collective-demo targets a specific location or page section

Pro Tip: To find your location ID navigate to your /store-locator page, click the location you want to find the UID for. On that page, you will see the location ID in the page URL.

Active Toggle

  • Purpose: Controls whether the banner is live and visible

  • Options: Toggle on (enabled) or off (disabled)

Day Selection

  • Purpose: Specifies which day(s) of the week the banner should appear

  • Options: Choose from dropdown (Monday through Sunday or Everyday)

  • Example: "Friday" means the banner only shows on Fridays

Dismissible Toggle

  • Purpose: Allows users to close/dismiss the banner

  • Options: Toggle on (users can dismiss) or off (banner stays visible)

Message Content

  • Purpose: The main text that appears in your banner

  • Example: "SHOP TODAY'S SPECIAL: 20% off all flower for Flower Friday!"

  • Best Practice: Keep messages concise and action-oriented

Internal CTA (optional)

  • Purpose: Internal site navigation path

  • Format: Relative path (e.g., /collection/flower)

  • Use Case: Direct users to specific pages within your site

Start Date & Time (optional)

  • Purpose: When the banner begins displaying

  • Format: MM/DD/YYYY with specific time and timezone

  • Note: Banner won't show before this date/time

End Date & Time (optional)

  • Purpose: When the banner stops displaying

  • Format: MM/DD/YYYY with specific time and timezone

  • Note: Banner automatically disappears after this date/time

Step 4: Set Up Rotating Banners (New Feature!)

πŸ†• New Feature: You can now have multiple alert banners rotate through automatically!

How Rotating Banners Work:

  • Create multiple alert banner items using "Add item in location"

  • Banners that have overlapping active periods will rotate through in sequence

  • If multiple banners are scheduled for the same day and time, they will cycle through automatically

  • Each banner in the rotation will display for a set duration before switching to the next

Example Rotating Setup:

  1. Banner 1: Friday special (active Friday 9 AM - 6 PM)

  2. Banner 2: Weekend sale (active Friday 9 AM - 6 PM)

  3. Banner 3: New arrivals (active Friday 9 AM - 6 PM)

All three banners will rotate through during the Friday 9 AM - 6 PM timeframe.

Step 5: Save and Publish

  1. Review all your configuration settings

  2. Click "Save" to store your changes

  3. Publish the document to make your alert banners live

Pro Tips

  • Test your timing: Use Start/End dates to control exactly when banners appear

  • Plan rotations: Coordinate multiple banners with overlapping schedules for dynamic messaging

  • Monitor performance: Track which messages get the most engagement

  • Keep it relevant: Use the Day selector to show contextual messages (e.g., "Friday" for weekend promotions)

Your alert banners will now display according to your configured schedule and rotate through multiple messages when applicable!

Did this answer your question?