Adding an Image that Appears on Every Page (Blueprint)

 

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.

BigCommerce offers a built-in way to have images display at the top and bottom of your homepage (see more information about Creating & Editing Banners. Sometimes, though, you need something placed at the very top or the very bottom of the page, such as a credit card logo, a PayPal button, or an SSL seal. 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.

1. Go to Storefront Content › Image Manager.

2. Click Upload Images, then Choose File. Select the image from your computer, then click Upload.

Upload Images button

Choose File button

3. Take note of the image name. You will need to insert the following code in any of a few locations, replacing IMAGENAME.JPG with your image name and file type.

<img src="/product_images/uploaded_images/IMAGENAME.JPG" />

If you would like to host the image on the CDN for faster loading times, click View Full Size under the image in the Image Manager. Copy the URL, including the t= string at the end. Instead of the code above, use <img src="URL"> where URL is the full image URL.

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 Design 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 Design Group for assistance. Due to our Design Policy, our Techincal Support is unable to edit code or make design changes.

Was this article helpful?