Trying to centre our product listings and prices in our collection pages, right now they are left adjusted, anyone know the code to add to do this? Thanks!
Topic summary
Goal: Center product titles and prices across all collection pages in a Shopify store.
Context & Inputs:
- Store URL and a screenshot were provided to illustrate left-aligned product info.
- The change should apply to all collections from the site’s dropdown menu.
Proposed Solution:
- Add custom CSS in the main layout file (layout/theme.liquid) just above the tag.
- Target collection grid elements to set text-align: center for:
- Product title (selector similar to .grid-view-item__title within collection template).
- Product price/meta (including the Discount Ninja price class, e.g., .limoniapps-discountninja-productprice) with !important to ensure it overrides existing styles.
- Option noted: remove the title rule if only prices should be centered.
Evidence & Outcome:
- A helper shared a “before/after” screenshot indicating centered titles and prices after applying the CSS (images are central to understanding the result).
- Another contributor outlined steps to edit theme.liquid but did not include the actual CSS snippet.
Status:
- No explicit confirmation from the requester that it’s resolved, but a working CSS approach and visual example were provided. Discussion appears close to resolution but not formally closed.
please give me the store URL and the screenshot where want to change.
https://imagineperry.com/collections/preview-monica-murphy-collaboration
would be changing the products and prices below to the centre- in all collections from our drop down menu
Please add the given code above in theme.liquid
layout >> theme.liquid
.grid__item--collection-template .h4.grid-view-item__title { text-align: center; } .grid__item--collection-template .grid-view-item__meta.limoniapps-discountninja-productprice { text-align: center!important; }if you don’t want to center align the product title then you can remove the red color code, but i suggest to you this look perfect ![]()
after add the code look like this,
Hi @Imagineperry ,
Glad to support you today.
To can align center the title and price product, you can check out my suggestion below to make it:
- Go to Edit code on Online Store:
- add my code above the tag on Theme.liquid:
Eg:
I hope you find the answer helpful.
Kind & Best regards,
GemPages Support Team.



