Categories and products on the Mobile App
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, the assigned products are displayed.
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:
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
Note
When choosing the image, you should ensure the banner image and text work well together.
Customize how categories are displayed by including a banner image, text, and the text color.
- Go to Admin Console > Mobile App.
- Click Edit for the desired website.
- Select the Categories tab.
- Click Edit for the desired category.
- Populate the following fields:
- Category Banner Image – You should use an image size of 1080x450. If the image is not a rectangular shape, it is automatically cropped, and the results may not be desirable. 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.
- Select Save.
The picture below is an example of category banners:
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 see 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 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.
When editing a specification in the Admin Console, use the Device drop-down list to select the Phone or Tablet option. You can create a new revision that targets mobile devices.
Note
Customer segments are supported only in Classic Mobile CMS, not Spire Mobile CMS.