How to reduce padding on Brooklyn Theme

New Member
1 0 0

I was wondering how I can reduce this padding on my website with the Brooklyn Theme. 

I saw a couple of other threads about this but they were all outdated. Any help would be great. 

Thank you. 


Shopify Partner
1374 386 930

hello @Vettaa 

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

Want to theme customize contact us E-mail :
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store

This is an accepted solution.


in Brooklyn Theme  the default padding you have on top between the header menu and the product page content is 80px for Desktop.

You can find the code inside timbers.css.liquid file here:

.main-content {
  display: block;

  // to be kept before Sections Everywhere
  body:not(.template-index) & {
    padding-top: $gutter;

    @include at-query($min, $large) {
      padding-top: $contentTopMargin;

  @include at-query($min, $postSmall) {
    padding-bottom: 40px;


The variable you need to change is $contentTopMargin that you can find at the beginning of the same file at around line 393.

You can change $contentTopMargin to any value you prefer.

// Sizing variables
$gutter: 30px;
$gridGutterMobile: 22px;
$section-spacing-small: 35px;
$gridGutter: 30px; // can be a %, but nested grids will have smaller margins because of it
$contentTopMargin: 80px;
$contentTopMarginSmall: 35px;
$radius: 0;
$customSelectHeight: 46px;


• If the problem is solved remember to click ✅ to Accept Solution
• Press Like ?? if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.