Hello,
How can I center the text of my featured collections as the second image?
link of my store: https://muselabel.nl/
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:
Method 1 (BSSCommerce-HDL): Insert custom CSS code in the theme.liquid file above the </head> tag
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.
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 ![]()
Hi @Muselabel ,
Open Online Store > Theme > Edit Code
Find and open the base.css (or theme.css, custom.css) file
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?