How to stop shopify from compressing header image?

19 0 1

When I look at the site on mobile, it seems that it compresses the image of the logo in the header and it makes it look very blurry in comparison to the other icons in the header, how do I change it so the image does not get compressed and is it's full resolution. (the logo)? 


Password abellire2023




Replies 3 (3)

Shopify Partner
7011 1326 1352

Go Online store > Themes > Customize > Theme settings > Logo, check what value did you setScreenshot 2023-12-28 at 11.10.41.png

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

19 0 1

90px, I want the actual size of the image to be that size on mobile, but I want to keep it the original resolution or at least make it a vector so it does not compress as it scales

Shopify Partner
873 117 126

Hi, @merchabellire.

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.


@media (min-width: 320px) and (max-width: 767px) {

#cart-icon-bubble svg {
    width: 24px;
    height: 24px;

.header__icon--menu {
    width: 28px;




If I managed to help you then, don't forget to Like it and Mark it as Solution!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here