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.
In This Article
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 setting options and configure the product display across various sections of the app, including the Collections and Product components on the app's homepage and the search results, product recommendations, shopping cart recommendations, and wishlist pages. You can customize the following:
- The display style of the product list
- Whether to show the quick-add button
- The aspect ratio of product images
- The display and position of discount tags
- The display of prices
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.
Comments