Browse by Topic

Adding a Store Logo

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 at the top of all storefront pages. It serves not only as branding for your site, but links back to your homepage.

 
 

Logo Image Limitations

  • The logo should not exceed 250 x 100 pixels.
  • The image filetype must be JPG, GIF, or PNG.
  • The image can have a 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 custom logo to use as your logo, then click Select an image from your computer or drag an image into the box.

Upload a logo image

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

3. Click Save to finish.

Resize Drop-down menu

 
 

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.

Example of an oversized logo on a BigCommerce theme.

Resizing with Store Design

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 Store Design.

This only applies to some Stencil Themes. The option to control the logo size inside of Store Design may not be available for all themes.

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 settings in store design for Cornerstone theme

3. Click on Logo image size, and select Specify dimensions. Enter the maximum height and width dimensions you would like to use for the logo.

Specify the max width and height dimensions for the logo in store design.

 

Logo look distorted? Store Design has a toggle for constraining image proportions, located between the Max width and Max height fields, under Specify dimensions. Ensure that this is enabled as in the image above.

3. Click Save to continue working in Store Design, or Publish to make your changes live on the storefront.

Resizing with an Image Editor

Using your preferred image editing software, you can manually change the image size to fit more appropriately on your storefront. You can use an online editor like Pixlr or any 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.

 
 

FAQ

Will the logo work on mobile themes? 

For responsive themes like Stencil, there are no extra steps to make the logo appear on mobile versions of the site. If you are using the legacy Blueprint mobile theme, you will need to upload a logo for it if you want to display an image logo on mobile. See Using the BigCommerce Mobile Theme (Blueprint) for more details.

Was this article helpful?