How can to increase gap between page title and header?

Store Design
,
1

How can to increase gap between page title and header? Here’s an example of a page: TROUVER UN MAGASIN – Cozy Mood Thank you!

gap
gap1341×618 178 KB

2

@Patval please add this css to the very end of your base.css file and check

shopify admin->online store->themes->edit theme code->assets->base.css

#TopColumnContent {padding-top: 40px;}

image
image1366×768 191 KB

3

Hii @Patval

Please add this CSS to the base.css file

Steps:

Go to:

  1. Online store → Themes → Edit code → asstes → base.css

  2. Serach for the .breadcrumb_title and apply the css below

.breadcrumb_title {
    margin: 0;
    text-transform: capitalize;
    margin-bottom: 0px;
    /* color: var(--color-base-accent-2); */
    color: #222222;
    line-height: 40.8px;
    padding-top: 25px;
}

Note: To increase the gap, simply increase the top padding.

image
image1894×872 216 KB

4

Please add this code to theme.liquid file below <head>

{% if template.id == 142951383063 %}
<style>
.top-column-content .page-width {
    margin-top: -10px !important;
}
</style>
{% endif %}

Screenshot 2025-12-17 at 13.44.36
Screenshot 2025-12-17 at 13.44.362826×758 131 KB

5

Hi, @Patval
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
.title-breadcrumbs-container {
    padding: 150px 0 65px !important; 
}
</style>

Results:

image
image1225×434 25 KB

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!

6

Thanks everyone, and thanks suyash1, your solution worked!

7

Welcome, do let me know if you need any updates later.