Header: Optimize your logo

With the Venue theme you have several options to control the size and position of your logo.

Optimize your logo - before uploading it

The problem: Because of the design of the 'Inline' and 'Sticky Inline' header options in the Venue theme, you can run out of 'head room' for your logo. This means that even though you have tried to change the size of your logo in the theme editor, because of unneeded 'white space' around your logo, it still appears too small.

This issue also affects the mobile header as it's, in effect, a smaller version of the 'Inline' header. This issue is less of a problem with the 'Center' header layout as there is more scope for the header to grow vertically on the desktop.

Note: even if your logo is on a colored background this extra space is still referred to as 'white space'.

  1. Open you logo in a program such as Adobe Photoshop
  2. Lasso just the pixels of your logo using the marquee tool - or a if you have a transparent background you can hold down the CMD key on a Mac (PC: Control key) and then click on the layer's name in the layers panel. This will select just the pixels of your logo.
  3. Then type C to activate the crop tool.
  4. Crop your logo to remove the white space.
  5. Save out your logo and re-upload to your store.

Change the size of your logo - in the theme editor

Once you have cropped your logo as outlined above you can now change the width (and therefore the relative height) of your logo more successfully.

  1. Click the ‘Customize’ button in the Themes part of your Shopify admin. This will take you to the theme editor.
  2. Once the editor is open click on the 'Header' section in the menu on the left of your screen.
  3. Once this section is open look for the 'Custom logo width' slider near the top of the settings.
  4. Change the width (and thus relative height) to your preference.
  5. Save and check your work at desktop and mobile resolutions.

Move the position of your logo

Note: Because of the complexity of the header area you cannot move your logo to the left of the header area at present. The logo is always in the center with the navigation links either below or to the left of the logo.

With the Venue theme you can have five different header layouts:

  • Inline - text navigation aligned to the left, with the logo in the center.
  • Sticky inline - as above but stays visible at the top of the screen as the user scrolls.
  • Icons - the navigation and search is placed in a mobile style drawer, with only icons and logo in the header.
  • Sticky icons -  as above but stays visible at the top of the screen as the user scrolls.
  • Center -  navigation aligned to the center, with the logo also in the center, above the navigation.

Image sizes

Please see the related article linked below to learn more about image sizes.