Using the mobile app CMS

Use the Mobile App CMS to edit pages specific to the Optimizely B2B Commerce Mobile App, for example the Shop page.

If you want to make static content page updates, you need to switch to the Website CMS. Click the Settings icon in the upper right corner and select Switch to website to open the Website CMS.

Access the Mobile CMS from the Admin Console

  1. Click Site Preview.
  2. Click Mobile App next to the site you want to launch in the Mobile CMS.

    LaunchMobileCMS.png

  3. View the Mobile App CMS in a new tab.

Edit a Page in the Mobile App CMS

  1. Click the Tree icon to view the list of pages you can edit in the Mobile App CMS.
  2. Click Edit to enter edit mode.
  3. Select a page to edit from the tree.
  4. Click Edit on the page to edit the page Title.
  5. Click Add Content to add widgets A pre-configured content holder ISC_Content user roles may use to add content to website pages without having to develop page elements. to the page.
  6. Click Publish to push your changes to your Mobile App customers.

MobileCMSUI.png

Preview a Page in the Mobile App CMS

You can only preview your changes by logging into the B2B Commerce Testing App with your site's Admin Console credentials.

What you see in the Mobile App CMS is a representation of the widget, but you need to log into the B2B Commerce Mobile App on your mobile device to see how it will actually look.

  1. Log into the B2B Commerce Testing App on your mobile device with your site's Admin Console credentials. The option to login as admin will be presented to you when you first launch the app. To login after going into the app is accessible from Account > Settings > Admin Login.

    Simulator_Screen_Shot_-_iPhone_11_-_2020-01-10_at_11.30.43.pngSimulator_Screen_Shot_-_iPhone_11_-_2020-01-10_at_10.59.06.pngSimulator_Screen_Shot_-_iPhone_11_-_2020-01-10_at_10.59.10.png

  2. Once you are logged in with your Admin account you will see a CMS Toolbar at the bottom. This toolbar will allow you to toggle between Live and Preview mode along with manually refreshing the data.

    Simulator_Screen_Shot_-_iPhone_11_-_2020-01-10_at_10.58.52.pngSimulator_Screen_Shot_-_iPhone_11_-_2020-01-10_at_10.59.30.pngSimulator_Screen_Shot_-_iPhone_11_-_2020-01-10_at_11.28.54.png

Working with Widgets in the Mobile App CMS

You can add an image carousel, link list or product carousel to a Mobile App page. You can add multiple widgets of the same type to a page.

  1. Click the Tree icon to view the list of pages you can edit in the Mobile App CMS.
  2. Click Edit to enter edit mode.
  3. Select a page to edit from the tree.
  4. Click Add Content to add widgets to the page.
  5. Select an option from the Item Type drop-down list. You can add an image carousel, link list or product carousel.
  6. Click Next.
  7. Adjust the widget-specific settings as needed and click Save.
  8. Click Add or Edit on a specific widget to add or edit slides, links or other settings.
  9. Click the Cross-hairs to rearrange widgets on the page.
  10. Click Publish to push your changes to your Mobile App customers. You can also click the Restore icon to return the page to the last published version.

Widgets Available in the Mobile App CMS

The three widgets you can add to your Mobile App pages via the Mobile App CMS are:

You can set several slides to rotate in the carousel widget. You can link each slide to a specific URL to display promotions or direct users to other features outside the mobile app. Once the last slide appears, the carousel rotates back to the first slide, or the user can manually forward slides. Slide settings include:

  • Timer Speed (ms) - Default is 10000.
  • Animation Speed (ms) - Default is 500.
  • Image - The URL of the image.
    • Recommended image size: 1250 x 500 pixels
    • Image will resize to fit the width of the device with an aspect ratio of 5:2. Top and bottom with be cut off if necessary.
  • Link - The URL to send the user to when they click the image. 
  • Primary Text - The main text you want to appear on the image.
  • Text Color - The 6-digit hex value for the color of the primary text.
  • Secondary Text - Additional text you want to appear on the image.
  • Text Color - The 6-digit hex value for the color of the secondary text.
  • Text Justification - Placement of the text in the slide, whether Left, Center or Right.
  • Apply Dark Overlay to Image - Select this check box if you want the image to have a dark overlay.

MobileCarouselSlide.png

The link list widget lets you link out to various features in the app for your users. These options include:

  • Categories
  • Brands
  • Quick Order
  • Search (not currently available in the app, but will be added in an upcoming release)

You can also choose to display the links in either a List view or Grid view.

MobileLinkList.png

Product Carousel 

The product carousel will display via a horizontal scrollable carousel set of products, each linked to their respective product detail page. 

Carousel Types:

  • Featured Category
  • Recently Viewed
  • Top Sellers
  • Web Cross Sells

Shared options across all types:

  • Title
  • Show/Hide price

MobileProductCarousel.png

Customize content based on user language

You can use languages within the Mobile CMS to customize content based on the language the user selects on your website. You can translate the following using the Mobile CMS:

  • Page titles:
    • Shop
    • Search
    • Account
  • Widgets:
    • Carousel - the primary and secondary text and links on slides
    • Link List - text and links
    • Product Carousel - title
    • Search History - title

To use this feature, select a language from the Language drop-down list to translate page or widget titles or other text for that language. Publish your changes. When finished with the translations, select your default language from this drop-down to view the original titles and text.