Editing the Top Bar - Classic Design Tools – Zoey Ticketing System

Please note this tutorial is only for our older Classic design themes and tools. For information on our new themes and how to use the updated tools, please see: Starting with Design and Advanced Design Tools.

If you've just started or just picked a new template, you might have found a thin bar along the top of your store welcoming you along with a phone number. This will be above your logo and navigation, as shown in the image below.

To edit this information, especially the place holder phone number we'll be going into the Control Panel.

Navigate to Design > Blocks
Click Manage next to Edit Blocks
Find the Block Title "Top Menu Bar (Optional)" and click to edit
To simply turn this bar off, change Status to Disabled
To make changes, edit the information in the Content area.
We highly recommend changing the information using the Source Code Tool. This toolbar has specific HTML formatting to keep this look and feel!
Once you have made your changes, click Save Block in the top right hand corner
Run a Store Refresh through Advanced > Refresh your Store and see the changes next time you visit your home page!

Did you make edits and lose the formatting? No fear! Here is the default HTML which should be used in the Source Code Tool:

<div class="top-bar">
<ul>
<li>
<p>WELCOME TO OUR STORE!</p>
</li>
<li>
<p>Call us:<span class="top-bar-phone"> 1 888 888 8888</span></p>
</li>
<li>
<ul class="top-bar-nav">
<li><a href="/customer/account">My Account</a></li>
<li><a href="/wishlist">My Wishlist</a></li>
<li><a href="/checkout/cart">My Cart</a></li>
<li><a href="/checkout/onepage">Checkout</a></li>
</ul>
</li>
</ul>
</div>

Lost the CSS styling for your Top Bar at some point? Here's what you will need in your Global CSS to change it back to the default:

/*Top Bar styling*/
.top-bar {
background: #f3f3f3;
line-height: 35px;
text-align: center;
border-bottom: 1px solid #d7d7d7;
color: #717171;
}
.top-bar ul li {display: inline-block; width: 392px; vertical-align: top;}
ul.top-bar-nav li {display: inline; padding: 0 5px; display: inline; list-style-type: disc;}
ul.top-bar-nav li a {color: #717171;}

.top-bar-phone {color: #f55c59;}
.top-bar ul > li p {float: left;}
.top-bar ul li:nth-child(last) ul {float:right;}