Venue - 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

Depending on the layout and visibility settings that you choose, the logo can appear smaller than you might expect, this is because the logo container can run out of vertical space, leaving less room for your logo image to expand.

The mobile version of your store may also display a smaller logo, as mobile uses a variation of the inline navigation layout.

The best way to rectify this is to first edit out any wasted white space from the logo image before uploading it to the theme editor, leaving more space for the logo itself to be displayed.

The problem: Because of the design of the 'Inline' combined with 'Sticky' 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 the 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'.

How to optimize your logo image

1

Open your 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 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

Log in to your Shopify store admin

2

Click on Online Store then Themes in the side menu to get to the themes area of your admin.

3

Click the Customize button next to your active theme to go to the theme editor.

4

Once the editor is open click on the  Header section in the menu on the left of your screen.

5

From here you can access the Custom logo width sliders, as shown in the screenshot below :

6

Change the width (and thus relative height) to your preference.

7

Click 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.

Venue comes with 3 layout options and  3 visibility options, which all work in any combination : 

Layout: 

• Inline - The navigation aligned to the left with the logo centered on the same line
• Center- Both the navigation and logo are placed in the center of the header, with the logo on top.
• Icons - The logo remains exposed in the center with the navigation hidden behind a hamburger/mobile style icon.

Visibility:

• Default -  The navigation will only be visible at the top of the page, as the customer scrolls down the navigation will leave the page and only be visible again upon scrolling back up.
• Scroll up -  Similar to default, the navigation will no longer be visible once the customer scrolls down, however, it will instantly be visible again once the customer starts to scroll back up the page.
• Sticky -  The navigation remains on screen at all times, remaining visible as the user scrolls down.

Image sizes

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