Tutorial: Resizing Your Online Store’s Logo

Olivia
Shopify Staff
1695 146 302

Most Shopify themes have a setting to adjust your logo size. This setting can be found in your Admin under Online store > Themes > Customize > Header > Custom logo width or Custom logo height. However, if you need your logo to be bigger than what this setting allows, you can follow the tutorial below.

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Replies 48 (48)

Whitebluffs
Visitor
2 0 0

This is showing at the bottom of my website, how do I get rid of it?

.site-header__logo-image img {
max-width: 500px !important;
width: 500px;
}

Olivia
Shopify Staff
1695 146 302

Hi, @Whitebluffs!

Welcome to Shopify Community.

I wonder if you pasted the code into theme.liquid and not theme.scss.liquid? That would likely have caused the code to become visible on your website instead of making the style changes you need.

You can easily roll back liquid files individually to a time and date before you made the changes. It's also never a bad idea to keep a backup/duplicate of the file you are working on for easy reference. You can add unedited theme templates right from Admin > Online Store > Themes > Add Theme.

That should do the trick, but let me know if you have other questions.

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Harrisonselgin
Tourist
21 0 1

Good afternoon!

i have used the code and it finally looks big enough however now it’s not centred? Can your advise?

i believe our url is 

https://www.harrisons.shop

im new to alllllll of this, thanks in advance!

Harrisonselgin
Tourist
21 0 1

D4B52885-1FC3-4C95-9AEB-B2C5F2A14BA4.png

Olivia
Shopify Staff
1695 146 302

Thanks for your engagement, @Harrisonselgin.

Are you able to share the code you have used in the backend? This can help us provide more accurate advice.

In the meantime, maybe try adding a <center> tag for placement in the middle.

I look forward to your reply,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Harrisonselgin
Tourist
21 0 1

Good morning,

 

This is the code I added

}
.site-header__logo-image img {
max-width: 550px !important;
width: 550px;
}

 

I have no experience with coding and found the information on another forum..

 

Olivia
Shopify Staff
1695 146 302

Thanks for your reply, @Harrisonselgin.

That code looks specific to the Debut or Venture theme. Can you clarify which of these you are using?

If it's a different Shopify-developed theme, I highly recommend following this tutorial step-by-step for your specific theme. It's good to be somewhat familiar with basic HTML, but the instructions are very clear if you aren't.


I look forward to your reply,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Harrisonselgin
Tourist
21 0 1

good afternoon, it is the debut theme

Olivia
Shopify Staff
1695 146 302

Thanks for confirming, @Harrisonselgin!

In this case, it appears that the logo dimensions you chose exceed the original max image container for Debut. This forces the logo to overflow to the right. You can fix this up by injecting this additional piece of code:

display: flex;
justify-content: center;

This will bring your entire code to look like:

.site-header__logo-image img {
max-width: 550px !important;
width: 550px;
}
.site-header__logo-image {
display: flex;
justify-content: center;
}

Let us know if that works.

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Harrisonselgin
Tourist
21 0 1

Good morning, 

 

I assume there is no way to stop it over flowing without making the logo smaller? unfortunately it just makes it too small on the desktop version.

 

TIA, Ashleigh

Olivia
Shopify Staff
1695 146 302

Not necessarily, @Harrisonselgin.

Did you follow the latest code instruction I provided? That uses the same dimensions as your original code.

Keep me posted,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Harrisonselgin
Tourist
21 0 1

Good afternoon,

 

yes I used it but it has had no affect sadly, we may just have to deal with it the way it is.

TIA, Ashleigh

Olivia
Shopify Staff
1695 146 302

Hey, @Harrisonselgin!

That's completely my bad, there was a slight miscalculation in the code that I provided earlier.

I have since updated that post to the full code you should use. Please try that - it should do exactly what you need.

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Harrisonselgin
Tourist
21 0 1

Good morning,

 

this hasnt wokred and made a load of changes. is there anyway to remove a past code and go back to my original? cant remember it.

 

TIA, AShleigh

Harrisonselgin
Tourist
21 0 1

Harrisonselgin_0-1616660045362.png

 

Olivia
Shopify Staff
1695 146 302

Thanks for the update, @Harrisonselgin.

From inspect tools, it looks you may have removed a few necessary curly braces that broke the CSS. You can definitely revert back to your original theme file by following this guide.

If you would still like to make these changes on your site following that, our Support team might be able to assist you with this tutorial. Please connect with us 1:1 to see if you're eligible and for next steps.

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

LucienLife
Visitor
2 0 0

Hello, I have implemented the codes you gave. However, it appears that the image are low quality on desktop. But on mobile it's very HD. I'm not sure what I did wrong here. 

LucienLife_0-1617604172164.png

 

www.petpeeve.me

Olivia
Shopify Staff
1695 146 302

Hi, @LucienLife.

Welcome to our Community and thanks for your question.

This is very likely related to the logo's original image quality. If the original image is small, it will become more pixelated on larger screens. Vice versa, it will appear more clearly on smaller screens as the image doesn't need to expand to fit the screen.

With that being said, I had a look at your site and you may have already uploaded a higher quality logo image. The logo looks fantastic on desktop currently: 

05-20-krc4z-wq4hu

Don't hesitate to reach back out if you have further questions.

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

LucienLife
Visitor
2 0 0

Thank you for your response could you tell me the best size for the logo png file? However, I am still having trouble with the logo, I viewed it from both my laptop and desktop they're still very blurry. 

Below is a screenshot, even though it looks a lot more blurry on my end due to the same reason you had already mentioned.

What's the most ideal size for a png file. So it wouldn't get pixelated no matter how big the screen is.

 

This is something I'm trying to go for. 

LucienLife_1-1617689518225.png

 

LucienLife_0-1617689384323.png

 

Olivia
Shopify Staff
1695 146 302

Thanks for getting back to me, @LucienLife.

The size of your logo image is largely dependent on the dimensions of the custom code. For example, this thread calls for image widths of 500 pixels; usually logos are square, meaning 500px X 500px. This should be the minimum image size of your original logo.

Please let me know if you have further questions.

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

King-fidget
Visitor
1 0 1

thanks for your advice, the logo of my site is beautiful

Olivia
Shopify Staff
1695 146 302

Thanks so much for letting me know, @King-fidget!

 

I'm so glad I could help.

 

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

cata-queen
Visitor
1 0 0

Hello im using debut as well. 

Same issue, when i add the code it goes off centre and then with the other fix you provided it does nothing. 

What can i do to fix size and have it centered?

Olivia
Shopify Staff
1695 146 302

Thank you for joining this thread, @cata-queen!

 

In this case, please connect with our Support Team directly to see if you are eligible for in-house support for your desired changes. It's likely there is some conflicting code that is preventing your  results, and that you need a customized solution.

 

We look forward to connecting,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

jaydsneakers
Visitor
3 0 1

Hi Olivia, 

 

Thanks for the help on sizing. ive managed to change this but now the image quality has dropped significantly. ho can i adjust this ?

 

many thanks 

Olivia
Shopify Staff
1695 146 302

Hi, @jaydsneakers!

Thanks for reaching out. Image quality should only be impacted if you re-size the image to be larger than the original image allows. Can you confirm what size the original image is, and what size you are using when you restructure with code? 

Regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

krystolshanice
New Member
7 0 0

Hello, my shop is krystolshanice.myshopify.com or krystolshanice.com How can I center my logo? The code worked to make it bigger but now it's not centered.

Thank you,

Krystol Wilson

Olivia
Shopify Staff
1695 146 302

Hey, @krystolshanice!

Thanks for your comment and sharing your question.

I just had a look at your website, and it looks like your logo is already centred. Were you able to resolve this? In case I have misunderstood and you are still experiencing this issue, please grab a screenshot and share it with me here.

I look forward to your reply,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

FraserD
Visitor
1 0 1

Hi Olivia

 

You've been a great help to me re your advice below.

Just two other questions from me;

- When I increase my logo for my mobile version it pushes the other icons i.e. shopping cart off the page, are you able to advise how you reduce the padding between the logo field and header icons?

IMG_7045.jpg 

- Also, I have added a 'content' field, which looks great on desktop (centered and the width of the screen), but as per the image below on mobile, it has squeezed the text down the left side of the page, could you please assist? 

IMG_F0CC5703F024-1.jpeg

UmairA
Shopify Partner
1106 101 225

Hey there @FraserD,

Welcome to the community and don't forget to share your store URL since we can't offer much help without actually looking at the page (and in some cases front-end code inspecting too). Post your store URL (or PM me) so I might offer you some code to get rid of the issue.

Good day!

Olivia
Shopify Staff
1695 146 302

Thanks for the reply, @FraserD.

I can definitely provide some advice around your questions, but I will need to know which theme you're using. 

I look forward to your reply,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

maisie-worm
Visitor
1 0 1

Where do I go to find theme.css.liquid so I can resize my logo?

UmairA
Shopify Partner
1106 101 225

Hey @maisie-worm!

You can find theme.css.liquid file by 

1> Go to the Online store

2> Click on Edit theme code

3> Open Assets folder

4> Locate theme.css.liquid file (The file can be named differently in your theme such as theme.scss.liquid or stylesheet.css.liquid etc.)

Hope that helps!

Olivia
Shopify Staff
1695 146 302

Thanks so much for chiming in to help out with @maisie-worm's question, @UmairA!

I trust that answer was helpful, @maisie-worm, but let us know if anything else comes up.

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

King-BL
Visitor
2 0 1

merci pour les explications très simples et efficaces.

J'ai un résultat merveilleux sur mon site.

Olivia
Shopify Staff
1695 146 302

I'm so glad I could help, @King-BL.

Thanks for reaching out and letting me know it worked.

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Zbrooklyn
Visitor
1 0 0

I tried this on the California theme and it doesn't seem to work the logo-max-width seems to be 300px I need it to be 400px

Olivia
Shopify Staff
1695 146 302

Hey, @Zbrooklyn.

Thanks for reaching out with your question.

At this time, we are only able to troubleshoot Shopify-developed themes. In this case, I encourage you to connect with your Theme's Developer or an Expert for specific code advice. I also welcome other community members to share their expertise and feedback to support your question.

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

andacat
Tourist
6 0 3

Hello - I really like our current theme, but I've read that it doesn't support removing the price from a product page (so as to just display an item with a "contact us" call to action); so, I'm checking out free 2.0 themes (which all supposedly support this - yes?). I cruised all the way through this thread, but didn't see where anyone had asked about resizing an image / logo for the "Sense" theme. The default size is tiny, even when resizing as much as possible. Is this something you can provide?

 

Alternatively, if there is a workaround for displaying a product without a price using the live theme, please let me know! I can typically stumble along in HTML without much of an issue, but know almost no CSS coding.

 

Thanks!

Olivia
Shopify Staff
1695 146 302

Hi, @andacat.!

 

Thanks for reaching out.

 

I took a look at your store, however, it doesn't appear to be a Shopify-developed theme. As such, we recommend connecting with your Theme's Developer directly for advice on functionality and customization within the theme.

As for switching to our newer Online Store 2.0 themes you can definitely do so! They are all very stunning and offer flexible customization. Please note this tutorial is developed specifically for Shopify themes pre Online Store 2.0 store era so this tutorial will not work.

 

If you're looking for further code advice from our community, I recommend starting a new topic thread specific to your questions. This will provide visibility around your question and connect you with code experts on our community.

 

Let me know if you have further questions.

 

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

andacat
Tourist
6 0 3

Thank you for responding - but - I was reaching out because I am looking to move to Shopify's "Sense" theme. Upon researching this option before pulling the trigger, I didn't see any comment / instructions / link to where how one could change the logo size in the "Sense" theme. Possible to get this?

 

Thank you~!

Olivia
Shopify Staff
1695 146 302

Thanks for following up, @andacat!

 

My apologies for the confusion. This tutorial was built specifically for Shopify themes before the Online Store 2.0 themes were released, to be implemented only if you have custom needs that default settings do not meet. The Sense theme is one of the newer themes, so the code advice in this tutorial would not be applicable.

With that being said, all Shopify themes are customizable and what you describe can be accomplished if not through default settings, then through custom code. Like all of our themes, you can find the logo settings under Admin > Online Store > Themes > Customize > Header > Logo (there is a built-in option to adjust the logo width (min 50px - max 220px).

If you're looking for something other than the built-in options, then you can open a new topic thread with your question for code advice or connect with our Support team to confirm your eligibility for in-house changes.

 

I hope that provides further insight, but let me know if I have missed anything.


Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

MTBSupport
Visitor
3 0 0

Hi Olivia,

 

Do you have instructions for the Dawn Theme? Our logo is blurry... 

 

Thank you for your help. 

Olivia
Shopify Staff
1695 146 302

Hi, @MTBSupport!

 

Thank you for your comment.

 

Dawn is also one of the new Online Store 2.0 themes, and this tutorial is built for the themes prior to the Online Store 2.0 era so these instructions will not apply. Please feel free to open up a new topic with your question to get feedback from our community.


Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

ice10
Visitor
2 0 0

Hi. How can you make the logo bigger in height in TASTE free theme?

 

Olivia
Shopify Staff
1695 146 302

Thanks for reaching out, @ice10!

 

Taste is a free Online Store 2.0 theme, so the same conditions as my most recent reply will apply here.

 

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

jake007k
Excursionist
20 2 0

please do dawn

Bayleelenz
Visitor
1 0 0

what is the code for spotlight theme?