Adding an Image that Appears on Every Page (Blueprint)

These instructions apply to our legacy themes, Blueprint, that have not been customized. The BigCommerce Support Team may not be able to assist with issues that occur after applying them to a previously customized theme. As always, we recommend backing up your current theme customizations before making any changes.

Don't feel comfortable adjusting your design or want to work with an expert? Check out our BigCommerce approved agencies or our Community.

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

Unfortunately there is no single line we can recommend that will work on all BigCommerce themes. If you have a good idea of where you want it, please visit the Themes & Design Answers section of the Community for recommendations specific to your theme.

At the Top of the Page (Header)

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

Edit HTML/CSS button

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 Store SetupDesign, then click Edit HTML/CSS.

Edit HTML/CSS button

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 › Design Options, then click Edit HTML/CSS.

Edit HTML/CSS button

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.

Was this article helpful?