How to change header logo from being blurry -- Studio Theme

Solved
JRC27
New Member
4 0 0

Hi there,

 

I'm VERY new to Shopify and have 0 experience in website building/editing. 

I managed to sort out a code that helped me change the sizing of my logo from 300px to 500px so that it appears bigger in the header, though it seems to have caused really bad pixelation (both in desktop and mobile format). The image itself is a high quality png file from Procreate if that's any help. 

 

Sorry if I've missed any important information -- I'm pretty inexperienced as I said above, but let me know if you need any more info and I'll be happy to share!

 

Thanks in advance,

 

Jude

Accepted Solution (1)
PageFly-Richard
Shopify Partner
3650 804 1449

This is an accepted solution.

Hi @JRC27 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
This problem is that your logo image size is in the standard size with a width of 300px, so if you increase it to 500px, the image will be broken. You can solve this problem by changing your logo image You convert an image with a width of 500px

Hope you find my answer helpful!
Best regards,
Richard | PageFly

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


PageFly - #1 Page Builder for Shopify merchants.


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

View solution in original post

Replies 6 (6)
Moeed
Shopify Partner
3046 760 924

Hey @JRC27 

 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
JRC27
New Member
4 0 0

Sure thing! The URL is: https://7b6971-2.myshopify.com/password

 

and the password is staiye

 

Thanks for the quick response!

Moeed
Shopify Partner
3046 760 924

Hey @JRC27 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.header__heading-logo {
    width: 300px !important;
}
</style>

RESULT:

Moeed_0-1696850572955.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
JRC27
New Member
4 0 0

Thank you! I really appreciate the help. Unfortunately it didn't work. It also made the logo a lot smaller than what I'd like it to be. The goal would be to have the logo at around 500px without losing any quality in the image, which I know is possible as the original file is a very high quality PNG.

 

If you have any insight to this I'd be so grateful!

 

Thanks again,

 

Jude

websensepro
Shopify Partner
758 102 103

Hi, @JRC27.

 

Follow These Steps.

Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.

 

 

.header__heading-logo {
    width: 300px !important;
}

 

 

Result:

websensepro_0-1696850278925.png

 

 

 

 I hope these is helpful for you.

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
PageFly-Richard
Shopify Partner
3650 804 1449

This is an accepted solution.

Hi @JRC27 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
This problem is that your logo image size is in the standard size with a width of 300px, so if you increase it to 500px, the image will be broken. You can solve this problem by changing your logo image You convert an image with a width of 500px

Hope you find my answer helpful!
Best regards,
Richard | PageFly

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


PageFly - #1 Page Builder for Shopify merchants.


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