User experience settings

Featured links

1. Company XYZ documentation on user experience settings
2. Shopify documentation on the theme editor

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use these global settings to make shopping interactions feel consistent across the theme. They affect how customers receive cart feedback, inspect product images, recognize linked cards and banners, navigate while scrolling, and move between pages.

Cart and product gallery behavior

Choose the add-to-cart style that best matches your purchase flow:

1. Redirect to cart takes customers directly to their cart after adding an item, which suits stores that want customers to review their order immediately.
2. Show mini cart confirms the addition in an overlay while keeping customers on the current page. This is the default and supports continued browsing.
3. Update icon only keeps the interaction minimal by updating the cart indicator without opening a cart view.

Choose whether customers can open product images in a lightbox. Gallery zoom is useful when shoppers need to inspect materials, details, or product variations more closely; disable it for a simpler image-viewing experience.

If you use the icon-only cart style, make sure the cart indicator remains easy to notice. Customers should be able to tell that an item was added without leaving the page.

Overlays and hover feedback

Enable the overlay blur effect to soften the content behind supported overlays and draw attention to the active interaction. Disable it if you prefer a sharper visual treatment or want background content to remain more visible.

Card scaling and image filtering add hover feedback to cards and linked banners throughout the theme. Both are enabled by default. Use them to make linked content more discoverable, but keep effects subtle when cards use detailed imagery or text-heavy layouts.

Header behavior

Control how the header behaves while customers scroll:

1. Fixed keeps navigation, search, and cart controls visible at the top of the screen.
2. Hide on scroll reduces the header while customers scroll down and reveals it again when they scroll upward. This is the default behavior.
3. Off keeps the header in its normal position at the top of each page.

A fixed header supports quick access to key controls. A hiding header gives content more room, which can be especially useful on smaller screens.

Page transitions

Use a fade transition to soften the visual change between pages. Leave transitions off when you prefer immediate navigation feedback or a more minimal browsing experience.

Tip

Avoid combining strong page transitions with pronounced hover effects and overlays. Limiting competing motion helps customers stay focused on products and purchase actions.

Usage notes

1. Test cart feedback. Add items from product pages and listing cards to confirm customers receive clear confirmation.
2. Support product inspection. Enable gallery zoom when close-up product imagery helps customers make purchase decisions.
3. Keep linked content predictable. Use hover effects consistently across product cards and promotional banners.
4. Check mobile scrolling. Preview the selected header behavior on smaller screens to balance content space with access to navigation and cart controls.
5. Use motion deliberately. Choose a restrained combination of transitions, hover feedback, and overlay effects for a calmer browsing experience.