Add an Alert Bar

Modified on Thu, 09 Dec 2021 at 05:20 PM

An alert bar can be used to feature information such as promotional messaging, important disclaimers, hours of operations, etc. 


In this article we will show you how to add an alert bar to display just below the top navigation. This style of alert bar will appear on every page of the site

A picture containing text, screenshot, indoor

Description automatically generated



Creating your Topic

First, we need to create a new topic that will hold the content for the alert bar. 

  1. In your admin console go to Content > Manage Topics > Create Topic

  2. Set the topic name to be 0-template-alert-bar

  3. Add the below HTML and replace “Content goes here” with your desired content.
    <div class="alert alert-bar">
       Content goes here

  4. Check the box next to “Published” and save your changes. 

    Graphical user interface, text, application, Word

Description automatically generated

Now that we have our topic and content in place, let’s update the master layout file to add a reference to the new topic we created. To access your layout file you will need to connect to site files using your FTP credentials. If you don’t have your FTP credentials, please submit a new ticket with our support team here


Updating the layout file
Helpful link: How to use FTP

  1. Connect to your site files using your FTP credentials via FileZilla

  2. Navigate to this location: skins/Skin_1/Views/Shared. Note: if your site template has been customized, your Skin_1 folder may have been renamed. If you need help finding the correct skins folder, please contact your web developer.

  3. Pull the _Layout.cshtml file down to your local machine using the drag and drop method. 

    Graphical user interface

Description automatically generated

  4. Open the _Layout.cshtml file in a text editor application for code, markup and prose. NotePad++ or Sublime are free application to use. 

  5. Add the below code just above the opening div for the main-content-wrapper
    <div class="text-center">


Description automatically generated

  6. Save your changes to the _Layout.cshtml file. 

  7. Upload the modified file back to this location: skins/Skin_1/Views/Shared. You will receive a notice in FileZilla that the target file already exists. Choose to Overwrite the file and click OK

    Graphical user interface, text, application

Description automatically generated

  8. Log into your admin console and select the Refresh Store button. Then do a hard refresh (CTRL + F5) on the front end of your website. 


You should now see the Alert bar in place just below the top navigation bar. 


A picture containing text, screenshot, indoor

Description automatically generated

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article