Categories
Code Snippets

Add informational bar to the Storefront header

On our Storefront demo, you may have noticed the black bar beneath the navigation that includes informational text. This is possible by adding basic HTML to a text widget placed in the Header widget region.

Screen Shot 2015-02-03 at 12.11.09
The informational bar on the Storefront demo

To recreate, add a text widget to your Header widget region and insert the following code:


<div style="text-align: center; background: #000; color: #fff; padding: .53em; font-weight: bold;">
<span style="margin: 0 1em;">Check out our new Jackets!</span>
<span style="margin: 0 1em;">Get 25% off your first order!</span>
<span style="margin: 0 1em;">Free shipping on all orders over $100!</span>
</div>

view raw

widget.html

hosted with ❤ by GitHub

This can be tweaked to suit your needs.