Change Price size on debut theme.

Tourist
10 0 2

Hello,

how can I make the size of the price in debut theme bigger and the price on sale size smaller?

Best Regards

1 Like
Shopify Staff
Shopify Staff
835 85 159

Hey there, Robert!

Bo here from Shopify Support!

That is a really great question, I just need some clarification. Are you looking to make the price bigger and the compare at price smaller? If so, you can do so by following these steps:

NB When editing the CSS of your theme it is always a good idea to duplicate your theme first and making the changes on the duplicate. This will prevent any errors from occurring on your live site. We also recommend adding CSS to the bottom of the file as opposed to altering the preexisting code. The new code will overwrite the previous code.

  • Go to Online Store > Actions.
  • Open the Assets folder and open the theme.scss.liquid.
  • Scroll to the bottom of this page and add the following code:
.price-item--sale {
  font-size: 50px;
}


  .price-item--regular {
    font-size: 35px;
  }

  • You can, of course, change the values to the sizing of your liking!
  • If you would like the Sale sign to match the sale price size you can add this code:
.price-item__label {
  font-size: 50px;
}

-Click Save.

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

All the Best,
Bo

 

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

1 Like
Tourist
10 0 2

Thank you very much!

 

1 Like
Tourist
3 0 1

Hi Bo,

 

If I wanted to change the font to red as well would the code look like...

 

.price-item--sale {  font-size: 50px;
}


  .price-item--regular {    font-size: 35px; 
color: fb0606;
}

Thanks for your help!
0 Likes