How to create a hello bar in Shopify without app
Want to boost your conversion rates? That’s what hello bars are all about. Whether you want to add email subscribers, advertise special deals, drive traffic to a landing page, or make a site-wide announcement, hello bars get the job done.
What’s a hello bar? Well, it’s a bar that rests atop your Shopify store, greeting people as they arrive at your page. It allows you to display a nice message to your visitors as well as a custom link.
Setting up a hello bar is easy. Follow the steps below to create a hello bar for your Shopify store.
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- In the Layout section, click theme.liquid to open the file in the online code editor.
- Find
<body>and paste the below code just above it.123<div id="huratips-topbar"><p>Hello! This is my awesome message.<a href="#" class="link">Learn More</a></p></div>This is content of the bar. You can customize it.
- Click Save.
- In the Assets directory, find to a style sheet (CSS) file and click it to open.
- At the bottom of the file, paste the following code:12345678910111213141516171819202122#huratips-topbar{background: #19ab21;display: inline-block;margin-bottom: 0;text-align: center;width: 100%;top: 0;left: 0;right: 0;color: #fff;}#huratips-topbar p{margin: 0;padding: 5px 0;}#huratips-topbar a.link{margin-left: 20px;background: #ffd900;padding: 5px 15px;border-radius: 5px;color: #000;}
- Click Save.
You are done. Actually, you want to make it fixed on top bar when scroll down. You can refer this article to know how to create a fixed/sticky the bar.
