How Do I Make My Logo Bigger on Shopify?

One of the most common questions we get asked here at Shopify is “How do I make my logo bigger?”

There are a few different ways that you can go about increasing the size of your logo on Shopify. In this article, we’ll cover a few of the most popular methods:

1. Use a bigger image file

The first and simplest way to make your logo bigger is to use a bigger image file. If you have a logo that’s currently 400px wide, try using an image that’s 800px wide instead.

To do this, go to the Settings > Files section of your Shopify admin, and upload a new, larger version of your logo file. Once it’s uploaded, go to the Online Store > Themes section and click on the “Customize” button for your current theme. In the “Logo” section, select the new, larger logo file that you just uploaded.

2. Use CSS to increase the size of your logo

Another way to make your logo bigger is to use CSS (cascading style sheets). This method is a little more technical, but it can be very effective.

To use CSS to increase the size of your logo, you’ll need to edit your theme’s code. Go to the Online Store > Themes section of your Shopify admin and click on the “Edit HTML/CSS” button for your current theme. In the “Assets” folder, find the “theme.scss.liquid” file and open it in the code editor.

Once you’re in the code editor, look for the “logo” section. You’ll see some CSS code that looks something like this:

.site-header__logo {
max-width: {{ settings.logo_max_width }}px;
padding: {{ settings.logo_padding }}px;
}
.site-header__logo img {
height: auto;
width: 100%; }
.site-header__logo svg {
width: {{ settings.logo_svg_width }}px; }
.site-header__logo {
font-size: {{ settings.logo_font_size }}px; }

Replace that code with this:

.site-header__logo {
max-width: none;
padding: 0; }
.site-header__logo img {
height: auto;
width: 100%; }
.site-header__logo svg {
width: {{ settings.logo_svg_width }}px; }
.site-header__logo {
font-size: {{ settings.logo_font_size }}px; }

This code will remove any maximum width setting from your logo , so it can be as big as you want it to be. It will also remove any padding, so your logo will be flush against the edge of its container.

Once you ‘ve added this code, click on the “Save” button at the top of the page , and then check out your store front to see how it looks. If you want your logo to be even bigger, you can try increasing the font – size or SVG width values.