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.

All current Volusion themes are responsive and compatible with most versions of all major web browsers*. You can install them right from your Admin Area. If you're using a legacy (non-responsive) theme, you can find user details here.

Responsive themes utilize a single code base to create a seamless, uniform experience for all shoppers by rendering your website appropriately on any device. This leads to higher conversion and more sales from your mobile traffic. It also makes maintenance and optimization easier, ensures compatibility with future devices, and helps your site rank higher in search engines.

*Note that responsive themes are not supported in IE8 or earlier versions.

Contents

Installing a Theme

Themes are available for all stores. To install one:

  1. Go to Design > Theme in your Admin Area.
  2. Click Get It below the theme you want to install. Once you see the Theme Installed notification, click OK.
  3. Click the Saved Themes tab near the top of the page and locate the name of the theme you installed.
  4. Click Activate.

Once you've installed a theme on your store, you'll notice that the design adjusts to the size of your browser window anytime you resize it. The same thing happens for your shoppers, whether they're viewing your store on a desktop computer, tablet, or smartphone.

To ensure that every page on your store shows the most recent content, it's a good idea to rebuild your search index after installing a theme on your site.

Updated Admin Area Settings

If you install a responsive theme after using a legacy (non-responsive) theme, you may notice a few changes in your Admin Area. The software recognizes when your store is using a design and automatically updates certain settings for compatibility.

Mobile Commerce

Since responsive themes are optimized for all devices and screen sizes, the Mobile Commerce feature is automatically disabled when you install a responsive theme. Under your Design menu, you will no longer see a Mobile option.

If you choose to switch back to a non-responsive theme in the future, the Design > Mobile link will reappear and Mobile Commerce will be enabled again.

Note that your store's Mobile page URLs may still be indexed in search results. These links will automatically redirect shoppers to the relevant storefront URLs when a responsive theme is active on your store.

Navigation Menus

You won't be able to select a Menu Type under Design > Navigation Menus, as the Menu Type menu is hidden when a responsive theme is active on your store. Instead, all navigation menus in your theme will default to a special configuration using the List Items Popout value as the menu type. List Items Popout is touch-responsive for an optimal browsing experience on mobile devices, and is the only navigation menu type supported for responsive themes.

If you previously configured one or more levels of subcategories to display, the software will preserve your settings and use the same number of subcategory levels. When using List Items Popout, the field for this value is called Dropdown Levels.

Switching back to a legacy theme will cause these nav menu settings to revert to your original selections.

Category Settings

If your store is using a responsive theme, you'll see a slight difference in certain field names on your category editing pages.

Subcategory Display

You can use Subcategory Display Mode 1 to Show or Hide subcategory listings at the top of category pages. Note that displaying subcategories on the Left Side is not an available option for responsive themes; if you're currently using the Left Side subcategory display for any categories, those subcategory listings will now appear at the top of your responsive category pages.

You'll also see a new field called Display Columns, Responsive, which is set to three columns by default.

Note that if any of your categories use Category Graphics or Responsive Thumbnails for Subcategory Display Mode 2, the subcategory images will resize responsively. You should only use Thumbnails for Subcategory Display Mode 2 if all related subcategories have text in the Category Description Short field.

Any time you switch back to a non-responsive theme, these category settings will automatically revert to your original selections.

Product Display

Responsive themes automatically handle the product display mode for all categories by defaulting to Responsive Grid. You can change the default number of product columns (3) by modifying the value in the Display Columns, Responsive field.

If you've already been using a responsive theme, you may need to manually enable the Responsive Grid display mode for your category pages.

To update the display mode for several categories at the same time:

  1. Go to Inventory > Categories and click View List.
  2. At the top of the page, click the three-dot actions menu and select Customize Columns.
  3. Make sure the option for Category Display Mode (Responsive) is enabled, then click Apply Changes.
  4. In order to modify values in the Category Display Mode (Responsive) column, hover over the column heading and click Edit.
  5. You can now change any category’s display mode to Responsive Grid by entering “7” in the Category Display Mode (Responsive) field.
  6. Be sure to Save your changes.

Any time you switch back to a non-responsive theme, these category settings will automatically revert to your original selections.

Note that Responsive Grid and Lightweight Grid are the only product display modes supported for responsive themes.

To learn more about product display modes, see the "Advanced Info" section of our article on category settings and go to the "Category Display" subsection.

ADD TO CART BUTTONS 

If shoppers are accessing your store on a mobile device, you can often increase conversions by providing an Add to Cart button below each product on category pages.

By default, categories using the Responsive Grid display mode do not display Add to Cart buttons. However, you can enable this feature by going to Settings > Config Variables, then searching with the term "responsive."

Look for the variable titled Enable Add to Cart Button on Responsive Grid Product Display Mode and check the box to enable it, then click Save.

When this config variable is enabled, Add to Cart buttons will appear on any pages that currently use the Responsive Grid display mode, including:

Note that this setting is only recommended for stores selling products without required options.

Product Display Settings

When you activate a responsive theme, the product display settings for your search results and home page sections will automatically change as well. To see these changes, go to Design > Product Display Settings.

In the Products List section, you'll only see two tabs (Search Results and Home Page: Featured), rather than the five that appear for non-responsive themes.

The Product Display Mode defaults to Responsive Grid for both sections. You'll also see a Display Columns, Responsive field in both tabs, set to three columns by default. Any time you switch back to a non-responsive theme, these category settings will automatically revert to your original selections.

If you've already been using a responsive themes, you may need to manually enable the Responsive Grid display mode for your search results and Featured Products. To do so, visit Design > Product Display Settings in your Admin Area and click into each tab to manually change the Product Display Mode selection to Responsive Grid.

Note that the three hidden home page sections (Super Deals, Top Sellers, and New Products) are not recommended for use with responsive themes, but can still be enabled from your Admin Area. To do so, go to Settings > Config Variables and perform a search with the term "activate" in the Name field.

Homepage Slideshow or Main Image

When you add a slideshow or main homepage image through the Admin Area, the software will automatically apply responsive properties to the images for the best fit on all devices.

Note that if you're using Article 2 to display your main image, dragging the corners of the image to resize it within the Easy Editor may add inline styling that overrides the theme's responsive properties, rendering the image as a static size rather than responsive. This is also true for any static images you've uploaded to article pages. We recommend using the slideshow feature to ensure your homepage images remain responsive, even if you only want to use one static image.

If you need to make an image responsive again using the Easy Editor, you can remove the inline styling that causes the image to display at a fixed width. To do so, click the HTML button in the Easy Editor toolbar and remove the inline style tags around your image code. See "Take it Easy: Using Volusion's Easy Editor" for more information.

Note that you can also swap your homepage images using your FTP. As long as the image you're uploading has the same file name as the existing image you're replacing, your responsive theme will automatically resize the image for the best fit.

Customizations and Third-Party Code

If you have a slideshow or other custom coding on your site, some elements may need to be optimized for responsive design. Merchants who are familiar with coding websites for responsiveness using Bootstrap 3 (Twitter Bootstrap) can modify these elements by directly editing the HTML code via the Easy Editor.

If you purchased any of these design elements from our Design Services team, call 1-888-750-3994 to learn more about having them optimized them for responsive themes.

Note that the Design Services team cannot assist with any third-party coding.

Summary

Responsive themes ensure that every shopper gets the best possible shopping experience, regardless of device — and you get the best chance to cash in!

Our team is hard at work developing new and innovative features and extensions to the Volusion platform, so stay tuned for future updates as they become available.

Did this answer your question?