Hi, I just duplicate a collection template and in this new section I have extra top margin between the header and the collection title. Can anybody can help me with this please.
Topic summary
A user duplicated a collection template and encountered unwanted extra top margin between the header and collection title.
Initial Solution Attempted:
- Adding CSS code to theme.liquid file above the
</body>tag - This reduced the margin but caused unintended side effects on other custom collection pages, where content began overlapping
Alternative Solution Proposed:
- Navigate to: Online Store → Theme → Edit Code → Assets → theme.css
- Add specific CSS targeting the vertical space container:
.container--vertical-space-small {
margin-top: 30px !important;
}
Current Status:
The discussion remains open as the user is seeking a solution that fixes the duplicated template’s margin without affecting other collection pages. The challenge is isolating the CSS changes to only the new template.
Hey @Claudia1212
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hello,
I did it, and the results worked but at the same time my other custom collection pages that do not present that problem change to this, seems like it is overlapping the info. Do you know what can I do?
Hi @Claudia1212
This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Theme.css
.container--vertical-space-small {
margin-top: 30px !important;
}
Hope you find my answer helpful!
Best regards,
Richard | PageFly