How can I left adjust product details on the collection page?

Store Design
, , , , ,

Topic summary

A user seeks to left-align product details (name, price, etc.) on their Shopify collection page, which are currently centered beneath product images.

Proposed Solution:

  • Add custom CSS code to the theme.liquid file, just above the </body> tag
  • The CSS targets .card__information and .card__badge elements with text-align: left !important
  • A screenshot shows the expected result with left-aligned product information

Current Status:

  • The solution appears unverified by the original poster
  • Another user reports the CSS fix does not work on their store (Senses theme)
  • The discussion remains open with no confirmed resolution or alternative approaches provided
Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

I want to left adjust all product details on the collection page, they are centered currently and I’m having trouble targeting the right areas to make Product Name, Price, etc all flush left under the product image.

URL: https://afca7f-2.myshopify.com/

Example:

Screenshot 2023-11-12 at 6.38.23 AM.png
Screenshot 2023-11-12 at 6.38.23 AM.png646×820 166 KB

2

Hi @blakelyhi ,

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code just above tag

Result:

makkaomakka_0-1699798737918.png
makkaomakka_0-1699798737918.png1151×332 119 KB

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

1 Like
3

Hi @blakelyhi ,

If you find this information useful, a Like would be greatly appreciated.

1 Like
4

it’s not working on my store (senses) :disappointed_face: