Hello team I have been researching this topic but I have not found anything that worked for me.
Issue is when we click and go to collections and products pages between header and announcement bar white space is not quite well and pushing the content and product image below. It is also not easy to edit white space in homepage between sections. I checked assets/timber.scss.liquid and search for padding and content options edited some of padding and space options but not helping.
Ren here from the Shopify support team - thanks for the post!
I checked out your screenshots and the white space does not appear to be problematic and looks as it should! Having adequate white space is actually strategic and extremely important to the overall look, feel and professionalism of a website. Whitespace helps with direction of where your eyes focus and relieves users from digital clutter and ambiguity.
I strongly encourage you to read this excellent blog article titled Everything You Need to Know About Whitespace to gain an understanding of it’s importance. It’s an effective organizational tool and helps put the emphasis in the right place! Clutter is overwhelming and can lead to less traffic and a high bounce rate.
Depending on your theme, you can configure the amount of whitespace near the header (but not eliminate it entirely) by adjusting your logo width using your theme editor. Often these tools are found in the Header section of your theme editor and may look something like this:
I hope that helps! How are you finding building your store otherwise? Are you running into any pain points or areas that you need some clarification on? Let me know, I’d be happy to help.
Also, just wanted to ass that one really great resource to help you out is our Launch Checklist. Going through this list can help get you inspired and feel confident that you’re hitting all the marks as you go!
Thank you for the reply to this post. I read through that article about whitespace and I do know about the strategic and important to the overall look of a website.
I have tried editing from header section in Brooklyn theme but when I reduce the px size logo get smaller and reduce the space between announcement bar and header thats ok but it makes the logo really small which I dont want that.
Just because someone wrote an article about it doesn’t make it true.
Some white space is needed, but when you are on mobile and you give up 1 inch of screen space to blank white, you might as well get a regular job. Its stupid. You won’t walk into a drugstore and see an empty display. There is too many people just repeating what someone else said and claiming its the gospel.
I 100% encourage people to reduce the “Idiotic” large white space at the top of collection pages on the Brooklyn theme. I’ll figure out how to do it and then post about it.
