Custom Images
Serenity allows you to customize various images used in the template. To make this easier, we've provided a number of alternate images, already created in a variety of colors. Included in the template files is an /images/alternates folder with customized images for menus, product tags and loading bars. You can also change the background image, giving you a simple way to create a whole new look!
Background Image
By default, Serenity includes a semi-transparent texture which you can use and change the background color with your CSS options. But don't stop there! You can upload a new background image in your template options. Want to change the background for the holidays? It's super easy with Serenity.
Once you've uploaded the image, head over to your CSS options for the "Background Image Properties". Here you can select if the image repeats or is a large fixed image, specify the background position, and voila! - a new background.
Menu Highlight Image
Included are (14) color variations for the Menu Highlight image that shows on hover and selected states. You can upload a new image in your template options to customize with one of these variations:
 |
 |
 |
 |
 |
 |
 |
| Slate (default) | Black | Blue | Red | Green | Grey | Lime Green |
 |
 |
 |
 |
 |
 |
 |
| Orange | Pink | Purple | Dark Red | Sky Blue | Teal | Yellow |
Product Tag Image
Product tags use a sliding door image technique, so there are two image files - a left side and a right side. Included with Serenity are (17) color variations for the product tags. To change from the default, simply go to your template images and upload a left and right image from the following choices:
Checkout Page Loading Bar Image
We've included (13) animated loading bar images for your Checkout Page so that you can customize your site through the entire shopping experience. Choose from these variations by simply uploading a new image in your template options:
