Product image fitting inside collection page

Kogun1 · ‎01-08-2024

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

Dan-From-Ryviu · ‎01-08-2024

Hi @Kogun1

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code below after <head> 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>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Kogun1 · ‎01-09-2024

This fixed the grey background issue, thanks!

PageFly-Richard · ‎01-08-2024

Hi @Kogun1

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> 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

Please let me know if it works by giving it a Like or marking it as a solution!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)

All features are available from Free plan. Live Chat Support is available 24/7.

niraj_patel · ‎01-09-2024

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 </body> on theme.liquid

<style>

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

</style>

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

Product image fitting inside collection page

Product image fitting inside collection page

Community Blog Articles