The face of online retail is rapidly evolving, and mobile commerce is at the forefront. Within the next few years, mobile transactions are expected to account for a quarter of all online sales in the US, and the number of retailers offering a mobile experience will triple. Volusion merchants can tap into this growing market with responsive themes, which optimize store display on all devices.

Merchants using legacy non-responsive themes can create a separate mobile-friendly version of their stores using Volusion Mobile Commerce.

Volusion offers separate Mobile Storefront and Mobile Checkout features; we recommend turning both features on to offer your shoppers a full mobile experience. Mobile Checkout is only available for merchants who accept at least one of the major credit cards or PayPal Express.

If you don’t accept credit cards on your store yet, contact our Volusion Payments team at 1.800.646.3517 x101 or vms@volusion.com to get started.

Contents

Turning Mobile Storefront On

The steps to turn Mobile Storefront on vary based on when you bought your store and what your settings were at the time we first released the feature. In your Admin Area, go to Design > Mobile.

  • Under the Mobile Storefront heading, you'll see a switch that says On or Off. Be sure it's on. If it's off, click it to turn it on.
  • Beneath the switch, you'll see a Mobile Storefront 2nd Edition section with a button that reads Apply or Applied. Be sure it reads Applied. If it reads Apply, click it.
  • Note that you may also see a Mobile Storefront Original section with the same Apply / Applied button. Only one of the editions can be applied at once. Applying one turns the other off.

When you're finished, the Mobile Storefront section should look like this:

Shoppers who access your site from a mobile browser can now do the following:

  • browse categories, subcategories, and products
  • read product details, select options, add items to the cart
  • access specific products and categories using unique mobile URLs

Volusion Mobile Commerce is supported for 4.1x (Android) and iOS7 (iPhone) operating systems. Mobile Commerce doesn't support all store configurations. For more information, see the Notes section of this article.

Although the Apple iPad is a mobile device, it's optimized for standard web browsing and will show the desktop version of your storefront.

Note that if you're using a responsive theme, the Mobile Commerce feature is automatically disabled and the Mobile heading no longer appears under Design in your Admin Area. This is because responsive themes are already optimized for all mobile devices and screen sizes.

Turning Mobile Checkout On

Mobile Checkout is available for all Volusion stores. By default, this feature is on for US merchants who already use Mobile Storefront and accept at least one major credit card or PayPal Express. Other merchants can turn Mobile Checkout on with the following steps:

  1. In your Admin Area, go to Design > Mobile.
  2. Under Mobile Checkout, set the switch to On.

Once Mobile Checkout is on, you can do the following:

  • create custom names for checkout page fields
  • add customized contact information in the checkout page footer
  • detect and display the credit card brand automatically when shoppers enter their card numbers

Mobile Checkout currently supports payment with any of the four major credit cards or PayPal Express. If you offer other payment methods only, your customers will be redirected to the Desktop Checkout to complete their orders.

If you've enabled other payment methods in addition to credit cards or PayPal Express, the additional methods won't appear as options for shoppers using Mobile Checkout, but they'll still appear on the Desktop Checkout.

Customizing Mobile Commerce

Merchants can customize the mobile experience for their customers by adding a mobile-optimized logo, changing checkout page field names, and/or adding custom styling with CSS.

Uploading a Logo

By default, the name of your website displays at the top of the Mobile Storefront. You can enhance the look of this area by creating and uploading a mobile-optimized logo. To upload a custom logo, follow these steps:

  1. In your Admin Area, go to Design > Logos.
  2. Expand the More Logos section and locate the Mobile Logo heading.
  3. Drag an image file from your computer into the drop zone, or click Upload to browse for the image on your computer. Image files must be .PNG, .GIF, or .JPG format and use the Recommended Size listed under Mobile Logo.

You can preview how the logo will appear by viewing your site on a web-enabled mobile device, or by clicking the View icon below the current image. If you're not satisfied with your mobile logo, simply drag a new file into the drop zone or click the Upload icon below your existing logo to browse for a new image. If you'd rather eliminate the mobile logo entirely, click the Delete icon.

Design

Merchants with strong knowledge of CSS can modify the font type, font color, background color, graphics, and spacing on the Mobile Commerce interface.

If you’d like assistance with custom design, please view our design team's services here, or give them a call at 1.877.591.7005.

CUSTOMIZING MOBILE STOREFRONT

  1. In your Admin Area, go to Design > Mobile.
  2. Under the Mobile Storefront theme of your choice, click Customize.
  3. Select CSS.
  4. Use the text field to enter your own CSS (it will override the default CSS file).
  5. Click Save.

If you want to customize the Mobile Storefront Original theme and it doesn't appear, scroll to the Advanced section at the bottom and select the Show Legacy Storefront Theme check box.

CUSTOMIZING MOBILE CHECKOUT

  1. In your Admin Area, go to Design > Mobile.
  2. Under the Mobile Checkout 1st Edition theme, click Customize.
  3. Select CSS.
  4. Use the text field to enter your own CSS (it will override the default CSS file).
  5. Click Save.

Customizing Language on Mobile Checkout

The default Mobile Checkout field names use standard naming conventions. In most cases, you won't need to change them, but you can if you like. To do so:

  1. Go to Design > Mobile.
  2. Under the Mobile Checkout 1st Edition section, click Customize.
  3. Select Language.
  4. Edit any checkout fields for which you want to change the text.
  5. Click Save.

Adding Contact Information to Mobile Checkout

Contact information on checkout pages makes it easier for your customers to reach you, which in turn can help decrease your number of abandoned mobile carts. To add contact information to the Mobile Checkout footer:

  1. Go to Design > Mobile.
  2. Under the Mobile Checkout 1st Edition section, click Customize.
  3. Select Language.
  4. In the Footer section, type your preferred contact information in the Contact Info field.
  5. Click Save.

By default, your Mobile Storefront also includes a Contact Us category and form. Inquiries submitted through this form go to the primary email address you've defined at Settings > Company.

Reverting to Default Mobile Commerce Themes

You can revert to the default themes of both Mobile Storefront and Mobile Checkout at any time. In your Admin Area, go to Design > Mobile. To reinstall a Mobile Storefront theme:

  1. Under the Mobile Storefront theme that's currently applied, click Customize.
  2. Click the arrow next to Reset Theme.
  3. Select Revert to Original.
  4. When prompted with, "Are you sure you want to permanently delete this theme version and re-download the original version?," click OK.

To reinstall the Mobile Checkout theme:

  1. Under the Mobile Checkout 1st Edition section, click Customize.
  2. Click the arrow next to Reset Theme.
  3. Select Revert to Original. This action discards any language or CSS changes you've made to the Mobile Checkout theme.

    If you want to revert CSS changes while keeping language changes you've made, select Revert CSS Only from the Reset Theme menu.

    If you want to revert language changes while keeping any CSS changes you've made, choose Revert Language from the Reset Theme menu.
  4. When prompted with, "Are you sure you want to permanently delete [the CSS overrides of, the Language overrides of] this theme version and re-download the original version?," click OK.

Mobile Storefront URLs

When using Mobile Storefront 2nd Edition, each category and product page has a unique URL, determined by the category ID number or product code. You can use these URLs to link to individual products and categories from your mobile splash page, or in QR codes for print advertisements, or in various other capacities.

Mobile Category URLs

For categories on your Mobile Storefront, the URL structure is:

http://www.yourvolusionstore.com/mobile/Category.aspx?id=XXXX

In this example, "www.yourvolusionstore.com" takes the place of your actual domain name and "XXXX" takes the place of the category ID number.

Mobile Product URLs

For products on your Mobile Storefront, the URL structure is:

http://www.yourvolusionstore.com/mobile/Product.aspx?ProductCode=XXXX

In this example, "www.yourvolusionstore.com" takes the place of your actual domain name and "XXXX" takes the place of the product code.

Turning Mobile Commerce Off

You can use Mobile Storefront without using Mobile Checkout, but in order to use Mobile Checkout, you must also use Mobile Storefront. When you turn Mobile Storefront off, the desktop version of your website loads on mobile devices. When you turn Mobile Checkout off but leave the Mobile Storefront on, your shoppers will be redirected to the Desktop Checkout when placing orders.

To turn Mobile Commerce off (both storefront and checkout), follow these steps:

  1. In your Admin Area, go to Design > Mobile.
  2. Under Mobile Storefront, set the switch to Off.

To turn off Mobile Checkout only, follow these steps:

  1. In your Admin Area, go to Design > Mobile.
  2. Under Mobile Checkout, set the switch to Off.

Notes

Below you will find a number of factors to consider when comparing the mobile version of your store to the default desktop version, including features that aren't supported for your mobile store. In all cases, you can resolve these issues by installing a responsive theme, which renders the Mobile Commerce feature obsolete.

Category Display

If you've turned any of the special homepage sections on (Featured Products, New Products, Super Deal, and/or Top Sellers), they display first. Categories that contain one or more products display next. By default, eligible categories display alphabetically, but any Display Order specifications you've made override the default display order. When more than one category or subcategory has the same Display Order setting, they appear in alphabetical order. Note that certain nonstandard ways of setting up menus on your storefront may result in category duplication.

A category won't display in the following cases:

  • it doesn't have any products or subcategories
  • it's marked as hidden (Mobile Storefront 2nd Edition)
  • it has an Alternate URL specified (Advanced Info > Misc)
  • it has a Custom SQL Filter specified (Advanced Info > Misc)
  • it contains products that don't display on the storefront
  • it contains only custom HTML content
  • only specific customers can access it (private category)
  • it's not assigned to a navigation menu

RECURRING PRODUCTS

For recurring products, a price of 0.00 displays instead of the promotional starting price or the recurring price. These products still add to the cart normally, and show the proper price once they've been added.

A product won't display if:

  • it's marked as Hidden
  • it's out of stock and can't be backordered
  • it uses the Multi Child Add-to-Cart feature
  • it has an option applied that uses the Jump to Product Code setting
  • it has an option applied that uses the Is Product Code setting
  • it's downloadable
  • it uses the Allow Price Edit feature (commonly used with donation and gift certificate products)
  • it has a value greater than 1 in the Min Qty field

UNSUPPORTED FEATURES FOR MOBILE STOREFRONT 

The following features aren't supported for Mobile Storefront:

  • Admin Area browsing
  • web content other than categories and products
  • graphics other than logos and the main product image (alternate product images do not display)
  • YouTube videos uploaded through the YouTube Video Management section of a product page
  • responsive themes (Mobile Commerce will be automatically disabled)
  • page text changes that apply to the Desktop Storefront
  • the Dropdown Smartmatch feature
  • the Use Same Options as ProductCode feature (products using this feature will display, but the options will not)
  • members' prices
  • members-only stores
  • any kind of experience that requires a user to be logged in
  • Deal of the Day prices (Deal of the Day products still display at the regular price in categories they belong to)
  • hiding the Add to Cart button using the Add To Cart Replacement Text field on a product edit page
  • Add to Cart for Better Price and Email a Better Price functionality (the Sale Price displays instead)
  • international tax settings, such as prices that include VAT and/or GST

RECOMMENDED SETTINGS FOR MOBILE CHECKOUT

At this time, Mobile Checkout only supports payment with the four major credit cards or PayPal Express. If you don’t accept credit cards on your store yet, contact our Volusion Payments team at 1.800.646.3517 x101 or vms@volusion.com to get started.

Note that if you don't currently accept payment with PayPal Express or any of the major credit cards, your customers will be redirected to the Desktop Checkout to complete their orders.

If you've enabled alternative payment methods in addition to credit cards and PayPal Express, they won't appear as options for shoppers using Mobile Checkout. When Mobile Checkout is turned off, your shoppers can still browse the Mobile Storefront, but they'll be redirected to the Desktop Checkout to complete their orders.

International merchants should update prices to include any necessary taxes before turning Mobile Checkout on. The following international tax settings aren't supported:

  • Prices Inc VAT
  • Prices Exc VAT
  • Prices Inc VAT and Exc VAT
  • Prices Exc VAT and Inc VAT
  • Prices Inc GST
  • Prices Exc GST
  • Prices Inc GST and Exc GST
  • Prices Exc GST and Inc GST

UNSUPPORTED FEATURES FOR MOBILE CHECKOUT

The following features aren't supported for Mobile Checkout:

  • Soft Add to Cart
  • Forced customer account creation (when the config variables Allow Anonymous Checkouts and All Checkouts Anonymous are turned off); for optimal mobile conversion rates, Mobile Checkout always allows guest checkout. 
  • Single address entry (when the config variable Allow Different Shipping and Billing Addresses is turned off); Mobile Checkout allows separate billing and shipping addresses, even when the desktop version of your site doesn't.
  • Commercial address selection; all addresses are designated as Residential, even when the desktop version of your site allows shoppers to choose an address type.
  • Amazon Payments (when enabled at Settings > Payment, this payment method will only display on the desktop version of your site); to ensure that shoppers using mobile devices can use Amazon Payments, please install one of Volusion's responsive themes.
  • 3D Secure Authentication

Summary

Volusion Mobile Commerce allows you to create a richer experience for shoppers on mobile devices. As this exciting and unique market continues to grow, you'll have all the tools you need to expand your business along with it.

Did this answer your question?