How do I replace images within my template?

  • 0
  • 1
  • Question
  • Updated 5 years ago
  • Answered
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: Archived

After you've connected to your store via WebDAV, you'll immediately notice that as you navigate between the directories that initially, they're empty. This is because your Bigcommerce store is currently inheriting all template files and stylesheets from your selected master template (the selected design on the Store Design page). As you upload files, you'll notice your Bigcommerce store will start loading these files instead of our versions.

Your template customizations and changes need to only contain the template files that you customize. The reason for this is so that any updates that we release will automatically apply to as many template files as possible, as we will not modify a client-customized template file.


As soon as you create the images directory outlined below, BigCommerce will begin loading all images from that directory. You must upload ALL of the images in the downloadable template ZIP file in to the images directory to ensure all images exist on your store.

Replacing Store Buttons

To get started with template modifications, we've made it easy for you to obtain a ZIP archive containing all of the template files that are currently in use of your store. You can use files in this ZIP file as a reference for your customizations, and once you've customized a particular file, upload it via WebDAV and refresh your Bigcommerce store to see the changes.


To download the template ZIP file:

1.) Login to your Bigcommerce Control Panel and click the Design link in the menu.

1138-1_and_3.png

2.) Click the Download Template Files button under the Current Store Design section to download the template files to your computer.

1138-2.png

3.) Save the file on your computer in a place where you can easily find it. We also recommend that when you save it, you append the current date to the filename so that you have a backup of your template files.

2012-02-29_1405.png

Extracting the Files:

In this situation you only need the images folder from the zipped file, everything else can be ignored. (In Macs, as shown below, folders are not separated out when files are listed alphabetically. If you're on a PC, the folders will most likely be alphabetized separately at the beginning of the listing of files within the template folder.)

2012-02-29_1406.png

Move the images folder to a location on your hard drive that you can easily referrence.  This can be done by dragging and dropping it to your desktop.

Replacing the Files:

The images folder will have the base set of buttons.  It will then have have a color folder containing all the images your site template is using. Replace images in that color folder with your own custom versions.  Ensure that the file name stays the same or the system won't be able to find that image automatically.

Upload the full image folder and color sub folder into the Template folder on your WebDAV. (For WebDAV instructions please click here.)

Following those steps will tell the software to start reading your customized images from the WebDAV location instead of the master template files.  Again it is important to note that both the images folder and the color folder exist on the WebDAV and that the file names are still the originals otherwise the system will not be able to find them.

Replacing background images
You may have noticed that after following the steps above some images you replaced are not actually reflected on your store, for example the background images.  That is because they are referenced in the CSS files.

To override our background images with your own custom versions:

1.) Login to your store's control panel.
2.) Click on Design.

1138-1_and_3.png

3.) Click on the Template Files tab.

1138-4.png

4.) Scroll down to the Styles folder and click the plus sign next to it.

1138-5.png

5.) Now, find the the [color].css file (If you are using a blue template, it will be blue.css; a brown template will be brown.css, etc.) and edit it.

1138-6.png

6.) Edit any reference to background image so it now points to your custom image. For example you will see ../[template]/[color]/file.gif to ../../__custom/images/[color]/file.gif. (There are 2 underscores before the custom directory is referenced.)

Where [template], will be the name of the template you currently have selected as your BigCommerce store design, [color] will be the selected color scheme.

This is an example of how the URL reference looks like by default:

1138-7.png

This is how the reference should be changed if you uploaded customized versions of the image:

1138-8.png

Allowed File Types
For security reasons, Bigcommerce only allows you to upload certain types of files to your store via WebDAV. These file types include:


  • HTML/Stylesheets: .html, .htm, .css, .xml

  • Images: .gif, .jpg, .jpeg, .jpe, .png

  • Javascript: .js

  • Multimedia: .swf, .fla, .jre, .flv, .xap

Photo of Drew N

Drew N, Community Manager

  • 252,538 Points 100k badge 2x thumb

Posted 5 years ago

  • 0
  • 1

There are no replies.

This conversation is no longer open for comments or replies.