Shopify themes, liquid, logos, and UX
Hi,
I am currently using an impulse theme for my shopify store, www.neonomad.co.uk. I would like to make the announcement bar sticky (e.g it does not disappear when scrolling down). Can anyone help me with this, I assume I will need to input/edit the code?
Thanks
Solved! Go to the solution
This is an accepted solution.
@Neonomad
1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:
.announcement-bar{
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 7;
}
body{
margin-top: 41px;
}
@media (max-width: 767px){
body{
margin-top: 55px;
}
}
Please keep in mind that while this will work this is not the most ideal solution, you may find some bugs with it (especially if you add too much text in or change the font size of the banner).
A fully custom solution would take more work, if this is something of your interest feel free to reach to me personally so we can talk it through.
Kind regards,
Diego
This is an accepted solution.
@Neonomad
1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:
.announcement-bar{
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 7;
}
body{
margin-top: 41px;
}
@media (max-width: 767px){
body{
margin-top: 55px;
}
}
Please keep in mind that while this will work this is not the most ideal solution, you may find some bugs with it (especially if you add too much text in or change the font size of the banner).
A fully custom solution would take more work, if this is something of your interest feel free to reach to me personally so we can talk it through.
Kind regards,
Diego
Thanks Diego, that worked perfectly. Thanks once again.
Hi Diego,
I'm using the Impulse theme and also want to make the announcement bar in my header sticky, so that it is visible on every page while users scroll down.
I've input the code you suggested (although I only had the option of theme.css.liquid, not theme.scss.liquid that you suggested - not sure if this makes a difference.)
Unfortunately it hasn't worked for me.
Any other suggestions please - or where might I be going wrong?
Many thanks
Suzie
User | RANK |
---|---|
123 | |
90 | |
77 | |
71 | |
41 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022