Product image fitting inside collection page

Store Design
, , , ,

Topic summary

A user encountered an issue where product images on their collection page fit awkwardly within borders, and the grey background disappeared when clicking into individual product pages.

Solutions Provided:
Three community members offered CSS fixes targeting the same element (.product .flickity-viewport span.nt_bg_lz:after). The solutions involved:

  • Adding custom CSS code to the theme.liquid file
  • Setting background-color to transparent (#00000001)
  • Adjusting positioning properties (top, left, right, bottom to 0)

Implementation Steps:

  1. Navigate to Online Store > Themes > Edit code
  2. Open theme.liquid file
  3. Insert the CSS code either after <head> or before </body>

Alternatively, one responder suggested adding code to style.min.css instead.

Outcome:
The issue was resolved. The user confirmed the grey background problem was fixed after implementing one of the suggested solutions.

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

Hello,

Recently I’ve ran into an issue where my product images in the collection page fit awkwardly inside the borders. Furthermore, whenever you click into a product page the grey background disappears. Is there a quick fix to this?

My store URL: https://stronos.shop/collections/sweaters
Password: GWR

Reference: https://www.daxuen.com/collections/sweaters-vest

1 Like
2

Hi @Kogun1

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code below after element

<style>
.product .flickity-viewport span.nt_bg_lz:after,
.product .flickity-viewport .img_ptw:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0000001a;
}
</style>
3

Hi @Kogun1

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: found style.min.css and add code at last line.

product .flickity-viewport span.nt_bg_lz:after,
.product .flickity-viewport .img_ptw:after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: #0000001a !important;
}

Hope this can help you solve the issue

Best regards,

Richard | PageFly

4

Hello @Kogun1

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.ss_pro_grid .product-image .pr_lazy_img{ padding-top: 100% !important; }

techlyser_web_0-1704787965723.png
techlyser_web_0-1704787965723.png1000×321 148 KB

5

This fixed the grey background issue, thanks!