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.
Creating your Topic
First, we need to create a new topic that will hold the content for the alert bar.
- In your admin console go to Content > Manage Topics > Create Topic.
- Set the topic name to be 0-template-alert-bar
- Add the below HTML and replace “Content goes here” with your desired content.
<div class="alert alert-bar"> Content goes here </div>
- Check the box next to “Published” and save your changes.
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
- Connect to your site files using your FTP credentials via FileZilla
- 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.
- Pull the _Layout.cshtml file down to your local machine using the drag and drop method.
- Open the _Layout.cshtml file in a text editor application for code, markup and prose. NotePad++ or Sublime are free application to use.
- Add the below code just above the opening div for the main-content-wrapper.
<div class="text-center"> @Html.Topic("0-template-alert-bar") </div>
- Save your changes to the _Layout.cshtml file.
- 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.
- 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.