Setting the file. One moment.
Skill 01 · Storefront Best Practices
Subchapter 1.20
reference/layouts/home-page.mdMarkdown9 KBView on GitHub
The homepage is the primary landing page for an ecommerce store. Purpose: Strong first impression, guide users to products, communicate value, drive conversions.
Backend Integration (CRITICAL):
All content (categories, products, promotions) must be fetched from the ecommerce backend. Do this based on backend integrated. Never hardcode homepage content. Fetch featured products, bestsellers, new arrivals, and categories dynamically.
Critical for every homepage:
Strongly recommended:
Above the fold (first screen):
Middle sections:
Bottom sections:
Large banner at top of homepage, first thing users see (above the fold). Communicates main message or promotion.
Content options:
See also: hero.md for detailed hero section guidelines including carousel patterns, mobile optimization, and performance.
Purpose: Help users browse by category, reduce clicks to reach products, quick access to main product types.
Category selection:
Pattern 1: Category Grid with Images 3-6 category tiles with images, category name overlay, click to navigate. Equal-sized tiles in grid layout (3-4 columns desktop, 2 mobile).
Pattern 2: Category Cards Card layout with category image, name, and item count (“120 products”). “Shop [Category]” button on each card. 2-4 columns on desktop, 2 on mobile.
Pattern 3: Category Slider Horizontal scrollable categories showing 4-6 at once. Arrows for navigation. See product-slider.md.
Purpose: Showcase popular products, build social proof, guide uncertain shoppers.
Product selection (backend-driven):
Layout: Product slider or grid, product cards with image, title, price, rating (if available). “View All” link to full bestsellers page.
Purpose: Highlight latest products, create sense of freshness, encourage repeat visits.
Product selection:
Layout: Product slider, optional “New” badge on products. “Shop New Arrivals” link.
Purpose: Drive urgency and conversions, clear excess inventory.
Product selection:
Display: Product slider with sale badges, strikethrough pricing, optional countdown timer (if time-limited sale).
Purpose: Build trust quickly, address common concerns (shipping cost, returns), differentiate from competitors.
Common value propositions:
Icon Row (most common): 3-4 icons with text below hero section. Icon + short text (truck icon + “Free Shipping”). Single row, centered. 100-150px per item.
Placement: Below hero section (most common) or above footer.
⚠️ IMPORTANT: Check footer first - don’t duplicate newsletter forms.
If your footer already includes a newsletter signup form, do NOT add another newsletter section on the homepage. Two newsletter forms on the same page:
Decision:
Purpose: Grow email list for marketing, offer incentive to build relationship.
Design essentials:
Incentive (CRITICAL):
Layout options:
Placement: Mid-page (after 2-3 sections) or above footer.
Typical homepage structure:
Vary section types: Product section → Banner → Product section. Avoid monotony (all product sections in a row). Mix text-heavy and image-heavy sections.
Spacing: Generous padding between sections (64-120px desktop, 40-60px mobile). Consistent spacing. Section backgrounds to create separation.
Responsive layout: Single column for most sections, stack elements vertically, larger touch targets (44px minimum), simplified navigation.
Product sections: Horizontal sliders with swipe gestures, or stacked product grids (2 columns). Smaller product cards optimized for mobile.
Hero section: Portrait aspect ratio (2:3 or 3:4), vertical text placement (center/bottom). See hero.md for mobile hero details.
Performance: Lazy load below-fold images, optimize hero image (<200KB), use WebP format. Mobile-first approach.
Essential elements: