Configuring the Global Theme Settings
In Shopper App, you can configure global design settings for your app on the Theme Settings page. Here, you can choose the default app appearance, select display styles for product cards and bottom navigation, and enable haptic feedback.
Accessing the Theme Settings Page
From your SHOPLINE admin panel, go to Apps > Shopper App > App Design and click the Design button to access the design editor. In the left sidebar, click on the hexagon icon (Theme settings) to begin configuring your theme.
Appearance Mode
You can enable Dark mode (disabled by default) in the Color section. Once enabled, set the default display mode for users when they open the app. You can choose from the following options:
- Follow the user's system Default settings
- Display Light mode
- Display Dark mode
| Note: After enabling dark mode, you can switch between light mode and dark mode on any settings page to preview the actual effects. |
Product Display
Click the Product section to expand the settings and configure how products are displayed across various sections of the app. These include the Collections and Product components on the app's homepage, as well as the search results, product recommendations, shopping cart recommendations, and wishlist pages. You can customize the following settings:
-
Product List Display
- Choose between Fixed Grid or Waterfall display styles.
- Enable or disable the display of product reviews.
- Select the price display method.
- Enable or disable the display of the compare-at price.
- Enable or disable the display of the product summary.
-
Product Card Display
- Enable or disable product tags.
- Select the tag position.
- Choose whether to display the quick add button.
- Set the product image ratio.
Design Style
In the Design Style section, you can apply the corner radius effect to the following elements:
- Component corners
- Product image corners
- Button corners
Bottom Navigation
In the Bottom tabs navigator section, choose how you want to display the bottom navigation bar:
- Only on main pages (those enabled to appear in the navigation bar)
- On all pages before checkout
| Note: If you modify this setting after publishing the app to the app store, customers will need to restart the app to apply the updated settings. |
Haptic Feedback
Enable Haptic feedback to provide customers with tactile vibrations when they perform specific actions, such as adding products to their shopping bag or wishlist.