You can set up a category page path in the Botton Navigation, and let customers enter the native category page by tapping the path. You can customize the display style of the category page. If you open the product category page from the EC H5 page, you will still enter the EC H5 category page.
⚠️ Before you start: For Hong Kong merchants, this feature is available only on the Shopper App Pro plan.
Step 1
In the SHOPLINE Admin, go to [Shopper App Management] > [App Design] > [Category Page]. Click Set up to enter the editing page.
Step 2
Select the style of the category page. The system selects plain text list by default.
1. Image with text list
- Set the category image: You can set the image for the smallest layer of the category. Hover the cursor to right side of the sub-category, click the
icon to add an image. The recommended image size is 160*160.
- Switch the toggle buttons to set to show sold-out or hidden products respectively.
*Notes:
- The system by default synchronizes the publish statuses of all the categories of the online store, including the category banner and name. If you want to modify it, go to [Products & Categories] > [Classification]. After the modification, the app will have a cache of about 1 to 1.5 hours.
- If you display the category as an image with text list, the app will take the first product image of each sub-category for the category image.
- After tapping the category page, the customer will enter the native product list page. The settings of sold-out products and hidden products will also be synchronized to the product list page.
2. Plain text list
Switch the toggle buttons to set to show sold-out or hidden products respectively.
3. Image banner
You can add groups from the left element panel. Up to 5 groups can be created, and each group can display up to 30 categories. You can configure the following settings for each group.
*Note: The Shopper App platform version must be updated to v1.21 or above to use this feature. Earlier versions will display the "Image with text list" style instead.
-
Enter a category name to display it in the menu.
-
Customize the background and text colors.
-
Select a category image from [Product & Categories] > [Categories] > [Category Banners], or let the system automatically apply a product image from the category.
-
After selecting a category, you can choose to display a label and customize its content and color. You can also upload a custom category image in this section.
Step 3
In the left component panel, click Bottom Navigation to configure it. For more information, please refer to: Bottom Navigation | Shopper App.
Step 4
After the setup, confirm the display in the preview area at the middle, click Update and use to update to the app.
Comments