How to decrease line spacing of product name / price on collection page? | Lorenza Theme

Store Design

Topic summary

A user seeks to reduce the vertical spacing between product images and their corresponding names/prices on collection pages in the Lorenza theme. The gaps appear too large in their current layout.

Solution Provided:

  • Navigate to Online Store ā†’ Theme ā†’ Edit code
  • Open Assets ā†’ theme.css
  • Add custom CSS at the bottom of the file:
    • .product-item.product-item--square .product-item__image-wrapper with margin-bottom: 5px !important
    • .price with line-height: 12px !important

Outcome:
The solution successfully resolved the issue. The user confirmed it worked as intended.

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

Hi,

I am looking to decrease close the gap a bit between the product name / price and the product photo. I will attach an example. It is a bit too spaced out for my liking.

Screen Shot 2023-02-28 at 1.38.07 PM.png
Screen Shot 2023-02-28 at 1.38.07 PM.png1316Ɨ1594 159 KB

www.houseofdakh.com

Thanks,

Elboy

2

Hi @ELBOY ,

This is Victor from PageFly - Landing page builder, Iā€™d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file

.product-item--square .product-item__image-wrapper {
    margin-bottom: 5px !important;
}

.price{
    line-height: 12px !important;
}

Hope my answer will help you.

Best regards,

Victor | PageFly

1 Like
3

Perfect. Thank you!