Browse by Topic

Replacing Images in Your Theme (Blueprint)


This requires editing the code of your store. 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.

When accessing your store's template files, you will notice there is no images folder. All built-in images on your theme are stored on the BigCommerce database, not your store. When you use your own images, you are using your store's storage space instead of the database. This means that all images from your store must be copied into your new image folder, or else your store will show broken images. Follow the steps below to ensure your images are stored properly.

Adding the Images Folder

Download your existing store images

1. In the BigCommerce control panel, go to Storefront Design › My Themes.

2. Click on Download Theme, then All Files.

Download Theme

3. A zip file will be downloaded onto your computer. Locate it, then extract the images folder.

images folder

Reuploading the images

1. Connect to your store through WebDAV.

2. Go to the Template folder.

template folder

3. Drag the image folder from your computer to the template folder.

add images to templated folder

You are now ready to add your custom images.

Uploading Your Custom Images

The following image file types are allowed by BigCommerce:

  • .gif
  • .jpg or .jpeg
  • .jpe
  • .png

To upload your custom images, drag and drop them from your computer to the images folder.

Add missing images


How many files can I store? BigCommerce can store up to 4,000 files in a single folder. If you are storing more files, we recommend creating one or more subfolders.

Referencing the Images in Your Store

We recommend making all CSS changes in a custom.css file.

When referencing the image, use the following format (replacing filename.jpg with your actual filename):


Keep in mind that files in WebDAV are case-sensitive. Below is an example of a custom image being referenced in CSS:

Asset variable

Here is an example of a custom image being referenced in HTML:

asset html tag

If your files are stored anywhere in the template folder, reference it with %%ASSET_folder/subfolder/filename.jpg%% For example, %%ASSET_images/my-images/filename.jpg%%

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?