DBC: Mobile Responsive Interface

This reference guide will walk you through the look of the new "Mobile Responsive Interface" as well as administration, settings, and new features offered.

Mobile Responsive Design

DB Commerce is a robust platform that can be tailored to many different use cases with countless styling and feature permissions available. This first iteration of a "Mobile Responsive Interface" was designed with the critical user path and most commonly used features in mind, though we fully expect to continue adding new improvements and functionality as adoption increases.

They key areas that we focused on for this initial pass at the Mobile Responsive Interface include Login, Home page, Catalog access, Search, Item detail and Customization pages, Shopping Cart, Checkout, Order Confirmation, and Order History.

Login

  • The Login page will contain the customer's Company Logo, Login Message, and Username and Password fields.
  • Custom login pages will not be supported.
  • Self-Registration and Username/Password retrieval links will not be present.
  • Contact information will reside within the site in the page footer if applicable.

Catalogs

  • Catalogs setup as Default, Carousel, and Order Form type catalogs will be accessible, however, all of these will inherit the responsive Default catalog style when viewed on a mobile device.
  • Asset, E-Library, and Tap-Out catalogs will not be accessible via the "Mobile Responsive Interface." Users may continue to shop from and browse these catalogs from the Desktop version of the site.
  • The catalog drawer has been removed in favor of a static navigation menu. This menu will collapse based on display size and will always contain all [mobile supported] catalogs/sub-catalogs made visible to the user’s group.
  • For optimal catalog performance and speed, it is strongly recommended to upload a catalog thumbnail image for each catalog.
  • Users may perform product searches from anywhere in the site, without having to first navigate to a dedicated Shop page.

Items

  • Simple Items (Inventory and POD), Templated Items configured for Print Output, Promo, and Promo Personalization items will be available to view and order.

  • Select item types will still appear within catalogs they’ve been assigned to but may not be added to cart or ordered from the "Mobile Responsive Interface." They will contain a banner below the image thumbnail that reads "Only Available on Desktop Site" and will only be accessible when viewing the site on a desktop device.


    Any of these ineligible items that have been added to a user’s cart via the Desktop Site will be automatically moved to their "Saved for Later" cart if the user attempts to check out on mobile, and a warning will be displayed within the user’s shopping cart alerting them to the fact that the items have been moved. A complete list of item types not currently supported on Mobile is outlined later in this document.


  • Simple Items will no longer show as individual order lines if added to the shopping cart separately. All instances of a simple item will be combined into a single order line reflecting the aggregate quantity (unique order lines will still be created for each instance of Chili and Promo items added to cart).


  • Quantity break pricing for items configured with the QB Freeform and QB Restricted Item Pricing types will be conveyed to end users on the item detail view as Volume Pricing, consistent with the way in which Promo items with pricing tiers are displayed.

Cart and Checkout

  • Cart and Checkout have been separated into two separate pages for optimal performance. Users will see a summary (including images) and subtotal of all items added to cart on the Cart page where they may update quantities, remove selections, and assign line-item identifiers.


    The number of items indicated alongside the Cart icon will now reflect the number of units being ordered, versus number of order lines. Validation of Order Limits and available inventory will occur on this page, in addition to calculation of subtotals, and transition of any items not supported for mobile ordering to the user’s "Saved for Later" cart.


    Note: The Saved for Later cart is not currently shown on the Mobile Responsive Interface.

  • Once selections have been finalized, users will proceed to a subsequent Checkout page where they may specify Shipping and Payment details and review a read-only list of their selections. If needed, users may return to the Cart page to make further edits.


    In the event that approval rules are triggered by the user’s selections, a warning will be displayed prior to order placement.


  • Spilt Shipping is not currently supported from the "Mobile Responsive Interface." Users wishing to take advantage of Split Shipping must do so from the Desktop site.


  • Split Payment (by Amount) is supported. Users may select one or multiple Spending Accounts, Billing Locations, or Credit Cards based upon their Group privileges.
  • After placing an order, users will be directed to a new Order Confirmation page (as opposed to the Confirmation popup window on the Desktop site), containing a more robust summary of their order, including an interactive map view of the ship-to location.

Order History

  • A link to Order History will be present from the Auxiliary Navigation menu.
  • This area will contain a searchable list of orders placed by the user across the Mobile and Desktop sites, as well as a detailed summary, including images, of items ordered.
  • Customer Admin users wishing to review orders placed by different users must continue to do so via the Desktop site.

Distributor Admin Tools

The following permissions below can be found within the New Distributor Admin Interface.

Enabling the Mobile Responsive Version

Within Companies > Company Overview, the permission Mobile Responsive will be present and will be disabled by default. When enabled, this permission will dictate whether users are redirected to the Mobile Responsive version of the site, as opposed to the traditional Desktop presentation, when browsing on a mobile device.

Mobile URLs will adhere to the format https://<subdomain>.m.<domain>.com.

Note: This will require coordination with your IT department and DemandBridge to ensure proper certification and security settings are in place.

When the Mobile Responsive permission is activated, the "Save for Later" cart permission will also be automatically enabled for the company to ensure that items added to users’ carts on the Desktop but not eligible for Mobile ordering will not be orphaned.

Disable Ordering on Mobile Site Permission for Template Items

Within Items > Template Items, the permission "Mobile Order Eligible" will be present and will be enabled by default. This permission was designed with very complex items in mind, such as those containing many variables, several tabs of variables, multiple pages requiring customization, or items that make use of in-line editing.

In these use cases, where certain features don’t lend themselves to the best end user experience on a mobile device, admins may selectively exclude certain items from Mobile Ordering. When this permission is disabled for a given item, a banner will be displayed below the image thumbnail that reads "Only Available on Desktop Site," and the item may only be added to cart from the Desktop site.

Site Design

Within Site Design you can customize the look and feel of a site.

Under Styling, admins may specify a Primary Color and Secondary Color, as well as up to one Accent Font from a predefined list of Google fonts. After making changes, admins may then Preview those updates within the Desktop Skin or Mobile Skin.

When ready to confirm those changes, an admin will need to subsequently Apply them to the Desktop and Mobile skins, at which point those design elements will automatically be applied to select areas/headers throughout the site.

Under Homepage Template, Template A will be selected by default. It is strongly recommended to configure this or another template, as a Homepage is no longer optional, and will be displayed on all mobile sites alongside the catalog list. After configuring a homepage, admins may preview their design to see how it will appear on both the Desktop and Mobile Responsive sites.

Under Text and Messaging, your admins can update the Login Message that appears on the Login page above the Username and Password input fields, as well enter the Contact Information to be displayed within the Site Footer. This area will only apply to the "Mobile Responsive Interface."

Desktop site Login and Footer messaging will continue to be managed within the Theme Component area.

Currently Unsupported Features

Below is a listing of some of the most commonly used features within DB Commerce that are currently not currently supported in the "Mobile Responsive Interface:"

  1. Login


    a. Forgot Username and Password Links


    b. Self-Registration


  2. Catalogs

The following catalog types will still within the catalog list area but will inherit the Default Catalog Style.

a. Carousel


b. Order Form

The following catalog types will not appear within the catalog list area. They will only be accessible when viewing the site on a desktop device.

c. Asset


d. E-Library


e. Tap-Out

  1. Items

The following item types will still appear within catalogs they’ve been assigned to but may not be added to cart or ordered from the "Mobile Responsive Interface." They will contain a banner below the image thumbnail that reads "Only Available on Desktop Site" and will only be accessible when viewing the site on a desktop device.

Any of these ineligible items that have been added to a user’s cart via the Desktop Site will be automatically moved to their “Saved for Later” cart if the user attempts to check out on mobile, and a warning will be displayed within the user’s shopping cart alerting them to the fact that the items have been moved.

a. Items configured with the EQ Item Pricing type


b. E-Delivery


c. Item Groups


d. Templated Items > Download PDF (High Res)


e. Templated Items > Flipbook


f. Templated Items > Image Output


g. Templated Items > Printed Items - Direct Mail


h. Digital Emails

The following item types will still appear within catalogs they’ve been assigned to, but users will not be able to access the item detail pages from the Mobile Responsive Interface.

a. Items set to Browse Only


b. Item Groups


c. Videos

  1. Checkout

The following Checkout features, and UI elements will not be supported from the "Mobile Responsive Cart" and Checkout pages. Users wishing to take advantage of these features may continue to do so from the Desktop site.

a. Advanced Ship To & Payment Search


b. Allow Order Email CC's


c. Allow Email My Cart


d. Allow Admin Cart Transfer


e. Add on Services


f. Save for Later


g. Split Shipping


h. User File Attachments

  1. Manage Profile

The Profile page used to manage features such as Personal Information, Default Ship-To & Payment Methods, Saved Addresses, My Wallet, Manage My Contacts, My Images, and My Spending Accounts is not available on the "Mobile Responsive Interface." Users whose groups have access to this navigation option must access this page from the Desktop site.

a. Personal Information


b. Default Shop-To & Payment Methods


c. Saved Addresses


d. My Wallet


e. Manage My Contacts


f. My Images


g. My Spending Accounts is not available on the "Mobile Responsive Interface." Users whose groups have access to this nav option must access this page from the Desktop site.

  1. Customer Administration

Customer Administrators may login to the "Mobile Responsive Interface" but will have a comparable experience to standard users. The Control Panel and various maintenance areas within (e.g. Work w/ Users, Work w/ Groups, Approval Center) must be accessed from the Desktop site.

The "Mobile Order History" page will only contain the admin user’s orders, rather than a cumulative display of orders placed by all users on the site.

  1. Favorite Items and Favorite Orders

a. Users will not be able to designate items as Favorite Items or view their Favorites catalog(s) on the "Mobile Responsive Interface."


b. Users will not be able to designate orders as Favorite Orders or view their Favorite Orders list on the "Mobile Responsive Interface."

  1. Related Items

The Related Items popup window won’t be shown on the "Mobile Responsive Interface." It will still appear when applicable on the Desktop site.

  1. Messages

Messages setup to display within certain locations, items, or catalogs will not be prompted on the "Mobile Responsive Interface." These messages will still appear where applicable on the Desktop site.

  1. Screen Preference Labels

Standardized verbiage and labels will be used on mobile responsive pages. Shipping and Billing Misc. fields configured to display on the Checkout page will still obey values specified by distributor administrators.

  1. Custom Instructions

Custom Instructions configured by distributor administrators will not appear on the "Mobile Responsive Interface." These instructions will still appear where applicable on the Desktop site.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.