How to upload your logo

The logo of your store is one of the very first things you’d like to set up as you initially start configuring your new theme. This guide explores adding a logo as well as customizing it for best appearance.

Logo settings

To access the logo settings you have to navigate to the theme editor (customizer) by going to Online Store > Themes in your Shopify admin, select the Tokyo theme and click Customize. Then, from any page simply click on the “Header” section on the editor’s sidebar.

You’ll notice that the first three settings in the Header section are related to the logo. A quick description of each one:

Image: Upload the image file of your logo in this area to set it globally on the header of every page.

Custom width: Adjust the maximum width of your logo.

Position: Change the position of the logo.

Image logo

If your logo is available as a high quality image file format (.png, .jpg, .webp) the “Image” upload field is what you want to use, simply initiate the upload dialogue by clicking on “Select Image” and choose your logo file from your computer’s file explorer.

You don’t have to worry about the dimensions of your logo’s image, as long as it’s high quality and large enough, the theme will render an optimized size of the image based on the width that you set (see below in “Custom width”).

We recommend you upload an image twice the size of that width, i.e. if you choose 150px, the image you should upload as your logo should be at least 300px. This is to make sure that your logo continues to render crisp on screens with high pixel density.

Custom width

The “Custom width” setting allows you to set the maximum width (in pixels) that your store’s logo should take up. Feel free to adjust this value until you’re comfortable with how your logo looks. Please note that the logo will still adjust its width automatically in mobile devices and narrower viewports to preserve the layout’s appearance.

Position

This setting allows you to change the position of the logo to either on the left or the center of the header. This setting is only applicable when there are Contact details present on the header, otherwise the logo is displayed on the left.