A store owner wants to center a single product on their collection page (“Serenity Kits”) in the Dawn theme, as it currently sits below the “Products” heading off-center.
Attempted Solutions:
The user has tried numerous existing solutions without success, finding many outdated or ineffective.
Proposed Solutions:
Multiple respondents suggest adding CSS code to center the product grid:
Option 1: Use theme customizer → navigate to product page → add custom CSS targeting .product-grid with justify-content: center
Option 2: Edit base.css file directly and add:
collection.product-grid# {
justify-content: center !important;
}
Status: The discussion remains open, awaiting confirmation from the original poster on whether these CSS solutions resolved the centering issue.
Note: Some text in the original posts appears reversed/encoded, but the technical solutions are clear.
serenity-kits.com password- thawdu
On the collections/product page labeled “Serenity Kits” I have one product and would like to center it to the middle of the page so it sits below the word “Products”. I have tried at least a dozen solutions and many of them seem to be outdated or just don’t work.
Thank you in advance
Try this. Go to your theme customizer, click on the product page, and go to where it says Add Custom CSS. Paste this code:
.grid{
justify-content: center;
}
Does this work?
Hi @TonyG54
I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.
Please add this css in your bottom of the base.css file:
.collection #product-grid {justify-content: center;}
Regards,
San
Hi @TonyG54
You can follow these step to align Product on collection in center:
Go to Edit code
Find file base.css and add the following code after that:
.collection #product-grid {
justify-content: center !important;
}
If it worked, please mark as a solution. Good luck!