Centre product tiles in collection

Store Design

Topic summary

A user seeks help centering product tiles on their Shopify collection page, where a single product currently aligns to the left instead of center.

Multiple solutions offered:

  • CSS approach: Add custom CSS targeting .collection-grid or .collection .grid with justify-content: center properties
  • Theme.liquid modification: Insert custom <style> code above the </body> tag in the theme.liquid file
  • Container-level fix: Apply justify-content: center !important to the .container class in the CSS file
  • External resource: Reference to a detailed guide on centering product elements in Shopify

Implementation steps generally involve:

  1. Accessing Online Store → Edit Code
  2. Locating either theme.liquid or the CSS file (styles.css or custom CSS)
  3. Adding the provided code snippets

Responses include code examples and screenshots demonstrating the centered result. The discussion remains open with no confirmation from the original poster about which solution worked.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hello,

Does anyone know how you to centralise the product tiles on the collection page? So the single product on its own is in the centre rather than to the left hand side.

https://altitudesupplements.com/collections/frontpage

Thanks

1 Like
2

Hi,

Hope this will help

Add Custom CSS

Css code example

.collection-grid {
    display: flex;
    justify-content: center;
}

If It Doesn’t Work

try this code

.collection .grid {
    justify-content: center;
    text-align: center;
}
3

Hey @teebey

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1743166506646.png
Moeed_0-1743166506646.png931×722 142 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

4

Hi @teebey
To make a single product center instead of left aligned use the code below

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “styles.css”
  6. Add the following code at the end of the file.
.container {
    justify-content: center !important;
}

HuptechWeb_0-1743166636751.png
HuptechWeb_0-1743166636751.png1553×899 128 KB

5

hi Teebey @teebey Check out the steps and code in this guide here https://www.hulkapps.com/blogs/shopify-hub/the-ultimate-guide-to-centering-product-titles-in-shopify#section3

I’m pretty confident that it should work for you.