Build mobile-first themes

Begin with the smallest supported storefront width, then add space and columns for larger screens. Do not build a desktop layout and merely shrink it.

Practical rules

• Keep touch targets large enough to tap without precision.
• Do not make essential behavior depend only on hover.
• Let inputs, search bars and email forms use the available parent width.
• Prevent text, prices and buttons from forcing horizontal scrolling.
• Keep drawers, dialogs and sticky actions inside the visible viewport.
• Preserve page-width versus full-width section settings on every viewport.

Test touch behavior for carousels, layered slideshows, menus, collection links, filters, variant choices and checkout controls. A deeper slide or submenu that can only be revealed by a mouse is broken on mobile.

Use real long product names, Indian addresses and INR prices. Empty placeholders often hide layout problems that appear with merchant data.