Creating Themes: A Basic Guide

This is a basic overview of how to create a new theme for BV Commerce shopping cart software.

How to Customize BV Commerce Themes

If you know how to use an image editor and a little bit about HTML and cascading style sheets (CSS), you can easily customize one of the free BV Commerce themes into a unique site in just a few hours.

Here’s a basic walk-through of how to do it. More advanced questions and answers can be found at the end of the tutorial.

Changing Images

Under Options: Themes choose a BV Commerce theme with a layout you like. The colors and pictures don’t matter. It’s easy to change them.

Make a copy of this theme by hovering the mouse over your chosen theme and selecting Duplicate Theme. Then choose Select This Theme. If you don’t, you won’t be able to see your changes reflected on your store.

Then go the new duplicate and choose Edit. You might want to rename the theme to avoid confusion.

Start by selecting Images: Other. You will see a graphical list of all the major images in the theme. If you right click on each image and select Properties you can see its size. (For example: 960pixels x 114pixels)

Out of BV Commerce, choose the images you’d like to swap in the theme. If you need some stock photos, try a site like istockphoto.com or www.sxc.hu for low cost and free photos. (Pay attention to commercial license restrictions, though.)

Once you’ve chosen and edited your images and/or built your graphical elements using a program like Photoshop, create a new folder for your theme on your computer. Give each image THE SAME name as what they are named in BV Commerce. For example, if you create a new “HeaderBg3.png” do not change its name. Even capitalization matters.

Then use the Browse button at the top of the screen to search for the file on your computer. Upload the file and you will see the change made on the screen. Click Go to Store to see the changes made on your store.

Using the Style Sheets

Some changes to your theme need to made using the style sheets. For a free tutorial about cascading style sheets, try http://www.w3schools.com/css/.

You can also download Firebug (http://getfirebug.com/) to make it easier to find the tags you’re looking for in the style sheets.

The most important changes you need to make in the style sheets involve changing colors, especially in the headers and footers. Here’s an example of how to change the background color of the footer.

Under Themes, click on Style Sheet (CSS) on the side of the page.

Using the arrow, scroll down the page until you see:

/* Footer */ #footer {clear:both;text-align:center;color:#fff;font-weight:bold;} #footer a {color:#fff;text-decoration:none;} #footer a:hover {color:#ff9400;text-decoration:underline;} .topfooter {background-color:#FFF;width:940px;padding:10px 10px;margin:0 auto; border-top:solid 0px #494949;} .bottomfooter, .bvtag {display:block;background-color:#A4272C;width:940px;padding:5px 10px;margin:0 auto;} #footer .bvtag a {}

To change the background color of the footer, simply change it’s color number. If you change #A4272C to #FFF, you will change the color to white.

Click Save Changes and then Go to Store to see the changes reflected on your site.

For more information about HTML color numbers go to http://msdn.microsoft.com/en-us/library/ms531197(VS.85).aspx.

Questions:

Q: I made changes to my store, but when I click Go to Store nothing happens!

A: Make sure you clicked Select This Theme on the main theme page. You may have a different them selected. If that doesn’t work, make sure you didn’t change your image names. Even changing HeaderBg.png to lower case headerBg.png might cause your image not to work.

Q: My image background color is just slightly different than my hex code color appearing on the web page. How can I fix this?

A: This is an issue with your image editor. If you’re using Photoshop, go into “Color Settings” and turn color management off. You may need to resave your images in Photoshop and upload them to the theme again.