Make the price layout look the same as the competitor store

Store Design

Topic summary

A store owner wants to replicate the price display styling from a competitor’s product page, specifically matching the size, color, and layout.

Current Issue:

  • The requester provided their store URL and a reference example showing the desired price presentation
  • An attached image demonstrates the target appearance

Proposed Solution:
A CSS customization approach was suggested involving:

  • Navigating to Shopify admin → Online Store → Themes → Edit code
  • Locating the CSS file (base.css, style.css, or theme.css) in the Assets folder
  • Adding custom CSS to modify price elements:
    • Sale price: bold, green color, 24px font size
    • Price comparison styling adjustments
    • Hiding price savings display
    • Flexbox layout modifications for price block arrangement

Status: Solution provided with code snippet and visual result example; awaiting implementation feedback from the original poster.

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

I want to have the same size of price, same colour, same layout:

Store URL: https://eva-toronto.com/collections/frontpage/products/kelly
Example store URL: https://millers-canada.com/products/thomas
Image of what I want it to look like is attached:

evatrnt_0-1731702519915.png
evatrnt_0-1731702519915.png363Ă—133 8.44 KB

1 Like
2

Hi @evatrnt

TRy this one.

  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:
span.product__price.on-sale {
    font-weight: bold;
    margin-left: -0px;
    color: green;
    font-size: 24px;
}

.product-block.product-block--price {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

span.product__price-savings {
    display: none;
}

span.product__price.product__price--compare {
    font-size: 24px;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!