How to Add Space Between Prices on shop related products?

Store Design

Topic summary

A user encountered a spacing issue where prices in the related products section appeared cramped together, with no visible gap between the original and sale prices (e.g., “$44.95” and “$90.00” running together).

Solution provided:

  • Add CSS code to the main.css file (located in the assets folder)
  • The code targets .theme-money class with white-space: nowrap; and padding: 10px;

Outcome:

  • User successfully implemented the fix
  • Adjusted padding from 10px to 5px for optimal spacing
  • Issue resolved with visual confirmation via attached screenshot
Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

price cram.PNG

I can not see the option to add spaces between the prices under my related products section and it looks very crammed. (See attached image)

Can someone show me how to fix it?

I would like to add some space between the “$44.95” and “$90.00”.

2

Hey @davidkduong
could you please provide me with your store URL? I will look into it and get back to you with a solution.

3

Hi @brandboostup

My store URL is modachic-toronto.com

4

Hi @davidkduong

add this code in main.css :

.theme-money {
    white-space: nowrap;
    padding: 10px;
}
5

I was able to find it under the assets folder.

10px was a bit large but I just edited to 5px and it was good!

Thank you!
price cram.PNG

6

I’m glad I’ll be able to help you! @brandboostup