User experience

Overview #

The User Experience theme settings are designed to enhance the overall look and feel of the shop. These settings are applied across the entire theme but can be overridden at the section or block level. They provide options for cart interactions, visual effects, and gallery displays, aiming to improve the user experience.

Key components and functionality #

Add to cart style

This setting determines the behavior of the "Add to Cart" button on product pages. It offers three options to customize how users interact with the cart:

1. Redirect to cart: When a product is added, the user is redirected to the cart page.
2. Show mini cart: Displays a mini cart overlay, allowing users to continue shopping without leaving the current page. Default: Show mini cart
3. Update icon only: Updates the cart icon to reflect the number of items without any additional visual changes.

Enable overlay blur effect

This checkbox setting allows you to enable or disable a blur effect on overlays. When enabled, it adds a visual blur to background elements, enhancing focus on the foreground content.

Gallery zoom style

This setting controls how images in the gallery are displayed when zoomed. It provides two options:

1. None: No zoom effect is applied.
2. Open in lightbox: Opens the image in a lightbox for a closer view. Default: Open in lightbox

Scale cards on hover

This checkbox setting, when enabled, scales up product cards slightly when hovered over, providing a dynamic and interactive user experience. Default: Enabled

Show image filter on hover

This checkbox setting applies an image filter effect when a user hovers over a product card, adding a visual cue to highlight the product. Default: Enabled

Usage examples #

1. Add to cart style: If you want to streamline the shopping experience by keeping users on the product page, select "Show mini cart" to allow them to add items without navigating away.

2. Enable overlay blur effect: Use this setting to draw attention to pop-up messages or modals by blurring the background, making the foreground content stand out.

3. Gallery zoom style: For stores with high-quality product images, "Open in lightbox" can be used to provide customers with a detailed view of the products, enhancing their shopping experience.

These settings are designed to improve the overall user experience by offering customizable options that cater to different shopping behaviors and preferences.