How to add a Breaking News bar to your Shopify store
Do you want to add a “Breaking News” section on top on home page of your online store. It may include hot deals, hot sales, hot news… that customers are very interested in.
This article describes how to place a custom breaking news bar wherever you like.
- From your Shopify admin, go to Online Store > Themes.
- Under the Snippetsfolder, click Add a new snippet.
- Give your snippet the name breaking-news and click Create snippet.
- In the online code editor, copy the below code and paste to the content.12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455<div class="breaking-news"><ul>{% for article in blogs.news.articles | limit: 10 %}<li><a href="{{article.url}}" title="{{article.title|escape}}">{{article.title}}</a></li>{% endfor %}</ul></div><script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easy-ticker/2.0.0/jquery.easy-ticker.min.js"></script><script>$(function(){$('.breaking-news').easyTicker({visible: 1,interval: 4000});});</script><style>.breaking-news {font-family: Arial, sans-serif;border: 1px solid #C20;margin: 0;font-style: italic;position: relative;padding: 0 0 0 80px;box-shadow: 0 2px 5px -3px #000;border-radius: 3px;}.breaking-news:before {content: "Latest News";display: inline-block;font-style: normal;background: #C20;padding: 10px;color: #FFF;font-weight: bold;position: absolute;top: 0;left: 0;}.breaking-news:after {content: '';display: block;top: 0;left: 80px;background: linear-gradient(#FFF, rgba(255, 255, 255, 0));height: 20px;}.breaking-news ul{padding-left: 40px;}.breaking-news ul li {list-style: none;padding: 10px 0;}</style>
- Click Save.
- To place a breaking news bar wherever you like, you only need insert the below code:1{% include 'breaking-news' %}
In this guide, I get the articles from News blog (the default blog of Shopify). Actually, you can retrieve any blog or products in collections you want. To do that you must change the object in for loop in breaking-news.liquid file.
I’m using jQuery Easy Ticker plugin. You can read more the document of this plugin to custom for your “Breaking News” bar with your style.
