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 Design › Themes.
2. Click on Download Theme, then All Files.
3. A zip file will be downloaded onto your computer. Locate it, then extract the images folder.
Reuploading the images
1. Connect to your store through WebDAV.
2. Go to the Template folder.
3. Drag the image folder from your computer to the template folder.
You are now ready to add your custom images.
Uploading Your Custom Images
The following image file types are allowed by BigCommerce:
- .jpg or .jpeg
To upload your custom images, drag and drop them from your computer to the images folder.
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:
Here is an example of a custom image being referenced in HTML:
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%%