Just as an artist chooses colors for a painting, 🎨👩🎨 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.
Lucky for you, there are dozens of Volusion store themes available for you to browse. You can even use the Style Editor to choose from several premade color and font combinations for each theme! In most cases, you should be able to find the right look and feel for your business 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.
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.
<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. For example, "homepage" or "display_menu_1" are common <div> tags used to identify parts of Volusion stock themes.
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. For example, 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. For example, 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 theme 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 theme.
The <ul> tag defines an unordered, or bulleted list. Often, you will see this in the code for your theme's footer.
The <li> tag defines an item in a list. Along with the <ul> tag, you will see this code in the code for your theme's footer. For example, 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:
<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>
The <br> tag is used to insert a single line break into HTML-formatted documents. You may see this in the Volusion theme 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 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 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 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.
Knowing 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!