How can I center the text in featured collections? (SENSE THEME)

Topic summary

A Shopify store owner using the Sense theme wants to center the text in their featured collections section to match a reference image.

Solutions Provided:

Two different CSS-based approaches were offered:

  1. Method 1 (BSSCommerce-HDL): Insert custom CSS code in the theme.liquid file above the </head> tag

  2. Method 2 (BSS-TekLabs): Add CSS to base.css/theme.css file targeting .collection-list .card-wrapper .card__content with absolute positioning at 40% from top

Follow-up Issue:

After successfully centering the text, the user asked how to remove an arrow element. A solution was provided using CSS to hide the arrow by targeting .collection-list .card-wrapper .card__content .card__heading span with display: none.

Status: Resolved. Both solutions included code snippets and result screenshots demonstrating the centered text effect.

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

Hello,

How can I center the text of my featured collections as the second image?

link of my store: https://muselabel.nl/

Hi @Muselabel ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:


Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

Hi @Muselabel ,

  1. Open Online Store > Theme > Edit Code

  2. Find and open the base.css (or theme.css, custom.css) file

  3. Paste the code snippet below at the bottom of the file and hit save

.collection-list .card-wrapper .card__content {
    position: absolute;
    top: 40%;
}

.collection-list .card--card .card__inner .card__media {
    border-radius: calc(var(--border-radius) - var(--border-width) - var(--image-padding)) !important;
}

Here is the result

Hope this helps you solve the issue.

Please don’t forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

It worked thank you very much, but how can I remove the arrow?

You can add this code snippet to hide the arrow

.collection-list .card-wrapper .card__content .card__heading span {
    display: none;
}

Here is the result