How to align text and titles in product cards

[IntechCarl]

Hi everyone,
I wanted to align the product details on my product cards in my collection, but I can’t find any settings for this. Does someone know how can I adjust it? See photo for reference:
Store Preview Link: https://kan7abddby8ipngr-13830324282.shopifypreview.com

[LizHoang]

Hi @IntechCarl

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

.card__information .card__heading {
    height: 150px;
}

Result

Best,

Liz

[BrainStation23]

Hello @IntechCarl . Go to your theme settings and in Custom CSS section add the following code:

.card-information .price__container {
text-align: center;
}

[IntechCarl]

Hi! @LizHoang Thanks for this, but I don’t want to include the star rating with the Price and texts. Is there a way to do that?

[IntechCarl]

@LizHoang I only wanted the prices and the text below it to be aligned not with the star

[IntechCarl]

@BrainStation23 Thank you for your response, but this code make it centered aligned, What I want it to be straight not zigzag like in the photo attched, without compromising any styles/attributes from mobile view.

[Made4uo-Ribe]

Hi @IntechCarl
I tried, but there’s an issue with the rating count. It requires some edits in the Liquid code to align them together properly.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. 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:

@media only screen and (min-width: 989px){
.card-information {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.card__information .card__heading {
        height: 30%;
    }

.card__content .card-information {
        height: 100%;
    }
}

• And Save.
• Result:
• 

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

[IntechCarl]

Hi! Is it possible to align just the prices? some of my products don’t have product ratings. So I’m wondering if it is possible to make the prices as the base line of the alignment, like even if there’s a star or not the prices are still aligned to each other?

[Made4uo-Ribe]

This might require Liquid code conditions to align all the prices, whether they have reviews or not.

[mastroke]

Since I can’t access Shopify preview links directly, I can guide you based on common Shopify themes and product card adjustments.

To align the product details (title, price, buttons, etc.) on your product cards in your collection, you have a few options:

1. Adjust Theme Settings- Go to Online Store > Themes > Customize.

• Look for settings under “Product Grid”, “Collection Page”, or “Card Layout”.
• Some themes allow adjusting content alignment directly.

2. Use Custom CSS (Best Solution)

If your theme doesn’t offer an alignment option, you can fix it with CSS:

1. Go to Online Store > Themes > Edit Code.
2. Open theme.css or base.css (depends on your theme).
3. Add this code at the bottom:

css

CopyEdit

.product-card {

display: flex;

flex-direction: column;

justify-content: space-between;

min-height: 100%;

}

.product-card__title,

.product-card__price,

.product-card__buttons {

text-align: center; /* Adjust if needed */

}

If the issue is with uneven heights causing misalignment:

css

CopyEdit

.product-card {

min-height: 400px; /* Adjust the height */

}

3. Liquid Code Adjustment (If Needed)

If the issue is caused by dynamic content, you might need to edit the collection.liquid or product-card.liquid file. Look for:

liquid

CopyEdit

And ensure all elements are wrapped properly.

Let me know if you need help adjusting it!