How do i change all my head text in featured collection in the same position.

Store Design
, ,

Topic summary

A user needed help aligning collection heading text across multiple featured collection sections on their Shopify store. The headings appeared at different vertical positions, and they wanted consistency matching their first section’s layout.

Solutions Provided:

Three community members offered CSS code fixes:

  • Solution 1: Custom CSS targeting h2.title elements with adjustments to width, text alignment, margins, and padding
  • Solution 2: Code for the base.css file modifying .collection__title wrapper and title margins/padding
  • Solution 3: Targeted CSS for a specific Shopify section adjusting the h2 margin

Outcome:

The issue was resolved successfully. The original poster confirmed that both the first and second solutions worked, thanking the contributors. One helper requested their answer be marked as the accepted solution.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hi, how can i change all of the head text to the same level als the first screenshot?

first screenshot
first screenshot2940Ă—1912 783 KB

Scherm­afbeelding 2025-03-13 om 21.25.01.png
Scherm­afbeelding 2025-03-13 om 21.25.01.png2940×1912 650 KB

2

Hi there! :blush:
Here’s the CSS code to resolve your issue:

h2.title.inline-richtext.h2.scroll-trigger.animate--slide-in{
width:100%;
text-align:left;
margin-bottom:0px;
padding-left:0px!important;
}
.collection__title.title-wrapper{
padding-left:13px!important;
}
.product-grid.contains-card{
margin-top:0px!important;
}

To add this to your Shopify theme, follow these steps:

  1. Go to Online Store in your admin panel.
  2. Click on Customize next to your active theme.
  3. Scroll down in the side panel until you find Custom CSS.
  4. Paste the code I provided.
  5. Save the changes.
    You should see the updates in real-time. Let me know if you need any more help! :rocket:
1 Like
3

Hey @flaner I hope you are doing well.

In order to make the Collection title same as second featured collection section you need to paste this code in base.css file.

Here you can find. Online Store > Edit Code > base.css.

Go to the bottom and paste this code.

.collection__title.title-wrapper {
    margin: 0 !important;
    padding: 0rem 12px;
    margin: 0 !important;
}
.collection__title .title{
    margin: 0px 0px -13px 0px;
    padding: 0;
}

After that you will get this result.

qasimdevloper_0-1741898297231.png
qasimdevloper_0-1741898297231.png1006Ă—390 77.4 KB

Let me know if you need more help.

Thanks

1 Like
4

Hi there! It worked thanks! You’re the best.

1 Like
5

Hi there! This worked aswell, thank you!

6

I am happy. But I am excepting from you mark as Solution my reply too :blush: .

Thanks

1 Like
7

Hello, try adding this in the CSS box on the left panel.

#shopify-section-template--24448134447441__featured_collection .collection .collection__title h2 {
    margin: 3rem 0 2rem !important;
}
1 Like