Basic Template Customization

There are hundreds of Volusion store templates available for you to choose from, so in most cases, you'll be able to find the right look and feel for your business without any advanced customization.

If you do want to modify your template and have a solid understanding of HTML and CSS, you can make the design and functionality of your store completely unique to your needs - for example, you may need to add a navigation menu or update your footer links. This article will give you some basic knowledge about your template file.

You should always archive your template before making any coding changes, no matter how basic they seem.

Note

The aesthetic formatting and basic functionality of your store are both affected by changes that are made to your template HTML and CSS files. Making changes to code that you are not familiar with can cause significant damage to your website. Be sure to back up your template in case you need to revert back to it.

Common HTML code tags

You may recognize some of these common HTML tags from your store's template file. Use the information below to find out how these tags are used in Volusion templates, and to get more familiar with more basic HTML.

<div id=" "> </div> A <div> tag defines a division or a section in an HTML document. Between the " " there will be the name of the section of code. (Ex.: "homepage" or "display_menu_1" are common <div> tags used to identify parts of Volusion stock templates.

<!-- -->

These "comment" tags are used to enclose code or comments which will be ignored by the browser when the page is rendered. It can be used to explain your code, or to remove information from your page that you do not want to delete entirely.

(Ex.: If you would like to remove the "My Rewards" link in your footer, but may be interested in using the "My Rewards" system later, you can simply add comment tags around the footer line to hide the link on your storefront.

<!--<li><a href="Config_FullStoreURLmyrewards.asp">My Rewards</a></li>-->
<img src=" ">

This <img> tag is used to embed an image on a page. The <img src> will have a file path which points to the permanent location where the image is stored on the web.

Often, the <img src> will be a file path that points to your Volusion store, since uploading images using any of Volusion's image tools (category image uploader, product image uploader, or the HTML Editor image uploader) will store the image in your store's FTP files.

<a href=" "> </a>

The <a href> tag is used to make text into a hyperlink. You may notice that much of the code for your header and footer uses this tag to point the links to the correct corresponding pages.

(Ex.: The code <a href="Config_FullStoreURLaboutus.asp">About Us</a> will create a link of the "About Us" text that will lead to your store's Aboutus.asp page.)

Note that in your template file(s), the text Config_FullStoreURL is used to indicate "http://www.yourvolusionstore.com". By using this variable instead of the actual domain, you are able to change your domain seamlessly, and without having to hunt for each instance of the old URL in your template.

<ul> </ul> The <ul> tag defines an unordered, or bulleted list. Often, you will see this in the code for your template's footer.
<li> </li>

The <li> tag defines an item in a list. Along with the <ul> tag, you will see this code in the code for your template's footer.

(Ex.: In the following code you will see a footer list titled "My Account" which has 2 listed links, to the Login.asp page and the Shoppingcart.asp page.

<ul>
<li class="title">MY ACCOUNT</li>
<li><a href="Config_FullStoreURLlogin.asp">Login/Register </a></li>

<li><a href="Config_FullStoreURLshoppingcart.asp"> Shopping Cart</a></li>
</ul>

<br> The <br> tag is used to insert a single line break into HTML-formatted documents. You may see this in the Volusion template footer near the "Powered By Volusion" text. This tag can be most useful in other HTML fields, such as in Product Descriptions, Category Descriptions, and Article Body areas.

How HTML and CSS Interact

For Volusion templates, the HTML file is not the only code that is used to generate the look and feel of your website. The HTML files and CSS files work together to format the content, style, and aesthetic of your store. The HTML file will determine the content and general layout of a web page, while the CSS files will apply formatting to a web page.

HTML tags are used to describe web pages, and often come in pairs (a start/opening tag, and an end/closing tag). Most notably, you will see that the sections of your template file are labeled with <div> tags (see above). The <div id> tags of your template.html file assign names to the different sections of your store's web page.

You can then search through your CSS files to find the corresponding code used to style the different sections of your template.html file that are marked with <div id> tags. For example, you will likely find a <div id="footer"> in your HTML file which matches with #footer coding in your CSS files.

Knowing how your HTML and CSS files interact can help you find the lines of code that you can edit to make changes to things like font size, font color, etc. Before you make any changes, be sure to archive your template so you can restore your template if a coding change you make does not work as intended, or somehow breaks the functionality of your store.

Watch the Design video series