Your Volusion store can be as unique as you want, especially if you have the HTML/CSS skills to support your vision. The File Editor 📂 — essentially a text editor embedded within the Admin Area — allows you to access the backend of your store and manipulate code to create a look that’s different from the original theme. 🎨  

If you know a bit about web design and development, you may have already discovered how to do this. If you’re not skilled in this area, it’s no problem (there’s still lots you can do with a great Volusion theme), but we recommend leaving any backend changes to an expert.

If you fall into the latter category and have your heart set on a totally custom look and feel for your store, you can opt to work with design and developer partners at Volusion or hire your own. We’re all about freedom and flexibility. 😉

 

⚠️  Heads Up: Back It Up!

Remember to always backup 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.


How to Use the File Editor

  1. Go to Design > File Editor in your Admin Area
  2. Choose a file from the file browser or select one from the Shortcuts table
  3. When you’re done editing a file, click Save

 

Shortcuts

If you’re in a hurry 🏃💨  (What business owner isn’t these days?), the File Editor Shortcuts menu contains links for quick access to certain files that contain elements such as style settings for your store and HTML code that provides structure for the store's theme.

The following files can be accessed from the Shortcuts menu:

template_x.html: Contains the HTML that defines the theme structure for the current theme applied to your store. Note that x corresponds to the number or name of the theme currently applied to your store.

template x css: Contains the CSS settings that determine how visual elements within the Volusion theme 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 theme applied to the site.)

/v/vspfiles/email_templates: This link will take you to a list of all email template files. Each email that Volusion can generate is based off an HTML file that provides the email's layout. 

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 you need to temporarily close your store, don’t worry, you can still greet visitors with a friendly maintenance message generated by this HTML file, which you can customize. 😀 

 

Navigating The File Menu

The file menu drop-down 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 drop-down next to text that reads, "wwwroot/v/." You can select a file or directory to either display file contents or enter the directory or subdirectory.

When you choose a directory from the file menu drop-down, it will be added to the active directory path, to the left of the drop-down menu. The drop-down 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 drop-down menu.

Clicking on a directory name will reload the file menu drop-down with the elements of that directory.

When you select a file from the drop-down 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

As mentioned above in the Shortcuts, we have a friendly message that you can display to your site visitors if you need to temporarily close your store for site maintenance 🛠️  or updates: maintenance_message.htm. 

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 – here’s how:

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

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

 

Creating a Custom Landing Page

There may be times when you want to let your site visitors know about something special, like a sale 🎉, upcoming maintenance closure 🛠️, or other news that requires getting their attention. 📣  In these cases, you might consider creating a customized landing page that visitors will see when they arrive at your store's URL, before reaching the storefront.

Here’s how:

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

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).

You can also make other customizations, such as deciding where to direct your customers after they visit this landing page. You might opt to take them to your homepage, or to your blog. You can customize this by editing the default.htm file to contain a link to your store or your blog.  


Creating Custom Error Pages

Sometimes, errors happen. 😟  Don’t fret, we have a page for that! 😁  They’re called 404 and 500 error pages. If you’re not familiar with the terminology, we’ll break it down for you in nerd terms 🤓. 

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.

A 500 error is an error that occurs within the web server itself. In this case, something has gone wrong with the system the web browser is attempting to contact, but the server can’t specify what the issue is.

Generally, 404 and 500 errors are displayed to visitors in plain text with no background. But at Volusion, you can beautify them ✨  so customers might not feel as bad about getting them. Style, personalize or change error messages altogether using the URLRewrite.asp page within the File Editor.

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

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.

 ⚠️  Good To Know:

  • 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.
  • 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.
  • This is some complex stuff, so please only modify it if you’ve got the skills.

 

Summary

The File Editor 📁  gives you the freedom to customize certain pages of your website by accesses your store's underlying HTML and CSS code directly from the Admin Area. 🙌🏼 

But, if you don’t understand HTML and CSS, step away from the files! 🗄️  Hiring a highly skilled web designer and developer to do the job instead can save your theme from serious damage … and ultimately, to your storefront and business.

 

 

 

Did this answer your question?