Skip to content
English - United States
Contact Us
  • There are no suggestions because the search field is empty.

Basic Theme Customization

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.

�

???????????????????????????????????

�

�

A

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
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:

�

???????????????????????????????????

�

This tag is used to embed an image on a page. The will have a file path which points to the permanent location where the image is stored on the web. Often, the 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.

�

???????????????????????????????????

�

The 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 About Us 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

      tag defines an unordered, or bulleted list. Often, you will see this in the code for your theme's footer.

      �

      ???????????????????????????????????

      �

      
�

      The

      • �
      • tag defines an item in a list. Along with the
          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:

          �

          
�
          • MY ACCOUNT
          � �
          �

          ???????????????????????????????????

          �

          
�

          The
          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

          tags (see above). The
          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

          tags. For example, you will likely find a