Reduce Padding Collection TItle - Enterprise Theme

Store Design
, ,

Topic summary

A user migrating to Shopify’s Enterprise theme is struggling with excessive padding around the collection title banner, creating large gaps between the menu, title, and product grid. They attempted to modify main.css and main.collection-banner.liquid files without success.

Solution provided:

  • Add custom CSS to main.css file to reduce top/bottom margins on the collection banner:
    • .cc-collection-banner.section--template with adjusted margin values
    • .cc-collection-products.section--template to reduce gap after collection description

Outcome:
The CSS modifications successfully resolved the padding issues, creating the more compact design the user wanted. The discussion is resolved with the user expressing gratitude for the help.

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

Hi there,

I am moving our website to the Enterprise theme but the collection page is driving me nuts!

The Collection Title Banner is so big and creates so much gap above and below it. As you can see below the big gap between the menu and the title and then between the collection description to the top of the products.

I’ve tried messing about in the main.css and the main.collection-banner.liquid files but to no help.

Can anyone help me reduce this? I really want to get to a much more compact design so that the products are more visible. The new template for the site is not published at the moment as it is not finished and so can’t share a live link.

Thank you!

Screenshot 2025-01-22 at 14.48.23.png
Screenshot 2025-01-22 at 14.48.23.png1446×464 38.9 KB

2

Hi @nujwaan ,

Please send the website link, I will check it for you

3

@nujwaan Can you please share this page link?

4

I can’t send a link at the moment as it is in Preview mode. I have another template running my website and we have a lot of customers online so I can’t publish this one

5

Hi @nujwaan ,

You can send it as preview link.

Screenshot.png
Screenshot.png2384×576 27.9 KB

I will check it.

6

Hi @nujwaan

Could you please share the store link so we can check it further?

Looking forward to hearing from you soon. Thank you!

Best,
Daisy - Avada Support Team.

7

ah ok sorry the link for preview is: https://jkuq0z6vq0hzyqfw-21048721472.shopifypreview.com

8

ah ok sorry the link for preview is: https://jkuq0z6vq0hzyqfw-21048721472.shopifypreview.com

9

If you then navigate to https://www.longforte.com/collections/valentines-day-2024 you will see this page

10

Hi @nujwaan ,

Please go to Actions > Edit code > Assets > main.css file and paste this at the bottom of the file:

.cc-collection-banner.section--template {
    margin-top: 2rem;
    margin-bottom: 0rem;
}
11

Amazing thank you so much! :slightly_smiling_face:

12

How would I reduce the gap after the collection description as well please?

13

Hi @nujwaan ,

You’re welcome and happy to help :blush:

14

Hi @nujwaan ,

Please add code:

.cc-collection-products.section--template {
    margin-top: 2rem;
}
15

Amazing you are such a wonderful help! I can’t thank you enough