Re: Improve image banner quality

Solved

How can I enhance mobile banner image quality using Dawn theme?

jewellerystore1
Explorer
97 0 8

Hello, does anyone know how I can make my image banner image better quality on the mobile view?

I added some code to improve the desktop view so I want the mobile view to be the same quality. Using Dawn theme. Please help!

 

https://iyixwsg9xo78ajhp-74563387678.shopifypreview.com

Accepted Solutions (2)
Dan-From-Ryviu
Shopify Partner
8546 1683 1692

This is an accepted solution.

Please try to update code to this and check again 

assign widths = '2400, 2400, 2400, 3000, 3000, 3000, 3000, 3000, 3840'

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu
Shopify Partner
8546 1683 1692

This is an accepted solution.

Please add more this line of code to that code section 

 

height: 0px !important;

 

So the code will look like this 

 

@media (max-width: 767px) {
.banner__content.banner__content--middle-center.page-width {
    opacity: 0 !important;
    height: 0px;
}
}

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 24 (24)

laddisahsi
Shopify Partner
385 38 40

Hi @jewellerystore1 

You called the low quality image here

laddisahsi_0-1697443130629.png



You have to upload HD image here

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
jewellerystore1
Explorer
97 0 8

I'm not sure what you mean, The photo is HD, it is the biggest it can be for shopify's size limit. The image is high quality, it turns blurry only in shopify.

laddisahsi
Shopify Partner
385 38 40

@jewellerystore1 

Can you please share collab access with me?

 

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!

Dan-From-Ryviu
Shopify Partner
8546 1683 1692

Hi @jewellerystore1 

Please go to your Online store > Themes > Edit codes > open image-banner.liquid file, find this line of code 

assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'

Change to this 

assign widths = '1100, 1100, 1100, 3000, 3000, 3000, 3000, 3000, 3840'

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

jewellerystore1
Explorer
97 0 8

It's still blurry. I am only trying to fix the mobile view, if that helps at all. 

 

Screen Shot 2023-10-16 at 8.06.54 pm.png

jewellerystore1
Explorer
97 0 8

No thank you

Dan-From-Ryviu
Shopify Partner
8546 1683 1692

This is an accepted solution.

Please try to update code to this and check again 

assign widths = '2400, 2400, 2400, 3000, 3000, 3000, 3000, 3000, 3840'

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

jewellerystore1
Explorer
97 0 8

It didn't work. I think it's more blurry

jewellerystore1
Explorer
97 0 8

It's ok, I re-saved the image in Photoshop and it's much better quality. Thanks for your help!

Dan-From-Ryviu
Shopify Partner
8546 1683 1692

You are very welcome

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

jewellerystore1
Explorer
97 0 8

The image isn't clickable anymore. Can you help bring the link back?

laddisahsi
Shopify Partner
385 38 40

Hi @jewellerystore1 

Image is clickable at my end.

 

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
jewellerystore1
Explorer
97 0 8

On mobile view?

 

Only desktop is working for me not mobile 

Dan-From-Ryviu
Shopify Partner
8546 1683 1692

Please replace this code Screenshot 2023-10-16 at 17.02.36.pngWith this code 

opacity: 0 !important;

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

jewellerystore1
Explorer
97 0 8

Which file do I find that code? 

 

It's not in image-banner.liquid

jewellerystore1
Explorer
97 0 8

Hello, 

I found the code and replaced it but it has put a white gap above the image again. I had added code to remove this but it's back since changing the code. Can you help remove the white gap above the image?

 

Screen Shot 2023-10-17 at 6.18.34 pm.png

https://t9n9is14z08a1xvp-74563387678.shopifypreview.com

Dan-From-Ryviu
Shopify Partner
8546 1683 1692

This is an accepted solution.

Please add more this line of code to that code section 

 

height: 0px !important;

 

So the code will look like this 

 

@media (max-width: 767px) {
.banner__content.banner__content--middle-center.page-width {
    opacity: 0 !important;
    height: 0px;
}
}

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

jewellerystore1
Explorer
97 0 8

Yes perfect. Thanks so much!!

Dan-From-Ryviu
Shopify Partner
8546 1683 1692

You are very welcome, @jewellerystore1 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Dh7oom
New Member
10 0 0

Hi, I have the same problem, which is that I have 2 banners, the problem is in the second banner near the invoice below, his problem is that its quality is poor, knowing that the image is excellent quality, what is the solution?

Dan-From-Ryviu
Shopify Partner
8546 1683 1692

@Dh7oom please drop your store link to check

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Dh7oom
New Member
10 0 0

greenio.store 

pass: HM288

Dh7oom
New Member
10 0 0

can you please answer

Dan-From-Ryviu
Shopify Partner
8546 1683 1692

Wrong password to access your 

Screenshot 2023-12-25 at 11.08.30.png

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.