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.
| Note: All changes made in the design editor are saved automatically in real time. You don't need to click Save while editing. |
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:
Product list settings are divided into two tabs:
- Default layout applies to the 1 per row, 2 per row, and Staggered layout list views.
- 3 per row layout applies only to the 3 per row list view and includes a simplified set of display options.
Default layout
The Default layout tab applies to the 1 per row, 2 per row, and Staggered layout list views.
You can configure the following display options:
- Display style: Choose between Fixed grid and Waterfall layouts for the product list.
- Gallery preview: Allow customers to swipe left or right to preview additional product images directly from the product list.
- Product name: Show or hide product names and configure how many lines are displayed.
- Product summary: Display a brief product description above or below the product name.
- Product ratings: Show customer ratings from your supported product review app.
- Quick add product: Display a Quick Add button or icon, allowing customers to add products to the cart directly from the product list.
- Wishlist icon: Display a wishlist icon and choose where it appears on the product card.
|
Gallery preview considerations:
|
3 per row layout
The 3 per row layout tab applies only when 3 per row layout is selected as the List layout. To maximize product image visibility, this layout provides a simplified set of configuration options.
You can configure the following settings:
- Product name: Show or hide product names and configure how many lines are displayed.
- Product ratings: Display customer ratings from your supported product review app.
- Quick add product: Display a Quick Add button or icon for faster purchasing.
- Wishlist icon: Display a wishlist icon and choose where it appears on the product card.
| Note: The 3 per row layout does not support Display style, Gallery preview, or Product summary settings. These elements use a fixed simplified layout to place greater emphasis on product images. |
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.
-
Enable or disable the Buy Now feature to allow customers to purchase products directly from the product detail page and the quick add-to-cart panel, and set the button order:
- Add to Cart on the left and Buy Now on the right
- Buy Now on the left and Add to Cart on the right
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.
Experience Settings
The Experience settings section allows you to configure interaction behaviors on the product details page, including how add-to-cart feedback is displayed and whether cart icon animations are enabled. These settings help optimize the overall user experience.
Set Variant Selection Optimization
Remember User's Attribute Preferences under Variant Selection Optimization lets the app remember a customer's most recent selection for a specific variant attribute (such as Size) and automatically preselect that value when the customer views other products. This helps reduce the need to repeatedly select the same variant attribute.
- This option is disabled by default. After enabling it, click + Attribute to select one variant attribute (such as Size). The app will remember the customer's most recent selection for that attribute.
- The Attribute selector lists commonly used variant attributes in your store and sorts them by usage frequency. We recommend selecting the attribute that has the greatest impact on purchasing decisions and is most frequently selected by customers (for example, Size, followed by Color).
- Example: If a customer previously selected Size: S, the app automatically preselects S when the customer views another product that includes S/M/L size options. If the customer changes the selection to M, the remembered value is updated to M.
|
Notes:
|
Set Add-to-Cart Feedback
You can choose how customers are notified after successfully adding a product to the cart:
- Classic toast: Displays a lightweight notification that does not interrupt the browsing experience.
- Immersive animation: Shows an animation when a product is added to the cart to enhance interactivity. If the current page does not support this animation, the system will fall back to Classic toast.
- Confirmation modal: Displays a confirmation pop-up and guides customers to the next step (such as going to the cart).
Select the option that best fits your store’s needs and desired user experience.
Set Cart Icon Animation
When Cart icon animation is enabled, the cart icon will display an animation after a product is added to the cart, providing clearer visual feedback.
You can use the toggle to enable or disable this feature.