The Browse Categories option on the Shop page lets users drill down through the product catalog. After tapping the option, the user is shown all available categories. From there, tapping on each subsequent category displays the respective child categories; if no child categories exist, then the products assigned to that category are displayed.
We refer to these different types of screen with the following names:
Top Categories > Sub-categories > Product List > Product Detail
Top Categories
This screen shows the top-level categories in the product catalog defined for the website.
Category Images
Category images shown on this page are derived from the Small Image: Admin Console > Catalog >Categories > Select the Edit option for the desired category > Content finger tab > Small Image Path.
Sub-category
The sub-category page displays other categories assigned to viewing categories so that the user can continue to drill down into the product catalog. On this page, you can add an image banner with or without text that displays below the header and above the sub-categories. A sub-category does not need a banner image, but adding one can add additional context and styling.
Category Images
Category images shown on this page are derived from the Small Image: Admin Console > Catalog >Categories > Select the Edit option for the desired category > Content finger tab > Small Image Path.
Category Banner
When choosing the image, it is important to 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.
- Go to Admin Console > Mobile App.
- Click the Edit button for the desired website.
- Select the Categories tab.
- Click the Edit button for the desired category.
- 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 hexdecimal color for the primary and secondary text. A preview of the color displays.
- Select Save.
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.
Product images
Within this screen, the product images 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, specifications, etc.
Product Images
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
In certain circumstances, 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 completely different content and styling.
When editing a specification in the Admin Console, use the Device drop-down list to select the MobileApp option. You can then create a new revision that targets mobile devices.