Storefronts
Storefront Product Catalog & Shopping Experience
Discover how online customers browse your catalog: responsive product cards, category navigation tabs, real-time search, sorting, and out-of-stock protections.
Catalog Presentation Overview
Your storefront automatically formats active products into a responsive e-commerce grid adapting to mobile and desktop screens. Colors and styles inherit your configured site theme (`--sf-primary`, `--sf-radius`).
Product Card Visual Anatomy
Each product card includes:
- Photo Thumbnail: High-resolution image thumbnail with fallback icon placeholder.
- Title & Category: Clear item title and category badge.
- Price & Sale Badge: Active selling price. If discounted, the original price is rendered with strike-through styling alongside an orange "% off" badge.
- Star Ratings: Average customer star rating (1 to 5 stars) and total approved review count.
- Action Button: "Add to Cart" or "Order Now" action button based on your configured primary CTA mode.
Out of Stock Protection
When an item's stock quantity reaches 0 units, the product card automatically renders an "Out of Stock" badge and disables the purchase button, preventing overselling.
Search, Category Tabs & Sorting
Visitors navigate using Category filter tabs ("All" + custom categories), instant text search filtering by title and description, and sorting options ("Newest", "Price: Low to High", "Price: High to Low", "Popular").
Dedicated Item Detail Navigation
Clicking any product card opens its dedicated URL (`/product/:id`) featuring full-resolution photography, detailed descriptions, quantity selectors, direct WhatsApp inquiry with pre-filled product links, and native Web Share.