Creating a look for your website is a very creative decision and one that should reflect the positioning of your product and be attractive to your target audience.
There are dozens of Volusion store themes available for you to browse and choose from. Utilize Site Designer, Volusion's simple-to-master store building feature, to create, maintain, and adjust your online storefront with ease. In most cases, you should be able to find the right look and feel for your business using Site Designer without any advanced customization.
If you do want to modify your theme 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 theme file.
You should always archive your theme 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 theme 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 theme 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 theme file. Use the information below to find out how these tags are used in Volusion themes, and to get more familiar with more basic HTML.
Division: <div>
A <div> tag defines a division or a section in an HTML document. Between the quotes of an id or class attribute, there will be the name of the section of code. For example, "homepage" or "display_menu_1" are common IDs used to identify parts of Volusion stock themes.
Example:
<div id="homepage">
</div>
Comments: <!-- -->
These "comment" tags are used to enclose code or comments which will be ignored by the browser when the page is rendered. They can be used to explain your code or to remove information from your page that you do not want to delete entirely.
For example, if you would like to hide the "My Rewards" link in your footer but may use it later, you can simply add comment tags around the line.
Example:
<!-- This is a single-line comment -->
Image: ![]()
<img>
This tag is used to embed an image on a page. The src attribute will have a file path which points to the permanent location where the image is stored on the web. Often, the 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.
Example:
<img src="/v/vspfiles/templates/123/images/logo.png" alt="Store Logo">
Anchor (Link):<a>
The <a> tag is used to make text into a hyperlink. Much of the code for your header and footer uses this tag to point to corresponding pages.
Note that in your theme files, the variable Config_FullStoreURL is used to indicate http://www.yourvolusionstore.com. By using this variable, you can change your domain seamlessly without hunting for every instance of the old URL.
Example:
<a href="Config_FullStoreURL/Aboutus.asp">About Us</a>
Unordered List: <ul>
The <ul> tag defines an unordered, or bulleted list. Often, you will see this in the code for your theme's footer to organize groups of links.
List Item: <li>
The <li> tag defines an item in a list. Used along with the <ul> tag, you will see this in your theme's footer. For example, the following code creates a footer list titled "MY ACCOUNT" with two links:
Example:
<ul>
<li>MY ACCOUNT</li>
<li><a href="Login.asp">Login/Register</a></li>
<li><a href="Shoppingcart.asp">Shopping Cart</a></li>
</ul>
Line Break: <br>
The <br> tag is used to insert a single line break. You may see this in the Volusion theme footer near the "Powered By Volusion" text. This tag is also very useful in Product Descriptions, Category Descriptions, and Article Body areas to create space between lines of text.
Example:
Copyright 2026<br>
Powered by Volusion
How HTML and CSS Interact
For Volusion themes, 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 theme file are labeled with <div> tags (see above). The <div> 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>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 theme so you can restore your theme if a coding change you make does not work as intended, or somehow breaks the functionality of your store.
SummaryKnowing how your HTML and CSS files interact within your theme can help you find the lines of code that you can edit to make changes to things like font size, font color and more. It's like being a handyman or artist for your own website.
Looking to upgrade your site's design? Site Designer, Volusion's simple-to-master store building feature, allows you to create, maintain, and adjust online storefronts with ease. Site Designer's block-based architecture allows you to customize your store by selecting from our regularly updated gallery of blocks.Click here to learn more.