Categories and products on the Mobile SDK

  • Updated

Optimizely is now selling their Configured Commerce Mobile App solution as an SDK that allows customers to customize and deploy the code via a certified partner or directly through Apple and Android app stores. Because Optimizely no longer provides the previous implementation method, customers who purchased the Configured Commerce Mobile App prior to April 2023 but have not implemented it should talk with their CSM about their options.

After purchase, Optimizely will work with customers and their partners to access the SDK and configure the Mobile App within the site settings. Certified partners or customers must complete all further implementation. Please see the Configured Commerce Mobile SDK article to learn more about getting started.

This article describes example functionality. Your interface will be different depending on how your partner configured the Mobile SDK.

Users can view categories and products in the catalog by tapping Browse Categories on the Shop page. They can then tap a subsequent category to see the child categories. If a category does not have a child category, then the assigned products display.

Optimizely refers to these types with the following names:
Top Categories > Subcategories > Product List > Product Detail

Top Categories

This screen shows the top-level categories in the product catalog defined for the website. Category images populate from the Small Image: Admin Console > Catalog > Categories > Edit > Content > Small Image Path.

The picture below is an example of the top categories screen:

Categories1.png

Subcategory

The subcategory page displays any other categories assigned to a particular category. You can choose to add an image banner with or without text that displays below the header and above the subcategories. Category images populate from the Small Image: Admin Console > Catalog > Categories > Edit > Content > Small Image Path.

Category Banner

When choosing the image, you should make sure the banner image and text work well together.

Customize how categories are displayed by including a banner image, text, and the text color.

  1. Go to Admin Console > Mobile App.
  2. Click Edit for the desired website.
  3. Select the Categories tab.
  4. Click Edit for the desired category.
  5. Populate the following fields:
    • Category Banner Image – It is recommended you use an image size of 1080x450. If the image is not rectangular in shape, it is automatically cropped and the results may not be desireable. When choosing the image, consider how it will look with overlayed text.
    • Primary Text – Enter the main text that overlays the banner image.
    • Secondary Text – Enter the smaller overlay text that displays below the primary text.
    • Text Justification – Select whether the text is aligned left, center, or right.
    • Text Color – Enter the hexadecimal color for the primary and secondary text. A preview of the color displays.
  6. Select Save.

The picture below is an example of category banners:

SubCategoryAndBanner.png

Product List

The product list screen displays when the user is viewing the lowest level category in the catalog that contains products. The user can search, filter, and sort the products in the list. Any product images displayed come from the Small Image Path.

Product Detail

The product detail screen lets the user dee all information related to the product, such as attributes, documents, and specifications. The Medium Image Path displays at the top of the page when the user first navigates to the product detail screen. When the user taps on the main product image, the product image gallery displays with images using the Large Image Path values.

Specifications

You may want to control the format and styling of the specifications on the mobile app compared to the desktop due to the smaller widths of mobile devices. You can create content that targets the mobile app, which lets you use different content and styling.

ConCom_Specifications_Mobile.png

When editing a specification in the Admin Console, use the Device dropdown list to select the Phone or Tablet option. You can then create a new revision that targets mobile devices.

Customer segments are supported only in Classic Mobile CMS, not Spire Mobile CMS.