Shopify-theme-tweaks-Best-logo-size-for-your-online-store

Shopify theme tweaks: Best logo size for your online store

HappyPoints

A logo builds a brand, and a brand builds a logo. Both are essential elements of a business and incomplete without each other. So, you may have finalized everything from the products you wish to offer to the sales and marketing strategies and the logistics. Still, until you give a face to your business (read brand logo), everything seems anonymous. However, if you are building a logo for your Shopify website, you may have to follow specific guidelines. This is important for creating the best logo size for your business. Follow the guidelines, and your brand’s identity will undoubtedly click with the masses. 

Some of the best applications to build your logo in Shopify include Logoshi, Hatchful, Logo Maker, and GraphicSprings.

Guidelines on logo usage in Shopify

Shopify has specific rules and regulations for creating brand logos for Shopify websites, and these must be met with strict adherence. The most important of them is the logo size. But before knowing the specifications and how to accomplish them, let us know what constitutes a brand style guide.

Here is a checklist of the style guide.

No.ItemDescription
1LogoParticulars of design and usage. Recommended colors and sizes
2Brand colorsDifferent shades, where and how to use them.
3FontWhere to use and which ones are best for the selected logo size.
4Tone and voiceHow you speak to your audience defines these.
5Social mediaHow to communicate with your audience on social media.

What constitutes guidelines aren’t confined to the above, these are further divided into two main sections: Written Style and Visual Style.

Written Style

The first one is the ‘written style.’ How you decide to write your logo says a lot about how your brand chooses words for communication. It includes tone, voice, and audience considerations. It is also essential to know who your buyers are and what their expectations are from your product. So, while setting your style, remember it’s for the end-users and not you. Prioritize them above everything else.

Most importantly, have a balance between tone and voice to not look out of space.  

Visual style

The second is the visual representation. Your visual style defines the look and feel of the brand. In an essential visual style guide, rules for logo, color palette, and typeface are included. You should think about how your logo would appear with dark and light backgrounds. Also, decide the color you would be using more often. One can say that the visual style is just the initiator to help you ideate how your logo would look eventually.

Site Logo Size on Shopify (Recommended)

To help you understand the importance of the best logo size, let’s take an example of a Shopify theme – Turbo. Due to Javascript and built-in optimization, Turbo facilitates high-resolution images that load and also display quickly.  

Below is a cheat sheet for a Turbo Shopify theme released by Shopify for adjusting site logo size. In this, you will find everything from the height, width, file type to the uploading method.

Image TypeWidth (px)Height (px)File typeSection
Logo main menu400100JPG or PNG24Header
Logo Mobile15050JPG or PNG24Header
Logo footer250200JPG or PNG24Footer
Logo list400300JPGLogo list
Logo size cheat sheet

Notes:

  • Sizes may vary slightly with the change in themes.
  • As a rule of thumb, take big, square-shaped images. The height to width ratio should be 1:1 or can be narrower. However, images rectangular in shape are required to have a 3:1 size to width ratio. 

How to customize the best logo size for your business

The best logo size is the one that meets the requirements of the platform it is built on and the business. Here is a little sneak peek into what is included in a logo.

Decide the elements

To begin with, decide the elements you would like to have. It can vary from client to client and their requirements. Based on these, you may need headings, text, or other input settings.  

Build code for images

Up next, we need a combination of HTML, liquid logic text, and block settings to create the code that would showcase the image. 

How is it done?

* Disclaimer: Make sure to back up your theme before using the codes or apply any changes. 

  1. The logo will be a block, i.e., it can be moved around within the section, added, and removed. Scroll through the section>blocks. It will appear something like this:
logo-bar-section-blocks-loop.liquid hosted by GitHub

2. As you can see, each block is a list item. The Theme Editor uses  <li class=”logo-bar-section” {{ block.shopify_attributes }}> to recognize the blocks and also listen for the events.

3. Create setting values by using block>properties to refer to the block.settings. Main properties in the loop are block.settings.link and block.settings.image. The two IDs are image and link. 

4. After referencing the properties in the schema tags and assigning the type, the client can upload images from The Theme Editor and enter a URL to which an image should be linked. The image below shows the correct arrangement of the block.

logo-bar-section-setting.json hosted by GitHub

5. The image above shows two IDs – link and image. These are combined with two two-block settings with URL and image picker. This outputs two variably different settings for specific logo blocks added to the sections.

6. Using presets, assign a name to the section and specify the section it would appear on. Empty logo blocks should have a default number. Set a number and add an independent array to each block.

logo-bar-section-presets.json hosted by GitHub

Create a section for image adjustment

Create a section setting to help clients adjust the size of the logo directly from the Theme Editor. To do so, link the section to the CSS value in the section. 

Connecting logos

If you are a designer looking to help your clients own a distinct and distinctive logo, create a well-positioned (logo) bar and enhance their conversions. As described above, theme sections can be used to develop intuitive logo bars. 

How to adjust logo size in Shopify 

Before achieving the best logo size, know that it can be done both offline and online. 

  • Online: Adobe Spark, https://resizeimage.net/ are the two most widely used tools for adjusting logo size. While the former allows you to create platform-specific images, the latter has more options ranging from resizing, background, size, image format cropping, and rotation. Upload your image, select your options and let the software do what it does the best. 
  • Offline: Apart from the above, some offline tools such as Adobe Photoshop and Adobe illustrator are great when you lack an internet connection or are on the go. Their ease of use is their biggest USP.

How to adjust logo size in the header of a Shopify store

Warning!
Remember to check your logo size. If your logo is too big, it may overlap with other elements on the header section on smaller screens.  Additionally, ensure the logo image has no excess padding/whitespace, as you may be able to avoid making code changes by cropping the image.
Warning

There are several ways to adjust the logo size in the header of the Shopify store.

Way 1: Customize without code

After signing in the Online store, the Shopify admin will be opened.

  • 1. Click ‘Themes”
  • 2. Click “Customize”
  • 3. Click “Header”
  • 4. Scroll slide bar to adjust the logo width

With this way, the logo size can be adjusted to the default range size of the theme. For the Debut theme, you can adjust the width from 50px to 250px.

Way 2: Edit code

(Source: Shopify)

When you need to change the logo size out of the default size, you have to access the code to edit. Here is the tutorial.

Firstly, access theme.css.liquid file:

  • 1. Sign in the Online store
  • 2. Click on “Edit theme code”
  • 3. Open the “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.)

Different themes require different custom codes. Here is code for some common themes

Debut theme

  • 1. Open up “theme.css.liquid” or “theme.scss.liquid”.
  • 2. Insert the code below at the very bottom of the file.
 .site-header__logo-image img {
    max-width: 500px !important;
    width: 500px;
  }

The screen of mobile is smaller so using the below code for mobile version.

@media only screen and (max-width: 749px) {
  .site-header__logo-image img {
    max-width: 500px !important;
    width: 500px;
  }
}​
  • 3. Replace “500px” with your expected size.
  • 4. Click “Save”.

Minimal theme

  • 1. Open up “theme.scss.liquid”.
  • 2. Insert the code below at the very bottom of the file.
.site-header__logo .logo__image-wrapper {
  max-width: 555px;
}

For mobile version with a smaller screen.

@media only screen and (max-width: 749px) {
  .site-header__logo .logo__image-wrapper {
    max-width: 55px;
  }
}
  • 3. Replace “500px” with your expected size.
  • 4. Click “Save”.

Disclaimer:

  • Check your image dimension
  • Check logo width in the theme settings (Customize > Header > Custom logo width). Ensure this number is equal to or larger than the number you enter in the code.

Brooklyn Theme

  • 1. Open up “theme.scss.liquid”.
  • 2. Insert the code below at the very bottom of the file.
.site-header__logo img {
  max-width: 500px !important;
  width: 500px;
}
@media only screen and (max-width: 749px) {
  .site-header__logo img {
    max-height: none;
  }
}

For mobile version with a smaller screen.

@media only screen and (max-width: 749px) {
  .site-header__logo img {
    max-width: 500px !important;
    width: 500px;
  }
}
  • 3. Replace “500px” with your expected size.
  • 4. Click “Save”.

Supply theme

  • 1. Open up “theme.scss.liquid”.
  • 2. Insert the code below at the very bottom of the file.
.header-logo .header-logo__image, .header-logo__image img {
  width: 500px !important;
  max-width: 500px !important;
}

For mobile version with a smaller screen.

@media only screen and (max-width: 749px) {
  .header-logo .header-logo__image, .header-logo__image img {
    width: 500px !important;
    max-width: 500px !important;
  }
}
  • 3. Replace “500px” with your expected size.
  • 4. Click “Save”.

Simple Theme

  • 1. Open up “theme.scss.liquid”.
  • 2. Insert the code below at the very bottom of the file.
.site-header #HeaderLogoWrapper {
  max-width: 500px !important;
}

For mobile version with a smaller screen.

@media only screen and (max-width: 749px) {
  .site-header #HeaderLogoWrapper {
    max-width: 500px !important;
  }
}
  • 3. Replace “500px” with your expected size.
  • 4. Click “Save”.

Top 12 DIY Shopify customizations

Want to access to more content like this? Feel free to grab the free eBook “Top 12 DIY Shopify customizations”.

* Note: 

  • If you’re using a theme from Shopify, the Shopify Support team may be able to help you with tutorials of many customizations. However, some kinds of customizations aren’t supported. You can check Shopify Design Policy including tasks that can’t be helped by Shopify. 
  • If you’re using a theme made by a third party, the Shopify support team won’t help you with it. In this case, you can contact the developers of the third party or consider hiring a Shopify Expert for help.

Conclusion 

Whether you opt for Shopify or not, remember a logo is the face of your brand and must be unique and striking. And most importantly, it should resonate with the platform and reflect the brand’s message effectively. Do it right, and there is nothing that can stop you from achieving your goal. 

Besides resizing the logo, we also create many tutorials related to other theme factors in your store. If you have any concerns, don’t hesitate to leave a comment or contact us.

If you want to know more about useful customizations like this, feel free to grab the free eBook “Top 12 DIY Shopify customizations to drive sales”