Disclaimer: We recently redesigned our Admin Area. Your store may look different than the one shown in this video, but most click paths were not affected.

<< PREVIOUS

Transcript

If you’re an advanced user of HTML and CSS, you can customize your template to better fit your business. Always remember to back up your template before making any changes. That way, if you damage your template in any way, you can restore it to a previous state. Please keep in mind that Volusion cannot help you troubleshoot or repair damage caused by custom coding.

To duplicate a template, go to Design > Template in your Admin Area. Under the Saved Templates tab, click Duplicate next to a corresponding template. Enter a name for the file, then click Duplicate. It now appears in your list.

Keep in mind that when you duplicate a template, you’re duplicating its HTML file and CSS file. So before you make any edits, you need to decide if you want to work on the live version of the template or the backup version. Then you can make your edits to the HTML or CSS in whichever version you decide to work on.

Each Volusion template is a little different, but they all share certain features. Let’s take a look at the correspondence between a template’s code segments and storefront sections. We’ll start at Design > File Editor  and examine the Phones template, number 182.

The top section of the page, called the header, is clearly marked by comment text. In this case, the search box has its own section, although in some templates the search box is part of the header.

Next is the shopping cart display section, which contains the Home, About Us, My Account, and Help links.

Below that, you’ll see the left navigation, which contains the navigation menus and promotions.

Beneath that, you'll find the footer section, which contains the About Us, My Account, Products, and Helpful Info links.

Finally, you'll find the Newsletter Signup feature, which is controlled by the mailing list section of the code.

If you're familiar with HTML and CSS, you can make changes to many elements of your storefront including colors, fonts, sizes, spacing, and styling. You can also add, delete, and move navigation menus and other page elements.

For a list of tags you can reference in custom code, visit support.volusion.com and search for "Navigation Menu CSS".

To modify the styling of your template, choose "vspfiles" from the dropdown menu, then "templates", then select your copy, then "css", and finally, choose the page element you’d like to modify.

When you’re finished making changes, click Save. For instructions on previewing changes on your storefront, as well as activating the edited file, see our video called How to Choose a Template.

Did this answer your question?