The flexibility of your Volusion store theme gives you the freedom to edit and customize CSS and HTML code to fit your needs. If you do make any changes to your theme, remember to always make a backup copy of the original theme file before attempting any programming change (HTML, JavaScript, CSS, etc.) in case you need to revert back to a previous version. As with any theme changes, you are ultimately responsible for your changes as Volusion does not provide support or troubleshooting of custom code.

If you need to add page-specific CSS code, you can add some JavaScript into your template_###.htm file (via the Design > File Editor page), typically on a new line immediately following the <body> tag.

For example, if you wanted some HTML or CSS code to be only inserted while on your product details page, this is sample code that you could use as the starting point for your addition. The first line of JavaScript happens to check for both the .asp version of the details page URL, as well as the two variations for SEO-friendly URLs for product details, so all three URL variations are checked. Your code might have other ways of verifying the page that is being displayed, but that would be up to you.

This example shows how you can add some HTML (this one a simple "Need Help? Contact Us!" message) to appear on the bottom of every product page. It could be placed after the closing </div> tag matching the div tag using the ID of "content_area":

<script type="text/javascript"> 
//<![CDATA[
if (location.pathname == "/ProductDetails.asp" ||
location.pathname.indexOf("-p/") != -1 ||
location.pathname.indexOf("_p/") != -1)
document.writeln("\n<table align='center' style='border: solid 2px
black;'><tr><td align='center' style='background-color:#ccc;
font-weight: normal; padding:10px;'><span style='font-size: larger;
font-weight: bold;'>Need help on this or any other product?<
/span><br />Call 1-800-YourNumberHere |
<a href='mailto:customerservice@yourcompany.com'>E-mail Us</a>
| <a href='/help.asp'>Help On Our Site</a>
| <a href='/returns.asp'>Return Policy</a></td></tr></table>\n\n");
//]]> </script>

This will also work for category or search results (this one adds some CSS that is only to be used on search results / category pages):

<script type="text/javascript"> 
//<![CDATA[
if (location.pathname == "/SearchResults.asp"
|| location.pathname.indexOf("-s/") != -1
|| location.pathname.indexOf("_s/") != -1)
document.writeln("\n<style type='text/css'>td {
font: bold 12pt Arial; color: yellow;}</style>\n\n");  //]]> </script>

Note that your CSS in the example above may vary, so you will need to modify the above code for your desired changes.

Homepage-Specific Code

If specific HTML is to be executed only on the site's home page, then you can encapsulate the HTML code with a DIV tag using an ID of "if_homepage". The sames goes for code that should not be used on the homepage but everywhere else on the site; use the ID of "if_not_homepage". Note that you must ensure that the div ID of "content_area" is not inside either of the "if_homepage" or 'if_not_homepage" tags, or you will experience 500 errors on multiple pages of your site (one-page-checkout.asp, accountsettings.asp, etc.).

There may be times where that div tag won't work, so an alternative to that would be the following HTML / JavaScript:

<script type="text/javascript"> 
//<![CDATA[
var onHomePage = (location.pathname == "/") ||
 (location.pathname.indexOf("/default.asp") != -1);
if (onHomePage) <<desired code only for home page>>  //]]> </script>
Did this answer your question?