Polaris Ecommerce Components
Copy-paste Shopify Polaris web component patterns for ecommerce stores
Browse by category
Cart
12 components
Product
37 components
Marketing
19 components
Checkout
13 components
Trust
7 components
B2B
4 components
Account
7 components
Inventory
7 components
Search
4 components
Collection
8 components
Free components
Cart Goal Progress
Visual progress bar showing how close shoppers are to free shipping or a gift threshold.
Cart Line Item
Single cart row with product image, variant, quantity, and remove.
Cart Savings Summary
Highlights total savings from sales, discounts, and compare-at prices.
Cart Summary
Order subtotal breakdown with tax, shipping, and total.
Delivery Date Estimator
Estimated delivery window based on shipping method.
Delivery Instructions
Structured delivery preferences with dropdown and free-text details.
Empty Cart State
Friendly empty state when the shopping cart has no items.
Free Shipping Progress
Banner showing progress toward free shipping threshold.
Gift Wrap Selector
Toggle and message field for gift wrapping add-on.
Order Notes Field
Optional text area for special instructions attached to the order.
Quantity Stepper
Increment and decrement quantity controls for cart line items.
Before & After Slider
Side-by-side comparison showing product results or transformations.
Care Instructions Accordion
Washing, storage, and maintenance guidance for the product.
Estimated Delivery Badge
Dynamic delivery date estimate based on shipping method and location.
Feature Comparison Chips
Selectable chips comparing plan or variant feature tiers.
Floating Buy Now Button
Prominent floating action button for express one-tap purchase.
Image Hotspots
Interactive product image with clickable feature callouts.
Ingredients & Materials Accordion
Expandable section listing full ingredients or material composition.
Multi-Currency Price
Price display with currency selector for international stores.
Product Card
Compact product card with image, title, price, and add-to-cart action.
Product Compatibility List
Checklist showing which devices or products this item works with.
Product Highlights
Bullet list of key selling points with icons.
Product Image Gallery
Main product image with thumbnail strip for variants.
Product Specs Table
Structured specification rows for technical product details.
Product Variant Picker
Size and color variant selection using clickable chips.
Product Video Gallery
Mixed media gallery combining product photos and video thumbnails.
Recently Viewed Carousel
Horizontal strip of products the shopper recently browsed.
Recently Viewed Strip
Horizontal strip of recently viewed product thumbnails.
Restock Notification
Email capture form when a variant is out of stock.
Return Policy Section
Expandable policy details grouped in themed sections.
Review Card
Customer review with avatar, rating, and comment.
Sale Price Row
Compare-at price with sale price and discount badge.
Size Guide Modal Trigger
Link button that opens a size guide modal via commandFor.
Star Rating Display
Product rating summary with review count.
Sticky Mobile Purchase Footer
Fixed bottom bar on mobile with price and add-to-cart for thumb reach.
Stock by Variant
Per-variant inventory status with low-stock warnings.
Wishlist Button Row
Add to cart paired with save-to-wishlist action.
Announcement Rotator
Rotating top-bar messages for promos, shipping updates, and store news.
Best Seller Badge
Badge marking top-performing SKUs in a category.
Birthday Offer Card
Personalized birthday discount card for loyalty members.
Coupon Code Input
Discount code field with apply button for cart promotions.
Coupon Reveal Card
Tap-to-reveal discount code card with copy action.
Holiday Promotion Banner
Seasonal hero banner with themed copy and CTA.
Limited Time Offer Banner
Countdown-style urgency banner for expiring promotions.
Newsletter Signup
Email capture form for store newsletter subscriptions.
Referral Banner
Banner inviting shoppers to refer friends for shared rewards.
Scratch Coupon
Scratch-off style coupon reveal for gamified promotions.
Trending Now Badge
Badge indicating surging product popularity.
Trust Badges Row
Security and guarantee badges to build customer confidence.
Accepted Payment Icons
Row of accepted payment method logos at checkout.
Checkout Button Group
Primary checkout with secondary continue-shopping actions.
Gift Card Balance Checker
Form to check remaining balance on a gift card.
Gift Message Field
Optional gift message textarea for order personalization.
Payment Method Selector
Radio choice list for selecting a payment method at checkout.
Secure Checkout Banner
Reassurance banner at checkout emphasizing payment security.
Shipping Address Form
Standard shipping address fields for checkout flows.
Shipping Protection Toggle
Optional add-on toggle for package protection at checkout.
Tax Estimate Row
Checkout row showing estimated tax before final calculation.
Authenticity Badge
Badge certifying genuine products and authorized retailer status.
Brand Story Card
Narrative card introducing brand mission, origin, and values.
Contact Merchant CTA
Help section with contact options for customer support.
Money Back Guarantee
Prominent guarantee block with policy summary and link.
SSL Security Banner
Compact SSL encryption notice for sensitive pages.
Trust Icons Grid
Grid of trust signals — shipping, returns, support, and security.
Verified Reviews Summary
Aggregate review score with verified purchase breakdown.
Case Pack Selector
Quantity selector aligned to case pack increments.
MOQ Notice
Minimum order quantity notice for wholesale buyers.
Membership Tier Badge
Badge showing current loyalty tier and benefits.
Order Statistics Card
Summary card with order count, spend, and favorite category.
Order Status Tracker
Visual fulfillment progress with badge status indicators.
Backorder Notice
Notice when item is available to order but ships later.
Incoming Stock Banner
Banner showing expected restock date for out-of-stock items.
Low Stock Banner
Urgency banner when product inventory is running low.
Store Pickup Availability
Shows in-store pickup option with location and ready time.
Warehouse Availability
Per-warehouse stock levels for multi-location inventory.
No Results State
Empty state when search returns zero matches with recovery actions.
Popular Searches
Trending search terms as clickable chips.
Recent Searches
List of shopper's recent search queries as quick links.
Search Suggestions Dropdown
Typeahead dropdown with products, collections, and queries.
Active Filters Bar
Shows applied filters with remove actions and clear-all.
Breadcrumb Navigation
Category breadcrumb trail for product detail pages.
Collection Filter Bar
Inline filter chips for narrowing collection results.
Collection Hero Banner
Hero section for collection pages with image, title, and description.
Infinite Scroll Loader
Loading indicator shown while fetching more collection products.
Quick Filter Chips
Horizontal row of one-tap collection filters.
Sort Dropdown Row
Product sort selector for collection pages.
Sort Toolbar
Collection toolbar with result count and sort selector.
Premium components View all 31 →
Cart Upsell Drawer
Slide-out panel recommending complementary products before checkout.
AI Product Summary
AI-generated concise overview of reviews and product details.
AI Size Recommendation
Personalized size suggestion based on shopper inputs and purchase history.
Bundle Builder
Multi-product bundle selector with combined pricing.
Pre-Order Countdown Banner
Pre-order availability banner with launch date emphasis.
Product Comparison Table
Side-by-side feature comparison for similar products.
Product Q&A Section
Customer questions and answers with ask-a-question CTA.
Product Quick View Modal
Modal overlay for quick product preview without leaving the collection page.