shopersite Design System & Component Gallery

M1 Complete

Mobile-first accessible component library (WCAG 2.2 AA compliant, 44px touch targets).

1. Buttons(All states & 44px mobile touch targets)

Primary

Secondary

Outline

Destructive

Loading State

Disabled

Small

Large

2. Specialized Inputs(Phone +91, PIN code auto-city, Rupee ₹ price)

Indian Mobile Number

🇮🇳+91

Sellers receive OTP on this number

Product Selling Price

₹

Stored as 99900 paise

Postal PIN Code

Auto-fills city and state

Store Subdomain

.shopersite.in

Error State Input

Only lowercase letters and numbers are allowed

3. Dropdowns & Selection Controls

Business Category

Searchable Theme Preset

Enable Cash on Delivery (COD)Collect cash directly from buyer upon delivery

Pause Store TemporarilyBuyers will see a friendly 'We are taking a break' notice

Billing Plan Selection

Free (₹0/mo)

Starter (₹299/mo)

4. Badges & Status Indicators

Paid (₹799)Awaiting UPI CheckOut of StockShipped with DTDCPublishedDraft Post

5. Responsive Table

Renders standard table on desktop; automatically collapses into touch cards on screens < 640px.

Order #	Customer	Items	Total	Status
1001	Pooja Sharma	2 items	₹1,499	Paid
1002	Rahul Verma	1 item	₹799	COD Pending
1003	Ananya Rao	3 items	₹2,850	Shipped

Order #1001

CustomerPooja Sharma

Items2 items

Total₹1,499

StatusPaid

Order #1002

CustomerRahul Verma

Items1 item

Total₹799

StatusCOD Pending

Order #1003

CustomerAnanya Rao

Items3 items

Total₹2,850

StatusShipped

6. Stepper & Progress Tracker

Step 3 of 6Products

Basics

Contact

Products

Theme

Payments

Publish

Onboarding Completion50%

7. Image Uploader & WCAG Contrast Color Picker

Product Photo

Tap to upload photo

Upload high-res JPG or PNG. Auto-compressed to WebP (max 1600px).

Theme Primary Color

WCAG AA Passed (10.36:1)

AAA

8. Reorderable Sections & Share Card with QR

Home Page Section Order

Move sections up or down with touch buttons

Hero BannerDiwali collection showcase

Best Sellers Grid8 featured items

Customer Testimonials3 verified reviews

Share Your Store

Let your buyers shop directly

Scan with Google Pay, Paytm, or Camera

https://aura.shopersite.in

9. Empty & Loading States

No orders yet

Share your store link on your Instagram bio and WhatsApp stories to receive your first order.

Skeleton Placeholders

10. Modals (Bottom Sheet / Dialog) & Toasts

Store Published Successfully

Your store is now live at auraboutique.shopersite.in