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 List
Click the Product list section to configure the display settings for product listings throughout the app. These settings will apply to the Collections and Products components on the app's homepage, as well as to the search results, product recommendations, cart recommendations, and the wishlist pages. You can customize the following settings:
- Choose between Fixed grid or Waterfall display style.
- Enable or disable the display of the Product name.
- Enable or disable the display of the Product summary.
- Enable or disable the display of the Product ratings.
- Choose whether to display the quick add button.
- Enable or disable the display of the Wishlist icon.
Product Card
Click the Product card section to configure the display settings for your product cards. The following options are available:
- Set the product image ratio.
- Select the price display method and enable or disable the display of the compare-at price.
- Enable or disable product tags and select the tag position.
- Customize the badge style and choose its position.
Color Swatch
The Color swatch section lets you control how product color options are displayed across your app, including both product lists and product detail pages. These settings help ensure a consistent and clear visual experience when customers browse products with color variants.
Click the Color swatch section to configure the following settings:
-
Product image ratio: Choose the shape of color swatches displayed on product cards and product detail pages:
- Square
- Round
- Follow product image (inherits the product image shape)
- Product list – color swatch size: Select the size of color swatches displayed on product listing–related pages, such as collections and search results. You can choose from preset sizes (S, M, L) for quick setup, or select Custom to define a size that better matches your design needs.
- Product detail – color swatch size: Select the size of color swatches displayed on the product detail page. You can choose from preset sizes (S, M, L) for quick setup, or select Custom to define a size that better matches your design needs.
Changes made in this section are reflected in real time in the preview panel, allowing you to switch between light and dark modes to review the final appearance before publishing.
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.