Shopify themes, liquid, logos, and UX
Dear community,
I am dealing with the following issues;
1. I would like to reduce the height of my announcement bar - some space can be saved (marked in red)
2. The white space of my header must also be reduced (marked in red)
Theme: Dawn
Website: www.stahlweinregal.de
Any help is much appreciated 🙂
Solved! Go to the solution
This is an accepted solution.
Hi, nice page!
Below is a code snipped that'll work. I've set the padding to 0 on each. If you want more space, just add a higher number before 'px' on each. Here you go:
{% style %}
/* THIS IS THE ANNOUNCEMENT BAR CODE*/
p.announcement-bar__message.h5 {
padding-bottom: 0px;
padding-top: 0px;
}
/* THIS IS THE HEADER CODE*/
header.header.header--middle-left.page-width.header--has-menu {
padding-top: 0px;
padding-bottom: 0px;
}
{% endstyle %}
Insert that into your theme.liquid file (online store > themes > click '...' on the theme you want, then 'edit code'). Insert it at the bottom of the file, right before the '</body>' tag.
Alternatively, you can also use the app Easy Edits to make the edit yourself without touching any code, just click on the sections and set the padding to 0. You can make the edit and delete the app without paying for anything, and keep the edits.
Fair disclaimer, Easy Edits is an app I've worked on. If you need any help inserting the code or using the app, just let me know!
This is an accepted solution.
Hi, nice page!
Below is a code snipped that'll work. I've set the padding to 0 on each. If you want more space, just add a higher number before 'px' on each. Here you go:
{% style %}
/* THIS IS THE ANNOUNCEMENT BAR CODE*/
p.announcement-bar__message.h5 {
padding-bottom: 0px;
padding-top: 0px;
}
/* THIS IS THE HEADER CODE*/
header.header.header--middle-left.page-width.header--has-menu {
padding-top: 0px;
padding-bottom: 0px;
}
{% endstyle %}
Insert that into your theme.liquid file (online store > themes > click '...' on the theme you want, then 'edit code'). Insert it at the bottom of the file, right before the '</body>' tag.
Alternatively, you can also use the app Easy Edits to make the edit yourself without touching any code, just click on the sections and set the padding to 0. You can make the edit and delete the app without paying for anything, and keep the edits.
Fair disclaimer, Easy Edits is an app I've worked on. If you need any help inserting the code or using the app, just let me know!
Hello Mt686!
That did the job - awesome!
Now when "landing" on the page, the customer will immediately see the "buy now" button, most likely this also will help the conversion.
Thank you for this great solution!
Have a nice day,
Paul
Hey so i'm trying to make my announcement bar thinner than my header section and ive pasted your code. however it actually made my announcement bar wider. Can you help me?
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024