How can I center the collection product grid text? I’m using pipeline.
Topic summary
A Pipeline theme user seeks to center the product grid text on collection pages. Multiple solutions are provided:
Main Solutions Offered:
- Add CSS code to
theme.liquidfile above the</body>tag - Modify
main.css(orbase.css,style.css) in the Assets folder - Insert CSS snippet:
.collection-list__heading__text { justify-content: center; }
All respondents provide similar CSS-based approaches with step-by-step instructions and include screenshots showing the centered result.
Current Status:
The discussion remains open - the original poster follows up asking how to apply the centering to mobile views as well, indicating the desktop solution worked but mobile alignment still needs addressing. No mobile-specific solution has been provided yet.
1 Like
Hey @Mg71
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
Hi @Mg71
Do you mean the heading collection?
if it is check this one.
- From you Admin page, go to Online Store > Themes
- Select the theme you want to edit
- Under the Asset folder, open the main.css(base.css, style.css or theme.css)
- Then place the code below at the very bottom of the file.
.collection-list__heading__text {
justify-content: center;
}
- And Save.
- result:
Hi @Mg71 ,
You can follow these steps to center the collection product grid text
-
Open Online Store > Theme > Edit Code
-
Find and open the theme.css (or base.css, custom.css, styles.css) file
-
Paste the code snippet below at the bottom of the file and hit save
.collection-list__heading__text {
justify-content: center;
}
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!
