User Dashboard
Single place to see account and jump to sections.
Not testedNo automationA11y pending
Shop experience
Every screen and flow your storefront needs.
The customer-facing surface area of a modern storefront — account, cart, checkout, product, search and more — built into SHOPin and shipping today.
01 · Account
Account dashboard and navigation.
The signed-in home: a single place customers can see their account, jump between sections, and keep a consistent layout across every profile page.
Account Navigation
Quick access to account sections.
Not testedNo automationA11y pending
Account Wrapper
Consistent layout for all account pages.
Not testedNo automationA11y pending
My Data Tabs
Switch between profile sections without leaving the page.
Not testedNo automationA11y pending
02 · Address
Address form and address selection (checkout and customer).
Capture, validate and reuse shipping and billing addresses — at checkout and from the customer's saved book.
Address Form
Capture and validate shipping and billing addresses.
Not testedNo automationA11y pending
Address Selection
Reuse saved addresses at checkout and in account.
Not testedNo automationA11y pending
03 · Auth
Login, registration, email confirmation, logout, forgot password.
Production-grade authentication: HTTP-only cookies, encrypted and signed tokens, proactive refresh, anonymous sessions and CSRF protection on every state change.
Login
Sign-in with email and password; BFF uses CommerceTools password grant.
Not testedNo automationA11y pending
Registration
Create account; BFF creates customer in CommerceTools.
Not testedNo automationA11y pending
Registration Success
Confirm sign-up and set next steps.
Not testedNo automationA11y pending
Email Confirmation
Verify email ownership after sign-up.
Not testedNo automationA11y pending
Logout
Sign out; BFF revokes tokens and clears cookies.
Not testedNo automationA11y pending
Forgot Password
Request a password reset.
Not testedNo automationA11y pending
Token Storage
Access and refresh tokens in HTTP-only cookies; not exposed to JavaScript.
Not testedNo automationA11y pending
Token Refresh
Automatic and proactive refresh; interceptor refreshes from refresh token when needed.
Not testedNo automationA11y pending
Token Encryption & Signing
Tokens encrypted (AES-256-GCM) and signed (HS256) before cookie storage.
Not testedNo automationA11y pending
CSRF Protection
Double-submit cookie pattern with signed/encrypted tokens on state-changing operations.
Not testedNo automationA11y pending
Anonymous Session
Guest tokens for cart and checkout; merged on login.
Not testedNo automationA11y pending
User-Scoped API Client
UserClientService for /me and other user-scoped CommerceTools calls.
Not testedNo automationA11y pending
04 · Cart
Cart flyout, cart page, and promotions.
Everything from the badge in the header to the full cart page and the empty state. Quantities, summaries, modals — connected to the BFF.
Cart Flyout
Review cart and go to checkout without leaving the page.
Not testedNo automationA11y pending
Cart Page
Edit quantities and see full cart before checkout.
Not testedNo automationA11y pending
Cart Badge
Show cart size at a glance in the header.
Not testedNo automationA11y pending
Add to Cart Modal
Confirm add-to-cart and offer next action.
Not testedNo automationA11y pending
Empty Cart
Guide customers when the cart has no items.
Not testedNo automationA11y pending
Cart Summary
Show totals and key info before checkout.
Not testedNo automationA11y pending
Promotions & Coupon Codes
Let customers apply discounts and promo codes.
Not testedNo automationA11y pending
05 · Checkout
Multi-step checkout and order placement.
Step-by-step flow with cart preview, billing and shipping, delivery method, payment, review and completion — including success and failure states.
Checkout Steps Frame
Guide customers through checkout one step at a time.
Not testedNo automationA11y pending
Account/Guest Selection
Let customers choose guest or account checkout.
Not testedNo automationA11y pending
Cart Preview Box
Keep order summary visible during checkout.
Not testedNo automationA11y pending
Billing Address Step
Collect billing address for payment and invoices.
Not testedNo automationA11y pending
Shipping Address Step
Collect or select delivery address.
Not testedNo automationA11y pending
Delivery Method Step
Let customers choose shipping option.
Not testedNo automationA11y pending
Payment Step
Let customers choose and complete payment.
Not testedNo automationA11y pending
Review Step
Review order and addresses before placing.
Not testedNo automationA11y pending
Payment Success / Failure
Handle payment result and retry or redirect.
Not testedNo automationA11y pending
Checkout Complete
Confirm order and set post-purchase expectations.
Not testedNo automationA11y pending
06 · Customer
Profile, addresses, change password, order history.
The complete signed-in surface: edit personal data, manage saved addresses, change password and browse order history end-to-end.
Profile Management
Let customers view and edit personal data.
Not testedNo automationA11y pending
Address Book
Let customers save and manage addresses for reuse.
Not testedNo automationA11y pending
Address Item
Show one saved address with edit/remove.
Not testedNo automationA11y pending
Change Password
Let signed-in customers change their password.
Not testedNo automationA11y pending
Order History
Let customers see past orders.
Not testedNo automationA11y pending
Order Detail
Show single order content and status.
Not testedNo automationA11y pending
07 · Content
CMS content and teaser building blocks.
CMS-driven landing, info and campaign pages, built from a small set of composable teasers that cover most editorial layouts.
Content
CMS-driven pages (e.g. landing, info, campaign).
Not testedNo automationA11y pending
Image Teaser
Renders a single image with optional caption and link. Used in grids or cards.
Not testedNo automationA11y pending
Carousel Teaser
Renders a scrollable row of items.
Not testedNo automationA11y pending
Headline Teaser
Renders a heading with optional subtext or CTA.
Not testedNo automationA11y pending
Text Teaser
Renders a rich text block.
Not testedNo automationA11y pending
Rich Text Teaser
Renders formatted rich text (headings, lists, links).
Not testedNo automationA11y pending
Banner Teaser
Renders a full-width hero: background image, headline, body copy, and CTA.
Not testedNo automationA11y pending
Hero Teaser
Full-width block with background image, headline, body, and CTA. Centered content with overlay.
Not testedNo automationA11y pending
Section Teaser
Two-column layout: category label, headline, body, subcategory links, and image.
Not testedNo automationA11y pending
Regular Teaser
Image with overlay text panel (category, headline, body, CTA).
Not testedNo automationA11y pending
Slider Teaser
Carousel of slides: hero-style or image with caption. Single visible slide.
Not testedNo automationA11y pending
Accordion Teaser
Expandable accordion with title and rich text body per item.
Not testedNo automationA11y pending
Product Carousel Teaser
Renders a block with product carousel: image, name, price, and link (e.g. to PDP or listing).
Not testedNo automationA11y pending
09 · Product
Product detail page, buy box, gallery, price.
A complete product detail page with variant picker, gallery, price display and a sticky buy box that follows the customer down the page.
Product Details Page
Single place to see product info and buy.
Not testedNo automationA11y pending
Buy Box
Choose variant and add to cart without scrolling away.
Not testedNo automationA11y pending
Variant Picker
Select product variant by attributes (e.g. size, color) and update price and availability.
Not testedNo automationA11y pending
Product Images & Gallery
Let customers inspect product images and zoom.
Not testedNo automationA11y pending
Stock Availability Indicator
Show whether the product can be ordered.
Not testedNo automationA11y pending
Price Display
Show price, discounts, and tax so customers know what they pay.
Not testedNo automationA11y pending
10 · Product Collection
Product listing, filters, sorting, product card.
Category and collection pages with the listing primitives — filters, sorting, pagination and a clean product card.
Product Listing Pages
Browse products by category or collection.
Not testedNo automationA11y pending
Filters
Narrow listing by attributes (e.g. size, color).
Not testedNo automationA11y pending
Sorting
Order listing by price, name, or relevance.
Not testedNo automationA11y pending
Pagination
Load more products without leaving the page.
Not testedNo automationA11y pending
Product Card
Show product preview and quick actions in listing.
Not testedNo automationA11y pending
11 · Search
Search in header and search experience.
From the search field in the header to the dedicated results page, with autosuggest and predictive results as the customer types.
Search Flyout
Search and see results without leaving the page.
Not testedNo automationA11y pending
Basic Keyword Search
Find products by text query.
Not testedNo automationA11y pending
Autosuggest / Predictive Search
Suggest queries and products as the customer types.
Not testedNo automationA11y pending
Search Results Page
Dedicated page for search results and refinements.
Not testedNo automationA11y pending
12 · Store Config
Store-level configuration (e.g. countries).
The settings layer behind every form: supported countries, currencies, locales and any other store-shaped configuration.
Store Config
Drive forms and options from store data (e.g. countries).
Not testedNo automationA11y pending
13 · Wishlist
Wishlist page, add/remove items, move to cart.
A simple wishlist surface — save and remove products, then move them across to cart when the customer is ready to buy.
Wishlist Page
Single place to see and manage saved products.
Not testedNo automationA11y pending
Add / Remove Product
Save products for later or remove from wishlist.
Not testedNo automationA11y pending
Wishlist to Cart
Move wishlist items to cart for purchase.
Not testedNo automationA11y pending
Components
The component library behind every screen.
The reusable building blocks the shop experience is assembled from — design system, UI, product, form, overlay, navigation and utility components.
01 · Design System
Colors and typography used across the app.
The visual foundation — colour, typography and spacing tokens that keep every screen consistent.
Shopin Color System
Theme colors and palette.
Not testedNo automationA11y pending
Typography
Font system and base styles.
Not testedNo automationA11y pending
02 · UI Components
Core UI building blocks.
Core building blocks — buttons, links, badges and the primitives every other component is built on.
Accordion
Expandable sections.
Not testedNo automationA11y pending
Badge
Labels and status indicators.
Not testedNo automationA11y pending
Breadcrumbs
Page location and path.
Not testedNo automationA11y pending
Button
Primary action button.
Not testedNo automationA11y pending
Card
Content container.
Not testedNo automationA11y pending
Divider
Section separator.
Not testedNo automationA11y pending
Field
Form field with label and error.
Not testedNo automationA11y pending
Label
Accessible label for form inputs.
Not testedNo automationA11y pending
Logo
Brand logo.
Not testedNo automationA11y pending
Standard Container
Page width and padding.
Not testedNo automationA11y pending
03 · Product Components
Components for product display and selection.
Everything used to present and select products — cards, galleries, grids, price and variant pickers.
Gallery Image
Single image in gallery.
Not testedNo automationA11y pending
Gallery Dialog
Full-screen image overlay.
Not testedNo automationA11y pending
Product Gallery
Product images with thumbnails.
Not testedNo automationA11y pending
Product Grid
Responsive product grid.
Not testedNo automationA11y pending
Product Card
Product tile with image, price, and actions.
Not testedNo automationA11y pending
Price Box
Price, discount, and RRP display.
Not testedNo automationA11y pending
Quantity Switcher
Quantity increment and decrement.
Not testedNo automationA11y pending
04 · Form Components
Inputs and form controls.
Inputs, selects and form controls with validation and locale-aware behaviour built in.
Text Input
Text field with validation.
Not testedNo automationA11y pending
Checkbox
Checkbox input.
Not testedNo automationA11y pending
Select
Dropdown selection.
Not testedNo automationA11y pending
Switch
Toggle switch.
Not testedNo automationA11y pending
Radio Button
Single choice input.
Not testedNo automationA11y pending
Radio Selector
Radio button group.
Not testedNo automationA11y pending
Date Input
Date picker.
Not testedNo automationA11y pending
Password Input
Password field with visibility toggle.
Not testedNo automationA11y pending
Rich Text
Rich text editor for formatted content.
Not testedNo automationA11y pending
Autocomplete
Input with suggestions and type-ahead.
Not testedNo automationA11y pending
05 · Overlay Components
Dialogs, drawers, toasts, and overlays.
Layered surfaces — dialogs, drawers, flyouts and toasts that sit above the page.
Dialog
Modal dialog.
Not testedNo automationA11y pending
Drawer
Slide-out panel.
Not testedNo automationA11y pending
Sheet
Bottom sheet.
Not testedNo automationA11y pending
Tooltip
Hover hint.
Not testedNo automationA11y pending
Info Popover
Info icon with popover.
Not testedNo automationA11y pending
Popover
Generic popover anchored to a trigger.
Not testedNo automationA11y pending
Toast
Temporary notification.
Not testedNo automationA11y pending
07 · Display Components
Tables, carousel, and content blocks.
Content presentation — tables, carousels and the blocks that lay information out.
Table
Data table.
Not testedNo automationA11y pending
Comparison Table
Comparison layout.
Not testedNo automationA11y pending
Horizontal Scroller
Horizontal scroll area.
Not testedNo automationA11y pending
Carousel
Carousel with scrollbar.
Not testedNo automationA11y pending
SEO Text Section
SEO-friendly content block.
Not testedNo automationA11y pending
Scroll Button
Scroll to top button.
Not testedNo automationA11y pending
08 · Interactive Components
Variant selectors.
Stateful controls — variant selectors and other pieces that respond to customer input.
Configurable Options
Variant selection with color, thumbnail, and value selectors.
Not testedNo automationA11y pending
09 · Utility Components
Loading and accessibility helpers.
The quiet helpers — loading states and accessibility utilities used across the app.
Loading Spinner
Loading state indicator.
Not testedNo automationA11y pending
Gradient Overlay
Gradient overlay.
Not testedNo automationA11y pending
Ready to launch
Launch your storefront,
today.
All these features are ready to use. Get started with SHOPin and ship your composable storefront in weeks, not quarters.