Volusion's Style Editor lets you customize Volusion themes to make them your own. You can modify colors and fonts, view mobile and tablet displays, and even add your own custom CSS to existing themes. The handy drawer format gives you the flexibility to preview, revert, or commit changes to your storefront in an instant!

Opening Style Editor

To access the Style Editor from your Admin Area, visit Design > Style Editor

You'll be taken to a split panel page that shows your storefront on the left and the Style Editor drawer on the right:

👀❓ If you don't see Style Editor in the design menu, you may be using an outdated theme. You can get access by reinstalling the current theme or switching from a legacy theme.

Using Style Editor

As you make selections under the Colors and Fonts headings, your storefront preview will automatically update in the left panel.

For each theme, our designers created three different color palettes and three different font pairings. If you're just dipping your toe in design waters, you can mix and match these options for a guaranteed professional look. 

Custom Styles

If you're more comfortable with experimenting or are aiming for a specific look and feel, you can expand the Custom Styles section to hand pick your colors and fonts! 

Click on each of the swatches to change the color of that theme element throughout your site. The visual color picker lets you click and drag your mouse to find a shade you like, but you can also enter a specific hex code if you know it.

You can select a new primary or secondary font family by clicking on the current font name. If you know the font you're looking for, start typing it in the search bar that appears. Otherwise, you can use the dropdown menu to browse through a large library of fonts. 

Advanced CSS Editor

If you're familiar with CSS, you can make even more customizations in the Advanced CSS Editor. Click this option to turn the entire Style Editor drawer into a simple code editor with a dark interface.

Style Editor Toolbar

The toolbar at the top of the Style Editor drawer offers several quick actions. Use the three-dot menu icon to return to your store's Dashboard, or use the icons on the right to:

  • undo a change you made
  • view your theme's Style Guide
  • restore default theme settings
  • see your storefront at different device widths
  • collapse the Style Editor drawer

Undo

You can click the Undo icon as many times as needed in order to revert the last several changes. The only time you won't see this icon is when you first open the Style Editor drawer, before you've made any changes to the theme's default settings.

Style Guide

The Style Guide page shows how the current theme's colors, typography, buttons, and page headings will appear on your website. To view it, click the Style Guide icon in the Style Editor toolbar, or enter the following in your browser's URL bar:

http://[YourStoreURL]/themestyleguide.asp

Be sure to replace [YourStoreURL] with the address you use to access your Volusion store.

Restore Theme Defaults

Restoring a theme to its original settings will permanently erase any customizations you've made. To do this, click the Restore icon in the Style Editor toolbar. You'll see a message asking you to confirm the action, then a second message asking if you want to publish the changes.

Device Width

Because Volusion's themes are responsive, your store's content will display differently depending on the end user's device. Click the Device Width icon to switch to a desktop, tablet, or mobile width view. The Style Editor drawer will expand in width accordingly.

Collapse Style Editor

As you make styling changes to your theme, you may want to view the full storefront without the Style Editor drawer on the right. Just click the "X' icon to temporarily collapse the drawer. You can open it again by clicking the arrow in the upper right corner.

Saving and Publishing Changes

To avoid losing any customizations you've made, be sure to save your work periodically. You'll see a blue Save button at the bottom of the Style Editor whenever there are unsaved changes. 

Each time you save, you'll also see a message asking if you want to publish those changes. If you're ready to make the current theme customizations live on your site, go ahead and select Yes, Publish My Changes. Otherwise, you can click the Publish button from your Admin Area whenever you're ready.

Summary

Your website's theme says a lot about your store's personality, and Style Editor helps you customize it even further! If you aren't sure where to start, check out our main article on Themes.

Did this answer your question?