Replacing Images in Your Theme (Blueprint)

These instructions apply to our legacy, free Blueprint themes that have not been customized. The BigCommerce Support Team may not be able 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. Due to our Design Policy, our Techincal Support is unable to edit code or make design 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 DesignThemes.

2. Click on Download Theme, then All Files.

Download Theme button

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

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):

%%ASSET_images/filename.jpg%%

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%%

Was this article helpful?