Change look and placement of price on product cards

Tilda_Falth · March 19, 2026, 3:24pm

Hi!

I want to change the way price is displayed on my product cards trough code. I want to change color, size and font weight. I also want the price to have the same space to the edge of the product card no matter how long other product titles are. I also want the compare-at price to be on the right side of the price instead of underneath it. This is what it currently looks like:

And this is what I want it to look like:

Thanks in advance!

devcoders · March 19, 2026, 4:01pm

Hi @Tilda_Falth

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder

Tilda_Falth · March 19, 2026, 6:11pm

Hi! My website is seoulsound.se

Dan-From-Ryviu · March 20, 2026, 1:53am

Please add this code to Custom CSS in Theme settings

div[ref="priceContainer"] {
    display: flex;
    justify-content: center;
}
div[ref="priceContainer"]:has(.compare-at-price) .price {
    color: red !important;
    margin-right: 8px;
}

Result

Best regards,

Dan from Ryviu: Product Reviews App

devcoders · March 20, 2026, 2:37am

Hi @Tilda_Falth

In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > base.css and paste this at the bottom of the file:

product-price div {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
product-price .price {
  color: #b473b9!important; 
  font-size: 15px; 
  font-weight: 700; 
}
product-price .compare-at-price {
  color: #999;
  font-size: 15px;
  font-weight: 400;
  text-decoration: line-through;
}
product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note){
  align-items: baseline;
}

Best regards,
Devcoder

shopplaza_team · March 20, 2026, 2:55am

Dear @Tilda_Falth

Please update and use the following code. The steps are as follows:
1, Shopify Admin go to online store > themes > actions > edit code
2, Find Asset > base.css and paste this at the bottom of the file:

div[ref="priceContainer"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.product-card__content.layout-panel-flex.layout-panel-flex--column.product-grid__card.spacing-style.border-style.gap-style {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

product-price.text-block.text-block--align-left.text-left.h6.spacing-style {
    margin-top: auto !important;
}

.product-card__content span.price {
    margin-bottom: 0 !important;
}

Regards,
Eric from Shopplaza

ZestardTech · March 20, 2026, 8:34am

Hi @Tilda_Falth ,

We checked your store and based on your requirements (price styling, alignment, and compare-at price positioning), you can achieve this by adding some custom CSS.

Please add the following code in your base.css file:
Online Store → Themes → Edit code → Assets → base.css

.product-card__content [ref="priceContainer"] {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px !important;
}

.product-card__content .price, 
.product-card__content [class*="price"] {
    color: #d52c3c !important;
    font-size: 16px;
    font-weight: 500 !important;
}

.product-card__content [ref="priceContainer"] [class*="compare-at-price"] {
    color: #252525 !important;
}

.product-card a[ref="productTitleLink"] .text-block p {
    font-weight: 600;
    text-transform: uppercase;
}

.product-card__content {
    justify-content: space-between;
}

You can also refer to this screenshot for reference:

https://prnt.sc/8c4PoMs6epDz

This will:

Align price and compare-at price in one line
Adjust color, size, and font weight
Maintain consistent spacing regardless of title length

Let us know if you face any further issues

SealSubs-Roan · March 22, 2026, 2:07pm

Hi @Tilda_Falth

This is possible by editing your product-card.liquid and adding some CSS. Wrap the price and the compare at price in a div and apply flex, align-items: baseline and justify-content: space-between. Style the price font, color, and weight. Use consistent padding or margin and the spacing will remain for all titles/paddings no matter how long the title is.

Tilda_Falth · March 23, 2026, 3:17pm

Hi! Unfortunately this code did not work.

Tilda_Falth · March 27, 2026, 4:16pm

Thank you for your reply. This code doesn’t seem to work.

shopplaza_team · March 30, 2026, 2:08am

Dear @Tilda_Falth

Could you share your theme editing collaborator access with the email address [email removed] I will access and add the code snippets for you.
Have a nice day!

ZestardTech · March 30, 2026, 8:36am

Hi @Tilda_Falth,

Thank you for your response.

May I request you to please provide staff account access to our email ID support@zestard.com.

Once we receive the access, we will review the issue closely and implement the necessary changes as per your requirement.

Looking forward to your response.

Thank you.

Tilda_Falth · March 30, 2026, 11:49am

Yes I can do that, how exactly do I give you access?

ZestardTech · March 30, 2026, 12:52pm

Hi @Tilda_Falth,

Thank you for your response.

To provide access, please follow the steps below to add our email as a staff account:

Go to Settings
Click on Users and permissions
Under the Staff section, click on Add staff
Enter our email ID: support@zestard.com
Assign the required permissions and send the invite

Once added, please let us know so we can review the issue and resolve it for you.

Looking forward to your response.

Thank you.

Tilda_Falth · March 30, 2026, 12:55pm

I can’t add more staff without upgrading my plan. Other developers have sent a collaborator request, can you do the same?

ZestardTech · March 30, 2026, 1:06pm

Hi @Tilda_Falth,

Could you please share your Collaborator Request Code? This will allow us to send you a collaborator access request from our Shopify Partner account.

Once we receive the code, we’ll send the request right away. Kindly approve it so we can access your store and resolve the issue for you.

Looking forward to your response.

Thank you.

Tilda_Falth · March 30, 2026, 1:14pm

The code is working now. What do I need to change to make all different text blocks start at the same height on all product cards so it doesn’t look like this?

ZestardTech · March 30, 2026, 1:30pm

Hi @Tilda_Falth,

Glad to hear the code is working now.

To make all the text blocks start at the same height across product cards, you just need to add the following CSS along with your existing styles:

.product-card a[ref="productTitleLink"] .text-block p {
    min-height: 60px;
}

@media screen and (max-width: 853px) {
    .product-card a[ref="productTitleLink"] .text-block p {
        min-height: unset;
    }
}

@media screen and (max-width: 749px) {
    .product-card a[ref="productTitleLink"] .text-block p {
        min-height: 60px;
    }
}

This will ensure consistent spacing and alignment of text across all product cards.

Please add this and check, it should fix the height alignment issue.

Let me know if you need any further help.

Thank you.

Tilda_Falth · March 30, 2026, 2:43pm

Thank you but this is not working

ZestardTech · March 31, 2026, 4:27am

Hi @Tilda_Falth,

We’d like to go through the issue more closely, so we’ll need access to your store. Could you please share your Collaborator Request Code?

You can find it by going to:
Shopify Admin → Settings → Users and permissions → Collaborators

Once we have the code, we’ll send a collaborator request and review the issue from our end.

Looking forward to your response.

Thank you.

Topic		Replies	Views
Price aligned at the same level (Dawn Theme) Store Design css	4	79	November 20, 2025
Refresh theme - How to align the product title and price Store Design css , product-page	16	130	July 7, 2024
Theme - Drive Product Card Price Alignment Store Design design , css , troubleshooting	4	60	April 28, 2026
How to move my compare at price to sit to the right of my Price on the same Line? Store Design	6	165	September 16, 2023
How to Consistently Align Price Information at the Bottom of Product Cards? Store Design collection-page	18	345	December 20, 2024

Change look and placement of price on product cards

Related topics