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, navigate to Online Store in your Shopify admin, select the Tokyo theme, and click Edit theme. Then, from any page, select the Header section in the editor’s sidebar.

The settings in the Logo area allow you to upload and customize your store’s logo:

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

Mobile image (optional): Optionally upload a different logo image to use on mobile devices.

Logo width on desktop: Adjust the maximum width of your logo on desktop devices.

Logo width on mobile: Adjust the maximum width of your logo on mobile devices.

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

If needed, you can use the Mobile image (optional) setting to provide a separate logo image specifically for mobile devices.

Logo width

The Logo width on desktop and Logo width on mobile settings allow you to control the maximum width, in pixels, that your store’s logo takes up on each device type. Adjust these values until you’re comfortable with how your logo looks on desktop and mobile.

Text logo

If no image logo is set, you can use the Text logo and Text slogan settings to display your own text-based logo and slogan instead.

Position

The Position setting allows you to position the logo either on the Left or in the Center of the header. This setting applies when the contact details are visible in the Normal header layout.