add minimal spacing

Store Design
, , , ,

Topic summary

A user seeks to add spacing between star ratings and product prices on their Shopify store, as shown in provided screenshots indicating the elements appear too close together.

Proposed Solutions:

  • Add CSS code to base.css file targeting .loox-rating class with margin-top: 20px
  • Alternative suggestion to use custom.css file when base.css cannot be located
  • Another approach recommends adding CSS via Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS, targeting .product-block.product-block--price with margin-bottom: 20px !important

Current Status:

  • User unable to locate base.css file in their theme editor
  • Loox team representative notes that spacing appears correct on the live site, though theme customizer may not accurately reflect margins
  • Issue may already be resolved, but support team available if further adjustments needed

The discussion remains open with multiple CSS solutions provided, though implementation confirmation is pending.

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

Screenshot 2024-12-08 at 01.37.45.png
Screenshot 2024-12-08 at 01.37.45.png414×128 1.83 KB

Screenshot 2024-12-08 at 01.39.26.png
Screenshot 2024-12-08 at 01.39.26.png2856×1102 272 KB

How can I add some spacing between these stars and the price?

too close to each other

Password: VIP

2

@EzelLondon - please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

.loox-rating.loox-rating-hp{margin-top: 20px;}
3

cant find base.css

4

Screenshot 2024-12-08 at 02.38.27.png
Screenshot 2024-12-08 at 02.38.27.png2856×1512 591 KB

No base.css

5

@EzelLondon put it in custom.css and check

6

Hi @EzelLondon

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.product-block.product-block--price {
    margin-bottom: 20px !important;
}

Here is the result: https://prnt.sc/Ql_tzd9di20B

I hope it helps

Best,

Daisy

7

Hey @EzelLondon ,

This is Sara from the Loox team here :slightly_smiling_face:

The theme customizer doesn’t always reflect margins and spacing accurately, but I took a look at your site and saw that the spacing looks great on your live page:

download (2).png
download (2).png1082×557 105 KB

If you still want help adjusting this further, please feel free to reach out to our support team at the email that appears below- we’d be happy to help you!