Templates

The look and feel of your store is important to your site's functionality. Having an attractive site also adds credibility to your store so shoppers feel confident about buying from you.

Whether you want to give your store a floor-to-ceiling makeover or just add some holiday cheer, changing the design of your site is quick and easy.

Contents

Getting Started

To get started, go to Design > Template in your Admin Areaarticle/templates-camera show image-getting started-design template

Choosing and Installing a Template

Choosing the appearance and layout of your store is an important decision, and we make it easier by letting you test template designs to see which one is best for your site.

Inside the Templates page, you’ll see two tabs: Active Template and Saved Templates.  article/templates-camera show image-choosing and installing a template-active saved templates

By default, your store comes with a template already loaded under the Active Template tab and several more available under the Saved Templates tab.

Beneath these tabs in the Template Gallery are many other free and premium templates you can choose from.

Active Template

The template currently in use in your store is called the Active Template. It contains the HTML and CSS used to format the way your site looks. You can click View Storefront to open your store in a new window to see exactly what it looks like.  article/templates-camera show image-choosing and installing a template-click view storefront

The Advanced Editing pane on the Active Template tab gives you access to the template's HTML and CSS. Clicking either link will open that file in the File Editorarticle/templates-camera show image-choosing and installing a template-advanced editing

Saved Templates

This tab shows all the templates that have been loaded into your store, including the one that is currently Active. You can Preview, Activate, or Duplicate any template shown here.  article/templates-camera show image-choosing and installing a template-saved templates

Previewing a Template

To see how a saved template will look when it’s applied to your store, select one under the Saved Templates tab and click Preview

Activating a Template

Once you find the template you want to use, click Activate. After a few seconds, your new template will be displayed under the Active Template tab and applied to your store.

The Template Gallery

The Template Gallery gives you access to all available Volusion templates. You can search by name or filter by color, cost, style, and industry; preview ones that interest you; and purchase the one you want or download a free template and install it immediately.  article/templates-camera show image-choosing and installing a template-template gallery

Downloading More Templates

Your Volusion store comes pre-loaded with a sample of templates, and there are plenty more just a few clicks away.

On the Template page, scroll down to the Template Gallery to view all the free and premium templates available from Volusion.

Click Clear Filters to remove all filters and display all templates. Click Return to Search Results if a single template is being display.

Browse the entire gallery or filter the search results by Color, Price, Style, and Industry. For example, you might want to see all the black, white, and gray themed templates with a Modern or Metallic style, priced $495.  article/templates-camera show image-downloading more templates-filter templates

To view a template in more detail, move the cursor over the thumbnail image to view it in a pop-up window.  article/templates-camera show image-downloading more templates-view more detail

For a closer look and description of a particular template, click the thumbnail image, title, or View link.  article/templates-camera show image-downloading more templates-click thumbnail

Free Templates

To add a free template to your Saved Templates, find the template you want and click Get it. You’ll see a confirmation message once the template has been transferred to your store.  article/templates-camera show image-downloading more templates-template installed message

At this point you can go to the Saved Templates tab and make the template Active. Download as many free templates as you like and see which one fits your store best.

Premium Templates

If you want to purchase a premium template, click Buy or Get It to begin the order process.  article/templates-camera show image-downloading more templates-purchase premium template

  1. Under Logo Info, specify whether you want your company name or logo entered into the template as text, or if you want to send us a transparent graphic file.
  2. Under Design Domain Name, enter the domain or subdomain name where the store you want it applied to is held.
  3. Select any other design services you want to add to your order.
  4. Click Add to Cart. Since the order takes place outside of your store, you’ll need to enter your email address and password.

Your premium template should be available in your Saved Templates after a maximum of 5-7 business days from when your order is processed.

Backing up a Template

You should always back up a template before making any changes to it. This is especially important if you have previously made changes so you don’t have to go back, download the original template, and modify it all over again. To back up a saved template:

  1. Go to Design > Template and click on the Saved Templates tab. article/templates-camera show image-backing up a template-design template
  2. Find the template you want to back up and click Duplicatearticle/templates-camera show image-backing up a template-click duplicate
  3. Enter a name for the duplicate template in the blank field and click Duplicatearticle/templates-camera show image-backing up a template-enter duplicate name

Reinstalling a Template

If you’ve edited the default code of a template and want a fresh start, you can make a backup of the template currently in use on your storefront and then reinstall it. Click Reinstall next to your active template and then click Yes, Reinstall.

Tips and Special Settings

Previewing Templates

Since the Template Preview function temporarily loads style elements from the previewed template into your browser, you might notice anomalies such as mismatched images in portions of the navigation menus. In some cases, a template may have image elements that cannot be viewed unless the template is fully published to the site.

In these instances, Template Preview does provide a useful, if somewhat incomplete view of what a template will look like when applied to your store. You should publish the template to your store to view the complete design.

Switching Templates

The Templates page lets you quickly and easily apply different templates to your storefront. However, some design elements cannot be transferred from one template to another. Elements that are not shared between individual templates will need to be copied over or reapplied after the new template is enabled, but they won’t be deleted from the original template. These include:

  • Storefront and invoice logos configured on the Logos page
  • Updates to CSS files specific to the template
  • Custom HTML that has been applied to the template.html file
  • Custom storefront buttons (e.g. the Add to Cart button)

Additionally, as the navigation menu layout may differ from template to template, modifications within one template's navigation menu may need to be implemented in a different manner when migrating to another template.

Refreshing Your Template

When you upload or edit a template via FTP, you may need to Refresh your template before the changes will display on your storefront. To refresh your template, go to Design > Template > Active Templates and click Refresh beside the active template.

Note that you may also need to use the Refresh feature to publish and view template changes on your storefront if Enable Immediate Publish is disabled at Settings > Config Variables.

Uploading Your Own Template

The flexibility of your template allows you to customize it as you see fit. When modifying a Volusion template from a local copy maintained on your PC, you’ll need to upload any edited files or the customized template in its entirety to the following location within your store via FTP: /v/vspfiles/templates/xyz where xyz is the name of the template.

Each store template includes a main template.html file that should be uploaded to the root directory (the /v directory) of your store.

To learn more, see Using your Volusion FTP Account.

Note on Customized Designs

If you have a specific design in mind or want to go beyond the designs and styles available in the free and premium templates, we also offer custom site design services. For more information, please contact the services sales team at 800.646.3517.

Watch the Design video series