How to increase padding on collections list section (Brooklyn Theme)

Store Design
,

Topic summary

A user seeks CSS code to add top and bottom padding to the collections list section on their homepage using the Brooklyn theme. They also want to make image titles (“cookies & bars” and “bagels”) bold within that section.

Solutions provided:

  • PageFly-Henry: Suggested editing theme.scss.css file with CSS targeting [data-section-type="featured-collections-section"] for margins (50px top, 70px bottom) and .collection-grid__item-title span for bold font weight.

  • Transcy: Recommended adding padding code to base.css or theme.css file, adjusting values as needed (20px top and bottom as example).

  • oscprofessional: Proposed editing timber.scss.css with margin rules for .section-header (30px top) and .collection-grid (40px bottom).

Resolution: The original poster confirmed one of the solutions worked successfully.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

I want to add padding to the top and bottom of my collections list section of my homepage. Can someone please share the code with me?

Also, bonus if you can tell me how to bold the image titles in that section as well (“cookies & bars” and “bagels”). :slightly_smiling_face:

https://bellbottombakery.com/

2

Hi @AMemenas

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.scss.css

Step 3: Paste the below code at bottom of the file → Save

[data-section-type=“featured-collections-section”] {

margin-top: 50px !important;

margin-bottom: 70px !important;

}

span.collection-grid__item-title {

font-weight: bold !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

1 Like
3

Hello @AMemenas ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file or theme.css file

Add this following code at the bottom of page

.your-collections-section-class {
  padding-top: 20px;
  padding-bottom: 20px;
}

Adjust the top and bottom padding as needed

Save changes

Hope this can help.

Transcy

4

Hello @AMemenas

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->timber.scss.cssAdd this code at the bottom.

.collection-grid {
    margin-bottom: 40px !important;
}
.section-header {
    margin-top: 30px !important;
}
5

Thank you! That worked!

1 Like
6

Thank you!