How to center product listings and prices on collection pages?

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.
Summarized with AI on February 2. AI used: gpt-5.

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!

@Imagineperry

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

@Imagineperry

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 :slightly_smiling_face:

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:

  1. Go to Edit code on Online Store:

  1. add my code above the tag on Theme.liquid:

Eg:

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.