Tutorial: Resizing Your Online Store’s Logo

Olivia_2 · October 1, 2020, 2:51am

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.

Warning! Please be mindful of your logo size. If your logo is too big, it may overlap with other header elements on smaller screens.
+
Check the logo image to ensure there is no excess padding/whitespace, as you may be able to avoid making code changes by cropping the image.

If you're using a free theme from Shopify, then our Support team might be able to help you with this tutorial. 
Although Shopify can help you with many customizations, some kinds of customizations aren't supported. 
                                                         [Read more about our Design Policy here](https://bit.ly/31wVsHb).

Note:

If you’re using a paid theme, then your theme was made by a third-party developer and Shopify’s Support team can’t help you with it. If you need help customizing a paid theme, then consider hiring a Shopify Expert. Similar to free themes, some kinds of customizations aren’t supported because of limitations associated with the theme or Shopify Admin.

Debut Theme

Open up ‘theme.css.liquid’ or “theme.scss.liquid”.
Paste the code below on the bottom of the file.

markup .site-header__logo-image img { max-width: 500px !important; width: 500px; } ###
Mobile Version[details=Show More]
If you need a different size on mobile, paste the code below on the bottom of the file.

[/details]

markup @media only screen and (max-width: 749px) { .site-header__logo-image img { max-width: 500px !important; width: 500px; } }

Replace ‘500px’ with your desired size.
Click ‘Save’.

Narrative Theme

Step 1: Editing ‘theme.scss.liquid’

Open up ‘theme.css.liquid’.
Paste the code below on the bottom of the file.

markup .site-header__logo-image { width: 500px; height: auto !important; } @media only screen and (max-width: 749px) { .site-header__logo-image { max-height: none; } }

Mobile Version[details=Show More]

If you need a different size on mobile, paste the code below on the bottom of the file.

[/details]

markup @media only screen and (max-width: 749px) { .site-header__logo-image { width: 500px; } }

Replace ‘500px’ with your desired size.
Click ‘Save’.

Step 2: Editing ‘header.liquid’

Open up ‘header.liquid’.
Find

markup {%- capture image_size %}x{{ section.settings.logo_max_height }}{% endcapture -%}

and replace it with:

markup {% assign image_size = '"original"' %}

Click ‘Save’.

Minimal Theme

Open up ‘theme.scss.liquid’.
Paste the code below on the bottom of the file

markup .site-header__logo .logo__image-wrapper { max-width: 555px; }

Mobile Version[details=Show More]

If you need a different size on mobile, paste the code below on the bottom of the file.

[/details]

markup @media only screen and (max-width: 749px) { .site-header__logo .logo__image-wrapper { max-width: 55px; } }

Replace ‘500px’ with your desired size.
Click ‘Save’.

Disclaimer:

A. Check image dimension
B. Check “Custom logo width” in the theme settings (Customize > Header > Custom logo width). Make sure the number there is equal or larger than the number you plug in the code.

Brooklyn Theme

Open up ‘theme.scss.liquid’.
Paste the code below on the bottom of the file

markup .site-header__logo img { max-width: 500px !important; width: 500px; } @media only screen and (max-width: 749px) { .site-header__logo img { max-height: none; } }

Mobile Version[details=Show More]

If you need a different size on mobile, paste the code below on the bottom of the file.

[/details]

markup @media only screen and (max-width: 749px) { .site-header__logo img { max-width: 500px !important; width: 500px; } }

Replace ‘500px’ with your desired size.
Click ‘Save’.

Venture Theme

Open up ‘theme.scss.liquid’.
Paste the code below on the bottom of the file

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

Mobile Version[details=Show More]

If you need a different size on mobile, paste the code below on the bottom of the file.

[/details]

markup @media only screen and (max-width: 749px) { .site-header__logo img { max-width: 500px !important; width: 500px; } }

Replace ‘500px’ with your desired size.
Click ‘Save’.

Disclaimer:

A. Check image dimension
B. Check “Custom logo width” in the theme settings (Customize > Header > Custom logo width). Make sure the number there is equal or larger than the number you plug in the code.

Supply Theme

Open up ‘theme.scss.liquid’.
Paste the code below on the bottom of the file

markup .header-logo .header-logo__image, .header-logo__image img { width: 500px !important; max-width: 500px !important; }

Mobile Version[details=Show More]

If you need a different size on mobile, paste the code below on the bottom of the file.

[/details]

markup @media only screen and (max-width: 749px) { .header-logo .header-logo__image, .header-logo__image img { width: 500px !important; max-width: 500px !important; } }

Replace ‘500px’ with your desired size.
Click ‘Save’.

Boundless Theme

Open up ‘theme.scss.liquid’.
Paste the code below on the bottom of the file

markup .site-header__logo img { max-width: 500px !important; width: 500px; max-height: none; }

Mobile Version[details=Show More]

If you need a different size on mobile, paste the code below on the bottom of the file.

[/details]

markup @media only screen and (max-width: 749px) { .site-header__logo img { max-width: 500px !important; width: 500px; max-height: none; } }

Replace ‘500px’ with your desired size.
Click ‘Save’.

Disclaimer:

A. Check image dimension
B. Check “Custom logo width” in the theme settings (Customize > Header > Custom logo width). Make sure the number there is equal or larger than the number you plug in the code.

Simple Theme

Open up ‘theme.scss.liquid’.
Paste the code below on the bottom of the file

markup .site-header #HeaderLogoWrapper { max-width: 500px !important; }

Mobile Version[details=Show More]

If you need a different size on mobile, paste the code below on the bottom of the file.

[/details]

markup @media only screen and (max-width: 749px) { .site-header #HeaderLogoWrapper { max-width: 500px !important; } }

Replace ‘500px’ with your desired size.
Click ‘Save’.

Express Theme

Step 1: Editing ‘theme.min.scss’.

Open up ‘theme.min.css’.
Paste the code below on the bottom of the file

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

Mobile Version[details=Show More]

If you need a different size on mobile, paste the code below on the bottom of the file.

[/details]

markup @media only screen and (max-width: 749px) { .header__logo-image { max-width: 500px !important; width: 500px; } }

Replace ‘500px’ with your desired size.
Click ‘Save’.

Step 2: Editing ‘header.liquid’

Open up ‘header.liquid’.
Find

markup {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}

and replace it with:

markup {% assign image_size = '"original"' %}

Click ‘Save’.

I hope future viewers will find this helpful! Don’t hesitate to comment on this thread if you have any further questions.

Warm regards,

Whitebluffs · November 12, 2020, 3:07am

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_2 · November 12, 2020, 5:42pm

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,

loveksw · December 29, 2020, 2:37pm

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_2 · January 4, 2021, 7:42pm

Hey, @loveksw !

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,

maisie-worm · February 12, 2021, 5:30pm

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

UmairA · February 12, 2021, 7:20pm

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_2 · February 15, 2021, 7:34pm

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,

FraserD · March 8, 2021, 3:53am

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?

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?

UmairA · March 8, 2021, 5:36am

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_2 · March 9, 2021, 11:12pm

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,

Harrisonselgin · March 12, 2021, 3:17pm

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 · March 12, 2021, 3:23pm

Olivia_2 · March 12, 2021, 9:14pm

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 tag for placement in the middle.

I look forward to your reply,

Harrisonselgin · March 15, 2021, 9:29am

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_2 · March 15, 2021, 7:19pm

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.

Note:

If you’re using a free theme from Shopify, then our Support team might be able to help you with this tutorial. Although Shopify can help you with many customizations, some kinds of customizations aren’t supported. Read more about our Design Policy here.

I look forward to your reply,

Harrisonselgin · March 23, 2021, 1:46pm

good afternoon, it is the debut theme

Olivia_2 · March 23, 2021, 10:07pm

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,

Harrisonselgin · March 24, 2021, 8:43am

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_2 · March 24, 2021, 3:49pm

Not necessarily, @Harrisonselgin .

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

Keep me posted,

Topic		Replies	Views
Debut Theme Logo vergrössern ohne den Weissen Hintergrund Shopify Design	13	151	April 6, 2021
How to change logo size in booster theme Temas de Shopify	4	76	September 19, 2024
Increase the logo of my website Store Design header , customizations , css , troubleshooting , html	8	54	June 19, 2024
How can I enlarge my logo on the Turbo Seoul theme? Store Design	20	157	April 4, 2022
How to change header logo from being blurry -- Studio Theme Store Design design , header , css , shopify-themes , troubleshooting	6	90	October 9, 2023

Tutorial: Resizing Your Online Store’s Logo

Note:

Debut Theme

Narrative Theme

Mobile Version[details=Show More]

Minimal Theme

Mobile Version[details=Show More]

Disclaimer:

Brooklyn Theme

Mobile Version[details=Show More]

Venture Theme

Mobile Version[details=Show More]

Disclaimer:

Supply Theme

Mobile Version[details=Show More]

Boundless Theme

Mobile Version[details=Show More]

Disclaimer:

Simple Theme

Mobile Version[details=Show More]

Express Theme

Mobile Version[details=Show More]

Note:

Related topics