Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Collection Banner Images Blurry On Mobile (Dawn Theme) - Help Appreciated!

Solved

Collection Banner Images Blurry On Mobile (Dawn Theme) - Help Appreciated!

kbroadhurst
Tourist
11 1 2

Hi I'm having some trouble with the images on my Collection pages. I am using Dawn theme and the problem I'm having is with the Collection Banner section. I have the box checked to display the Collection Image which looks great on desktop but on mobile the images are blurred. I have tried lots of different variations of image size and resolution but haven't found a solution. Whatever image I use it looks fine on desktop but blurry on mobile. Can somebody help me fix this? 

 

Here are some examples:

 

Screenshot (452).png

Desktop collection banner with image displaying fine. 

Screenshot (451).png

 

Mobile version with image blurry. 

 

Screenshot (456).png

Desktop image ok

Screenshot (455).png
Mobile image blurry.

 

As I mentioned I have tried various image ratios, sizes and resolutions but it seems to happen no matter what. Can anybody help me with this? 

 

My website is still in development but the link is - https://18f0de-2.myshopify.com/

 

Any help very much appreciated!

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
10241 2036 2106

This is an accepted solution.

Hi @kbroadhurst 

You can open main-collection-banner.liquid file in Online Store > Themes > Edit code, remove 3 those line of codes, save file and check again 

            {%- if collection.image.width >= 165 -%}{{ collection.image | image_url: width: 165 }} 165w,{%- endif -%}
            {%- if collection.image.width >= 360 -%}{{ collection.image | image_url: width: 360 }} 360w,{%- endif -%}
            {%- if collection.image.width >= 535 -%}{{ collection.image | image_url: width: 535 }} 535w,{%- endif -%}

Screenshot_1.jpg

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- 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: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 6 (6)

Dan-From-Ryviu
Shopify Partner
10241 2036 2106

Hi @kbroadhurst 

You can add this code to Custom CSS in Online Store > Themes > Customize > Theme settings 

@media (max-width: 749px) {
html .collection-hero__image-container img {
    object-fit: contain;
}
}

Screenshot 2024-10-23 at 08.33.46.png

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- 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: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

kbroadhurst
Tourist
11 1 2

Hi @Dan-From-Ryviu thank you for taking a look at this for me. Unfortunately this hasn't worked and the images are still coming out as blurry on mobile. Screenshots below. Do you have any other ideas I could try?


Screenshot (459).pngScreenshot (458).pngScreenshot (457).png

kbroadhurst
Tourist
11 1 2

Hi just wondering whether you had any further ideas on how I can stop the blurry mobile images on my collection banners? I tried the code you gave before but it didn't stop the blurryness.

Dan-From-Ryviu
Shopify Partner
10241 2036 2106

This is an accepted solution.

Hi @kbroadhurst 

You can open main-collection-banner.liquid file in Online Store > Themes > Edit code, remove 3 those line of codes, save file and check again 

            {%- if collection.image.width >= 165 -%}{{ collection.image | image_url: width: 165 }} 165w,{%- endif -%}
            {%- if collection.image.width >= 360 -%}{{ collection.image | image_url: width: 360 }} 360w,{%- endif -%}
            {%- if collection.image.width >= 535 -%}{{ collection.image | image_url: width: 535 }} 535w,{%- endif -%}

Screenshot_1.jpg

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- 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: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

kbroadhurst
Tourist
11 1 2

Yes! That worked 😀 Thanks so much. 

Dan-From-Ryviu
Shopify Partner
10241 2036 2106

You are very welcome! 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- 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: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.