How can we help you?

File Editor

The File Editor is intended for advanced users with a solid understanding of HTML and CSS code. This powerful tool allows you to customize elements of your store template, but you also run the risk of damaging the template and wasting valuable time and resources trying to fix it.

Remember to always back up HTML or CSS code (by copying it to a standard text file) prior to making changes in case you need to revert back to a previous version.

Contents

Getting Started

To access the File Editor, go to Design > File Editor in your Admin Area. Show

How to use the File Editor

The File Editor is essentially a text editor embedded within the Admin Area that allows you to view and modify the HTML or CSS code within the file.  Show

Note that the File Editor can only be used to modify existing files – not create new ones.

To edit a file, choose one from the file browser or select one from the Shortcuts table.

When you’re done editing a file, click Save.

Shortcuts

The File Editor Shortcuts menu contains links for quick access to certain files within the Volusion system. These files contain elements such as style settings for your store and HTML code that provides structure for the store's template.

The following files can be accessed from the Shortcuts menu:

Shortcuts

template_x.html

This file contains the HTML that defines the template structure for the current template applied to your store. Note that x corresponds to the number or name of the template currently applied to your store.

template x css

This file contains the CSS settings that determine how visual elements within the Volusion template behave. This file is for advanced users wishing to fine-tune various visual elements within their site. Note that x here will correspond to the number of the template applied to the site.

/v/vspfiles/email_templates

This link will take you to the File Editor's file menu containing lists of all email template files. Each email that Volusion can generate is based off an HTML file that provides the email's layout. These files can be edited to allow customization of the emails that Volusion generates.

default.htm

The "default.htm" page is essentially a placeholder for the "default.asp" page – the initial home page that visitors see when arriving at your store. By default, this page contains no code or data. You can enter HTML into this page to create a substitute for the initial default.asp page. These pages can be used as landing pages for your store.

maintenance_message.htm

If your store is temporarily closed, a standard maintenance message generated by this HTML file will appear to anyone who visits your storefront. Edit this file to create a custom maintenance message.

Navigating Through the File Menu

The file menu dropdown within the File Editor lets you browse lists of files and directories to find the one(s) you want to edit.

When you initially go to Design > File Editor, you’ll see the file menu dropdown next to text that reads, wwwroot/v/. You can select a file or directory to either display file contents or enter the directory or sub-directory.  Show

When you choose a directory from the file menu dropdown, it will be added to the active directory path, to the left of the dropdown menu. The dropdown will then display the contents of the current, active directory. All directories navigated through to that point will be displayed as links to the left of the dropdown menu.

Clicking on a directory name will reload the file menu dropdown with the elements of that directory.  Show

When you select a file from the dropdown menu, the contents of that file will be displayed within the file editing window. Again, you can view or modify the content of the file here.

Tips and Special Settings

Configuring a Custom Maintenance Message

If you need to temporarily close your store for site maintenance or updates, a standard maintenance message will automatically be generated when someone visits your storefront. You can temporarily close your store by going to Settings > Maintenance in the Admin Area and clicking Close My Store.

If you want to customize the maintenance message – text or the entire design – use the following guide:

  1. Go to Design > File Editor in your Admin Area.  Show
  2. Click maintenance_message.htm in the Shortcuts table to load the HTML contents of the maintenance message.  Show
  3. Edit the HTML as needed to style the maintenance message.
  4. When finished, click Save.  Show

Your new maintenance message should now appear when your store is closed.

Creating a Custom Landing Page

When someone visits your store's URL, they’re directed to your site’s homepage. They’ll see all the elements contained within your homepage like navigation menus, store name and logo, featured products, etc.

You may want to create a customized landing page visitors will see when they arrive at your store's URL before reaching the storefront.

Example

You have an online store (www.myvolusionstore.com) as well as a blog (blog.myvolusionstore.com). You want to give visitors to your store the option to either enter your store or your blog from the initial landing page.

This can be done by creating a custom landing page for your store as follows:

  1. Go to Design > File Editor in your Admin Area.  Show
  2. Click default.htm in the Shortcuts menu.  Show
  3. Enter valid HTML into the default.htm file using the File Editor.  Show

The HTML entered into the default.htm page will display on your storefront instead of the basic storefront info (generated by the default.asp page within the Volusion system).

In this example, you may wish to edit the default.htm file to contain a link to your blog, a link to your store, and possibly embed some flash animation to greet visitors when they reach this landing page. The HTML to be entered into the default.htm file might look like this:

<html>
  <head> 
   <title>myvolusionstore.com</title> 
  </head> 
 <body> 
  <center> 
   <object width="640" height="480"> <param name="movie" value="flashanimation.swf"> 
   <embed src="/v/vspfiles/flashanimation.swf" width="640" height="480"> 
   </embed> 
   </object> 
   <a href="http://blog.myvolusionstore.com">Visit our Blog</a> 
   <a href="/default.asp">Visit our Online Store</a> 
  </center> 
 </body> 
</html>

Once this HTML is added to the default.htm file, a flash animation file called "flashanimation.swf" will be displayed on the storefront along with 2 additional links. The first link will direct visitors to the blog, and the second will them to the store homepage.

Note that implementing a custom landing page in this manner will override any maintenance message generated by Volusion should you temporarily close your store.

Creating Custom Error Pages

You may also want to create your own 404 and 500 error pages. If you’re not familiar with the terminology, 404 and 500 errors represent specific error types visitors to a website might encounter.

A 404 error is displayed to visitors attempting to access a website or file within a website that isn't available or cannot be found. This may occur when a webpage name has been updated or moved or when a web server is completely offline.

The 500 error is an error that occurs within the web server itself. In this case, something internal has gone wrong with the system the web browser is attempting to contact, but the server cannot be more specific as to what the issue is.

Generally, 404 and 500 errors are displayed to visitors in plain text with no background.

You can style, personalize, or change these error messages altogether using the URLRewrite.asp page within the File Editor.

  1. Go to Design > File Editor in your Admin Area.  Show
  2. From the file browser dropdown menu, select "/vspfiles".
  3. Select URLRewrite.asp from the dropdown menu.  Show

This page contains a series of web scripts that generate 404 and 500 error messages within your store. Edit the contents of this page and click Save when you’re finished.

Please note that this page only controls 404 and 500 errors for pages within the “/v” directory of your store. Pages or links external to the “/v” directory will not be affected by changes made to the URLRewrite.asp page.  Show

Note

This function is intended for use by designers or merchants with an advanced knowledge of HTML. Also note that this function will only affect 404 or 500 errors generated within the root of your site; it cannot be extended for any error generated within pages outside of your site's root URL.

Summary

The File Editor allows you to edit crucial parts of your store's underlying HTML and CSS code directly from the Admin Area without the use of an FTP program.

As powerful as this tool is, it is recommended for use by advanced users only. If you don’t understand HTML and CSS, you can cause serious damage to your template, and ultimately, to your storefront and business.

Again, remember to back up any HTML or CSS code being altered (copy and paste into a standard text file) prior to making changes in case you need to revert back to the original version.