Changing price font size and to bold for refresh theme on product page

Store Design
, ,
1

Hi, I wanted to increase the font-size of my price tag on the product page and make them Bold. Also preferably the compared-to-price greyish while the actual price is black. How can I make this happen?

2

Hi Sharon I need your help.

3

Hi @blasoo ,

Would you mind to share your URL website? with password if its protected. Thanks!

4
5

Thank you for the information. 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:
  4. And Save.
.price__container span.price-item.price-item--sale.price-item--last {
    font-size: 25px;
    font-weight: bolder;
}

Result:

Ribe_Dagandara_0-1689270130439.png
Ribe_Dagandara_0-1689270130439.png477Ɨ145 2.51 KB

I hope it help.

6

That is fantastic already! But could you help me to make it look like this?

A644B60C-9AC8-4096-AF21-AC2A00A20E48.jpeg
A644B60C-9AC8-4096-AF21-AC2A00A20E48.jpeg1152Ɨ198 25.4 KB

7

Im not sure is this would be enough but this is I think the biggest one.

Change the font-weight: 900;

Like this.

font-weight: 900;

Result:

Ribe_Dagandara_0-1689271907607.png
Ribe_Dagandara_0-1689271907607.png342Ɨ138 2.42 KB

8

You are the best! Thank you so much! I am awful at coding, and I was still wondering how to enlarge the compared-at-price and how to make it say the ā€˜Alennus 50%ā€™ instead of the Sale

9

Yes we can enlarge the that one. And you can change the size. We can also change the sale badge but we need to remove 1st the Sale. And put another one because if not it needs to edit the html.

Try this.

span.badge.price__badge-sale.color-accent-1 {
display: none;
}
.price__container:after {
content: "Alennus 50%";
position: absolute;
height: 16px;
font-size: 12px;
background: blue;
color: white;
padding: 0 2px 0 2px;
}
.price__sale s.price-item.price-item--regular {
font-size: 25px;
}

Result:

Ribe_Dagandara_0-1689275686193.png
Ribe_Dagandara_0-1689275686193.png501Ɨ154 4.5 KB

If my answer give you solution, please dont forget to MARK SOLUTION and Likes for tips. Thanks!

10

Hi there! I used your code, but the problem is I only made discounted prices bold, regular non-discounted prices stayed unchanged.

evernight_0-1701808476378.png

evernight_1-1701808522368.png

But I want to leave my strike-through price unchanged, I donā€™t want to make it bold.