Why are my banner images grainy on DAWN theme, despite using Canva?

Store Design
, , , ,
1

I am pretty frustrated as I am going to launch this brand today, but I am having trouble with the banners both mobile view and desktop banner images are of poor quality. I have tried anything you can imagine, all different ratios and sizes, but they still do not give me a good quality and look grainy. I have talked with Shopify support, but they could not help me and told me to head over to the Shopify community, so now I am here. Does anyone have a solution, please help. I am using Canva.

Another super odd thing I am experiencing is that I uploaded a mobile banner, and I was just going to change color, when I changed color and uploaded it again the letters came out in grainy quality. Its the exact same photo, file and size, I just edited the color, but it shows grainy. I just can’t wrap my head around why this is happening…
Website: www.toiletbrush.no

2

I am sorry to hear about the trouble you’re experiencing with your banners. Poor image quality can be frustrating, but there are a few steps you can take to improve the quality of your banners for both mobile and desktop views.

1 Like
3

@Onlinetrap - what are the dimensions of your original image?

1 Like
4

I appreciate your support a lot! Gives me a smile on my face :slightly_smiling_face:

5

Hello mate! I have tried every dimension you can imagine, but the ones you are seeing now are: 1500 x 1000 - this has given me the best quality thus far

6

@Onlinetrap - I think your banner code degrading the file size and hence it is getting stretched

1 Like
7

Ok, thanks a lot for checking! Do you mean the custom code I have added to make it appear as mobile size as well? This one:

I actually got this code from one of your answers on another post, so its cool to see you here in my post! The code did the job on what I needed it for at least!

.banner__media:first-child {
width: 100%;
}
.banner__media + .banner__media {
display: none;
}
@media screen and (max-width: 749px) {
.banner__media:first-child {
display: none;
}
.banner__media + .banner__media {
width: 100%;
display: block !important;
}
}
.banner__text {
font-size: 22px;
}
.button {
width: 0px;
height: 0px;
padding: 0px 0px;
font-size: 18px;
}

8

@Onlinetrap - hello it is always nice to know that my code helped someone.

For current issue we need to check banner code in template as I believe it is downgrading the image size.

1 Like
9

Thanks for the suggestion, I am not a coder, but you mean that the additional code I added has nothing to do with it, but a code within the theme, so I need to check the theme editor, and find the template.css? Or template map? And then look for the potential code that makes the banner dragged?

10

@Onlinetrap - yes, please check the theme code

11

Ok, thanks a lot! Anything specific I should look for?

12

@Onlinetrap - please check banner section file and check if you have something like banner media

13

This happens quite often. The best method would be (if ever you want to) is to design directly in Canva. Design your store in Canva using pre-built website templates. You can then import your Canva design to Shopify easily without any coding or drag & drop builders.

This will keep your media, animations, videos, embeddings all high quality, smooth and mobile friendly.

You can import your Canva designs to Shopify using this Shopify app Canvify!

1 Like
14

Hello. The issue with the code is that it makes Image Banner the entire width of the screen. On very large screens it looks terrible as the rest of the page has a more narrow width. Basically ‘full width’ is outside the boundaries of the rte. Any code to fix this? Thanks!

15

@bryan76 full width makes image take all the space on screen, other sections have width fixed and hence on large ones they have narrow widths

16

thank you for your response. the issue is that we need to use the width: 100% since if not the image is only half the screen.

in order to fix this, and have the image be in line with the margins of the rest of the page, is there some code to add to the above?

it needs something like:

but that does not seem to work.

thanks!!!