Browse by Topic

Using a Logo Image

Many brands use imagery as part of their branding and incorporate it into their logo. By default, the store uses plain text and your store's name as the logo. BigCommerce allows you to upload your own logo image to display on the top on all pages of the store. It serves not only as branding for your site, but links back to your home page.

Logo Image Limitations

  • The logo should not exceed 250 x 100 pixels.
  • The image filetype must be JPG, GIF, or PNG. Animated GIFs will not animate on the storefront.
  • The image can have transparent area or areas with alpha set to 0.  

Uploading an Image Logo

Before uploading an image to use as a logo, consider the requirements listed above.

1. Go to Storefront › Logo and select Upload a logo image to use as your logo.
Upload a logo image

2. Click Select an image from your computer or drag an image into the box.

Select Image

3. Once the image is uploaded, there will be a drop-down menu where you can adjust how the image is sized.

Resize Drop-down menu

4. Click Save to finish.

Removing an Image Logo

To remove a custom logo from your storefront, go to Storefront › Logo. In the Logo Settings section at the top of the screen, click Show text where my logo will be displayed, and save your changes.

Show text where my logo will be displayed

Resizing a Logo

This guide provides steps you can take to resize your logo image if it is too large for your BigCommerce store's theme. The steps vary on whether you have a Stencil theme or one of the legacy Blueprint themes.

See Which Theme Platform do I have? to determine which steps will apply to your store. 

Example of an oversized logo on a BigCommerce theme.

Automatic Resizing (Blueprint Only)

Follow these steps to have your logo automatically resized when uploading it to your legacy blueprint theme. 

1. Go to Storefront › Logo, then click the Logo tab.

2. Select Upload a logo image from my computer.

Upload a logo image from my computer

3. Scroll down to the Logo Upload section, then click Choose File.

Choose File button

The recommended logo size for your theme can be found in your Theme's Manual for purchased themes. If you don't see your theme listed, for most themes we recommend a logo size of 250 x 100px.

4. Select your logo image file from your computer. Accepted file formats are .jpg, .png, and .gif.

5. Check Resize Logo, located below the Choose File button. 

Resize Logo checked in Logo Upload settings

 

Don't see this option? The Resize Logo option is only available for our Legacy Blueprint themes. Stencil themes automatically resize logo images to an optimized size. See the sections below for more instructions.

6. Click Upload Logo Image.

Example of logo image that has been auto resized to fit a theme.

Resizing with Theme Editor (Stencil)

Stencil themes automatically adjust image logos to a size pre-determined by the theme's code. To adjust this preset size, you will need to adjust it in the Theme Editor.

 

This only applies to some Stencil Themes. The option to control the logo size may not be available in all theme editors.

1. Go to Storefront › My Themes and click Customize on your active theme.

Customize Button

2. Find and click the section for Logo. It may be named differently or under another section depending on your theme. 

Logo Optimized Option

3. From the drop down, select Specify Dimensions. Enter the dimensions you want to resize the logo to.

Specify Logo Dimensions

 

Logo look distorted? The Specify Dimensions option does not maintain Aspect Ratio. The dimensions you enter should match the aspect ratio of your logo image.

3. Click Save Changes to continue working in Theme Editor or Apply Theme to make the changes live on the storefront.

Resizing via Image Editor

Using your preferred image editor you can manually change the image size to fit more appropriately on your storefront. You can use an online editor like Pixlr or an image editing program installed on your machine.

Once the logo image is resized, follow the instructions from Using a Logo Image. To learn more about adjusting images, see Fixing Distorted Images.

Was this article helpful?