How to make collection page product card left information left aligned

Store Design
, , ,

Topic summary

A store owner is experiencing alignment issues on their collection page product cards, where the title, price, and add-to-cart button are not fully left-aligned.

Two CSS solutions were provided:

Solution 1 (Abdosamer):

  • Add code to component-card.css targeting .card--card.card--media>.card__content with zero padding
  • Modify .card__information with specific margin settings
  • Add code to quick-add.css with padding adjustments

Solution 2 (Made4uo-Ribe):

  • Navigate to Shopify admin → Online Store → Themes → Edit code
  • Locate base.css, style.css, or theme.css in the Assets folder
  • Add CSS targeting .card__information, .card__content, and .card--card.quick-add with zero left/right padding and margins
  • Includes a visual result image showing the corrected alignment

Both solutions involve custom CSS modifications to remove padding/margins and force left alignment of product card elements.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hey I am updating my store but one thing really annoys me, on the collection page product card, the price, add to cart button and title are not fully left aligned. I will show the problem down below. Does anybody have a fix for this? Thanks in regards.

LINK: https://e8aaa0-3.myshopify.com/

PASSWORD: mohwhi

THEME: TASTE

Image 06-12-2023 at 16.16.jpeg
Image 06-12-2023 at 16.16.jpeg3420Ă—2214 502 KB

1 Like
2

Go to component-card.css and add the following code:

.card--card.card--media>.card__content {
    margin-top: calc(0rem - var(--image-padding));
    padding: 0 !important;
}

.card__information {
    padding-bottom: 1.7rem;
    padding-top: 1.7rem;
    padding-left: 0 !important;
}

Then go to quick-add.css and add the following :

.card--card .quick-add {
    margin: 0 0rem 1rem !important;
    
}
3

Hi

Check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.card__information, .card__content {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.card--card .quick-add {
    margin-left: 0px !important;
    margin-right:0px !important;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!