Volusion now offers free responsive themes (templates) for your website. These themes are compatible with most versions of all major web browsers* and can be installed right from your Admin Area.
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.
- Installing a Responsive Template
- Updated Admin Area Settings
- Mobile Commerce
- Navigation Menus
- Category Settings
- Product Display Settings
- Homepage Slideshow or Main Image
- Customizations and Third-Party Code
Responsive themes are available for all stores. You can install responsive themes just like you'd install any other Volusion template:
- Go to Design > Template in your Admin Area.
- In the Template Gallery section, select the Responsive filter. You'll be able to tell which templates are responsive by the preview image, which depicts multiple devices.
- Click Get It below the template you want to install. Once you see the Template Installed notification, click OK.
- Click the Saved Templates tab near the top of the page and locate the name of the responsive template you installed.
- Click Activate.
Once you've installed a responsive template 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 responsive template on your site.
Updated Admin Area Settings
After installing a responsive template, you may notice a few changes in your Admin Area. The software recognizes when your store is using a responsive design and automatically updates certain settings for compatibility.
Since responsive templates are optimized for all devices and screen sizes, the Mobile Commerce feature is automatically disabled when you install a responsive template. Under your Design menu, you will no longer see a Mobile option.
If you choose to switch back to a non-responsive template 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 template is active on your store.
You won't be able to select a Menu Type under Design > Navigation Menus, as the Menu Type menu is hidden when a responsive template is active on your store. Instead, all navigation menus in your template 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 templates.
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.
If your store is using a responsive template, you'll see a slight difference in certain field names on your category editing pages.
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 templates; 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.
Responsive templates 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 template, 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:
- Go to Inventory > Categories and click View List.
- At the top of the page, click the three-dot actions menu and select Customize Columns.
- Make sure the option for Category Display Mode (Responsive) is enabled, then click Apply Changes.
- In order to modify values in the Category Display Mode (Responsive) column, hover over the column heading and click Edit.
- You can now change any category’s display mode to Responsive Grid by entering “7” in the Category Display Mode (Responsive) field.
- Be sure to Save your changes.
Any time you switch back to a non-responsive template, 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 templates.
To learn more about product display modes, see Category Settings.
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:
- Category pages
- Search results
- All-products page
Product Display Settings
When you activate a responsive template, 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 templates.
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 template, these category settings will automatically revert to your original selections.
If you've already been using a responsive template, 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 templates, 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 template'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 How to Use the 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 template 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 templates.
Responsive templates 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.
To learn more about installing a standard template on your Volusion store, see Templates.