Browse by Topic

Adding a Store Logo

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

 
 

Requirements

  • The logo should not exceed 250 x 100 pixels.
  • The image file format must be JPG, GIF, or PNG.
  • The image can have a transparent area or areas with alpha set to 0.  
 
 

Uploading a Logo

You can view and manage your logo in Storefront › Logo .

To upload a logo, select Upload a custom image to use as your logo, then click Select an image from your computer or drag an image into the box.

Upload a logo image

Use the Logo Size setting to adjust how your logo is sized.

Resize Drop-down menu

 
 

Resizing a Logo

If your logo is too large, you can resize it in an image editor. Alternatively, you can adjust the pre-determined size using Page Builder.

Example of an oversized logo on a BigCommerce theme.

 

This only applies to some Stencil Themes. The steps outlined here are written for the Cornerstone theme. The option to control the logo size inside of Page Builder may not be available for all themes.

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

Customize Button

 

Using Multi-Storefront? Each storefront's themes are located in the storefront-specific settings within Channel Manager. See Single-Storefront vs. Multi-Storefront for more information.

2. Go to the Theme Styles menu 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? Page Builder 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 Page Builder and Publish to make your changes live on the storefront.

 
 

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 Enabling and Customizing the Mobile Theme for more details.

Can I change my logo image after uploading it to my store?

Yes, you can change the logo image in your store from within Storefront › Logo by clicking the button and selecting Replace image from the dropdown. This will allow you to select an image from your computer to replace your current logo image.

Why is my logo larger on my printable invoices than it is on the storefront?

The logo on your store's printable invoices uses the dimensions of the logo image as uploaded rather than the logo size selected in Storefront › Logo. To change the size of the logo on your printable invoices, resize your logo image using your preferred image editing software, then re-upload the image in the control panel.

Can I add alt text to my logo image?

Yes, you can add alt text by selecting Enter text to display as your logo, typing in your desired text, and saving your changes. After saving, follow the instructions in Uploading a Logo to add your logo image. Once completed, your logo will use the alt text you entered.

Why does my logo have a black background in store emails?

Some email clients may display your store logo with a black background in transactional emails if:

  • the logo image has a transaparent background
  • the image uses the PNG file format

To prevent this from occurring, convert your logo to JPEG format or remove any transparent areas in the image using your preferred image editor.

Was this article helpful?