How to create a hello bar in Shopify without app
Sell Online With Shopify
Trusted by millions of businesses worldwide
Sign up for a free trial and enjoy 3 months of Shopify for $1/month on select plans.
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.
