Browse by Topic

Adding an Image that Appears on Every Page

 

This feature requires knowledge of HTML/CSS. See Getting Help for avenues of assistance.

These instructions apply to our legacy Blueprint themes, that have not been customized. As always, we recommend backing up your current theme customizations before making any changes.

To display images or information that will display on every page, like payment logos, it needs to be placed in a specific area in the theme's code. The following guide will show you how to upload these images and add them manually into your store's HTML code. See the bottom of this page for some sample images, including credit card logos and a PayPal Bill Me Later banner.

 

Using Stencil? Most of the common items such as social media icons, payment icons and SSL seals can be added to the footer using the Stencil Theme Editor without touching code. If you have something else you would like to paste into the footer or header, it is possible to do so with Edit Stencil Theme Files. See Getting Help for avenues of assistance.

Adding the Image Code

Below lists examples of where you can paste the code.

 

Where do I put the code? There is no single line that will work on all BigCommerce themes. If you have a good idea of where you want it, please visit the BigCommerce Community Ask a Design Partner Group for recommendations specific to your theme.

At the Top of the Page (Header)

1. Go to Storefront Design › My Themes, then click Edit HTML/CSS.

Edit HTML/CSS

2. In the list of Files used by this template, locate and click on header.html.

Header.html in the list of panels

3. Paste the code from above anywhere in the header. Change IMAGANAME.JPG to your image file's name. The HTML will look different depending on your template, and may not be identical to the image below.

Code inserted into the code

4. Save your changes. From the control panel, click View Store. If the logo is not in your preferred location, you can move the code above, save, and preview it until it is in the correct location.

At the Bottom of the Page (Footer)

1. Go to Storefront Design › My Themes, then click Edit HTML/CSS.

Edit HTML/CSS

2. In the list of Files used by this template, locate and click on footer.html.

Footer.html in the list of panels

3. Paste the code anywhere in the footer. Change IMAGANAME.JPG to your image file's name. The HTML will look different depending on your template, and may not be identical to the image below.

Code in footer

4. Save your changes. From the control panel, click View Store. If the logo is not in your preferred location, you can move the code above, save, and preview it until it is in the correct location.

On the Side of the Page

These steps will only work for classic themes that have panels on either side.

1. Go to Storefront Design › My Themes, then click Edit HTML/CSS.

Edit HTML/CSS

2. In the list of Files used by this template, locate and click on SideCategoryList.html. Use CTRL F or Command F to find panels quickly.

SideCategoryList.html in the list of panels

3. Paste the code at the bottom of the file. Change IMAGANAME.JPG to your image file's name. The HTML will look different depending on your template, and may not be identical to the image below.

Code in footer

4. Save your changes. From the control panel, click View Store. If the logo is not in your preferred location, you can move the code above, save, and preview it until it is in the correct location.

Free Image Downloads

Right-click any of the images below to save them to your computer.

Visa, MasterCard, and Discover image.
Visa, MasterCard, Discover, and American Express image.
SecureNet logo.
PayPal Bill Me Later image.

Getting Help

Don't feel comfortable adjusting your design or want to work with an expert? Check out our BigCommerce Partner Directory or ask your question in the BigCommerce Community Ask a Design Partner Group for assistance. Due to our Design Policy, our Techincal Support is unable to edit code or make design changes.

Was this article helpful?