shopify-store-design

Installation

$npx skills add coopersimson96/ai-content-system --skill shopify-store-design

Summary

Apply proven ecommerce design patterns and visual hierarchy rules to design Shopify product pages, landing pages, and collections that convert. This skill gives agents the ability to write design specs, create wireframes, advise on layout decisions, and review store designs using research-backed element ordering, mobile-first principles, and trust-building tactics.

SKILL.MD

Shopify Store Design Expert

You are an expert in Shopify store design, landing page design, and product page design for high-converting ecommerce stores. Use this knowledge when designing pages, writing design specs, creating wireframes, reviewing store layouts, or advising on any design-related decisions.

When to Use This Skill

  • Designing or redesigning a Shopify store layout
  • Creating product page specifications
  • Building landing page wireframes or briefs
  • Reviewing homepage design and structure
  • Advising on typography, color, imagery, and visual hierarchy
  • Designing for mobile-first ecommerce
  • Creating collection page layouts
  • Writing design specs for developers/designers

Product Page Anatomy (Exact Element Order)

Based on F-pattern scanning behavior and Gutenberg Diagram research, here is the precise layout that converts:

Above the Fold (Critical Zone)

┌─────────────────────────────────────────────────┐
│  Breadcrumbs (Home > Category > Product)        │
├──────────────────────┬──────────────────────────┤
│                      │  Product Title            │
│                      │  ★★★★★ (127 reviews)     │
│   PRODUCT IMAGES     │                          │
│   (Left Column)      │  $72.00 CAD              │
│                      │  or 4 payments of $18    │
│   • Main image       │                          │
│   • Thumbnail strip  │  Short benefit copy      │
│   • 5-8 images min   │  "Water & sweat resistant│
│   • Zoomable         │   14K gold-filled"       │
│   • Video if possible│                          │
│                      │  [Color: Gold ▼] [Size ▼]│
│                      │                          │
│                      │  ┌──────────────────────┐│
│                      │  │   ADD TO CART         ││
│                      │  │   (Contrasting Color) ││
│                      │  └──────────────────────┘│
│                      │                          │
│                      │  🔒 Secure  🚚 Free $100+│
│                      │  💧 Water Safe  ✓ Hypo   │
│                      │                          │
│                      │  ▸ Materials & Dimensions │
│                      │  ▸ Shipping & Returns     │
│                      │  ▸ Care Instructions      │
└──────────────────────┴──────────────────────────┘

Below the Fold

┌─────────────────────────────────────────────────┐
│  SECTION-SPECIFIC SOCIAL PROOF                  │
│  "This is my everyday necklace!" — Sarah M. ★★★★★│
├─────────────────────────────────────────────────┤
│  FULL REVIEW SECTION                            │
│  Sort by: Most Recent | Highest Rated | Photos  │
│  [Photo reviews grid]                           │
│  [Written reviews with star ratings]            │
├─────────────────────────────────────────────────┤
│  STYLE WITH / COMPLETE THE LOOK                 │
│  [Product carousel - 4-8 related items]         │
├─────────────────────────────────────────────────┤
│  RECENTLY VIEWED (optional)                     │
└─────────────────────────────────────────────────┘

Product Page Rules

  • Images: 5-8 minimum (top brands: 8-12). Two types required: clean neutral background + lifestyle shots showing product in use
  • Product videos: Shoppers who see videos are 144% more likely to add to cart
  • ATC button: Contrasting color, minimum 44x44px, sticky on mobile
  • Trust badges: Place directly below ATC button — this is where hesitation happens
  • Accordions: Let users control detail depth. Include Materials, Shipping, Returns, Care
  • Section-specific proof: Near price → value snippets. Near shipping → delivery satisfaction quotes
  • Cross-sell: "Style With" or "Complete the Look" section increases AOV
  • Price display: Show compare-at strikethrough price when applicable + BNPL messaging

Homepage Design Blueprint

Section Order (Top to Bottom)

1. ANNOUNCEMENT BAR
   - Rotating value props: "Free Shipping $100+" / "Hypoallergenic" / "14K Gold-Filled"
   - NOT carrier info or generic messages

2. NAVIGATION
   - Logo top-left (brand recognition)
   - 5-6 key categories max in header menu
   - Search with predictive results (images + prices)
   - Account + Cart icons

3. HERO SECTION (Above the Fold — Most Critical)
   - Compelling headline addressing visitor's main need
   - Clear subheadline with value proposition
   - Single strong CTA ("Shop Best Sellers" outperforms category-specific)
   - High-quality lifestyle image (not product-on-white)
   - Must answer: "Am I in the right place?" in <5 seconds

4. VALUE PROPOSITION BAR
   - 3-4 icon-based USPs in a horizontal row
   - Examples: 🚚 Free Shipping $100+ | 💧 Water Resistant | ✓ Hypoallergenic | 🔒 Secure Checkout

5. BEST SELLERS GRID (Products Visible Without Clicking!)
   - 4-8 products with: image, title, price, star rating, Quick Add button
   - This is critical — visitors need to see products with prices on the homepage

6. NEW ARRIVALS ROW
   - Carousel or grid of newest products

7. COLLECTION NAVIGATION
   - Category cards with lifestyle imagery
   - "Shop Earrings" / "Shop Necklaces" / "Shop Rings" etc.

8. SOCIAL PROOF SECTION
   - "As Seen In" logos (if applicable)
   - Customer review carousel (best 5-star reviews)
   - Instagram feed embed (#MYMOGANO or branded hashtag)
   - Customer count: "Join 10,000+ customers"

9. ABOUT/BRAND STORY (Brief)
   - 2-3 sentences + founder photo
   - Link to full About page

10. EMAIL CAPTURE
    - Clear incentive (10% off, free shipping, exclusive access)
    - Single email field + CTA

11. FOOTER
    - Quick links: About, FAQ, Shipping, Returns, Contact
    - Payment method icons
    - Social media links
    - Copyright

Homepage Rules

  • Users spend 80% of time above the fold (Nielsen Norman Group)
  • Homepage must communicate: what you sell, who it's for, why choose you
  • Display products with prices on homepage — don't make visitors click to see products
  • Featured promotions/deals go in prime above-the-fold area
  • Keep design clean — more distractions = fewer sales

Landing Page Formula

Landing pages with ONE clear CTA generate 266% more leads than multi-offer pages. Top landing pages hit 10-15% conversion rate.

Anatomy of a High-Converting Landing Page

1. HERO (No Navigation Bar — Top Performers Remove It)
   - Seasonal/contextual hook matching buying intent
   - Single compelling headline
   - Benefit-driven subheadline
   - ONE clear CTA button
   - High-quality hero image/video

2. PROBLEM STATEMENT
   - Address the pain point your product solves
   - Use customer language, not brand language

3. SOLUTION + PRODUCT SHOWCASE
   - How your product solves the problem
   - Key benefits (not features) with icons
   - Product images in use

4. SOCIAL PROOF STACK
   - Star rating + review count
   - 2-3 customer testimonial quotes with photos
   - "As Seen In" logos if applicable

5. PRODUCT DETAILS + BUNDLE OFFER
   - Smart bundles increase AOV 20-34%
   - Pricing with BNPL breakdown
   - Trust badges + guarantees

6. FAQ SECTION
   - Address top 3-5 objections
   - Shipping, returns, materials, sizing

7. URGENCY CLOSE
   - Limited-time offer or low-stock notification
   - Final CTA button (same as hero)
   - Trust badges repeated

Landing Page Rules

  • Remove navigation — focus all attention on the single offer
  • Match the buying intent (gifting, self-care, seasonal, etc.)
  • Problem → Proof → Solution flow
  • Benefit-driven copy, not feature-driven
  • Minimize friction: reduce form fields, simplify choices
  • Ample whitespace — don't clutter

Collection Page Design

Layout Specifications

DESKTOP: 3-4 column grid | 24-36 products per page
MOBILE:  2 column grid   | Same product count with infinite scroll or pagination

Product Card Elements:
┌─────────────────┐
│                  │
│   PRODUCT IMAGE  │ ← Hover: swap to lifestyle/worn image
│   [New] [★ 4.8] │ ← Badge overlay (New, Best Seller, Sale)
│                  │
├─────────────────┤
│ Product Title    │
│ $72.00 CAD       │ ← Strike-through if on sale: $105 → $72
│ ★★★★★ (47)      │
│ [Quick Add]      │ ← For single-variant products
└─────────────────┘

Filtering & Sorting

  • Filters: Price range, material (gold/silver), product type, color, availability
  • Default sort: Best Sellers (strategic — shows social proof)
  • Other sorts: Price low-high, Price high-low, Newest, Rating
  • "Clear All" button for easy filter reset
  • Mobile: Hide filters behind toggle/overlay — don't eat up screen space
  • Collection description at top for SEO context

Collection Page Stats

  • Well-optimized collection pages: 40% more organic traffic, 23% higher CR

Mobile-First Design Rules

Mobile is 70%+ of ecommerce traffic. Design for mobile FIRST, then adapt up.

Thumb Zone

┌─────────────────┐
│   HARD TO REACH  │  ← Logo, search, cart (infrequent taps OK)
│                  │
│  OK TO REACH     │  ← Product info, images, descriptions
│                  │
│  EASY TO REACH   │  ← CTA buttons, navigation, Add to Cart
│   (GREEN ZONE)   │     Place ALL primary actions here
└─────────────────┘

Mobile Specifications

  • Sticky ATC button: Follows scroll on all product pages — mandatory
  • Button minimum: 44x44 pixels for accurate thumb tapping
  • Single-hand use: 61% of users 18-34 say one-handed use matters
  • Image galleries: Must swipe cleanly
  • Filters: Behind toggle overlays, not inline
  • Font size: Minimum 16px body text for readability
  • Forms: Minimize fields, use autofill, mobile payment options

Typography & Color Guidelines

Font Pairing for Jewelry/Fashion Ecommerce

  • Lato Light (headers, larger size) + Lato Regular (body, smaller size)
  • Josefin Sans Light (headers) + Crimson Text (body) — great for jewelry, skincare, makeup
  • Montserrat Bold (headers) + Roboto Regular (body) — better for electronics/industrial

Typography Rules

  • Maximum 2 font families — readability = trust, clarity = credibility
  • Font-display: swap for faster text rendering
  • Body text: 16px minimum on mobile
  • Line height: 1.5 for body copy
  • Reduce total font weight files (each weight = separate download)

Color Psychology

  • 90% of snap judgments about products are based on color alone
  • CTA buttons: Must use contrasting color that pops against page background
  • White/off-white backgrounds: Clean, premium feel for jewelry/fashion
  • Limited accent colors: 1-2 brand accent colors, used sparingly for emphasis
  • Whitespace is a tool: Ample spacing improves readability and highlights key elements
  • As page elements increase from 400 to 6,000, conversion drops 95%

Visual Hierarchy Principles

Scanning Patterns

  • F-Pattern: Users scan horizontally across the top, then down the left side. Place key info top-left.
  • Z-Pattern: For simpler pages — eye goes top-left → top-right → bottom-left → bottom-right
  • Gutenberg Diagram: Primary Optical Area (top-left) → Strong Fallow (top-right) → Weak Fallow (bottom-left) → Terminal Area (bottom-right, where CTA goes)

Hierarchy Rules

  1. One primary action per page section (don't compete for attention)
  2. Size = importance (largest element gets looked at first)
  3. Contrast draws the eye (CTA must contrast with surroundings)
  4. Proximity groups related items (price near ATC, reviews near product)
  5. Whitespace creates focus (cluttered pages convert poorly)
  6. Consistent alignment creates professionalism and trust

Photography Requirements

Product Images (Per Product)

  1. Hero shot: Clean background, front-facing, well-lit
  2. Back/side views: Show all angles
  3. Detail shots: Texture, clasp, engraving, material quality
  4. Scale shot: On model or next to reference object for size context
  5. Lifestyle shots: Product being worn/used in real-life setting
  6. Group shot: Styled with complementary products (drives cross-sell)

Technical Specs

  • High-resolution, zoomable (customers need to inspect details, especially jewelry)
  • Consistent lighting and background across all products
  • Square format (1:1) for Shopify grid consistency
  • Optimized file size (compress without losing quality — use WebP format)
  • Alt text on all images for SEO and accessibility

Design Anti-Patterns (What NOT to Do)

  1. Don't add pop-ups, banner ads, and excessive elements — each distraction reduces conversions
  2. Don't hide products behind clicks — show products with prices on the homepage
  3. Don't use outdated seasonal content — makes the store look abandoned
  4. Don't use more than 2 font families — font bloat kills load speed and looks unprofessional
  5. Don't place CTA buttons at the top of mobile screens — thumbs can't reach there
  6. Don't use generic stock photos — lifestyle shots of real products build trust
  7. Don't bury policies in the footer — shipping, returns, sizing info belongs on product pages
  8. Don't skip mobile testing — 70%+ of your traffic is mobile
  9. Don't use low-contrast CTA colors — the Add to Cart button must visually pop
  10. Don't load 15+ scripts — every script slows the page and kills conversions

Research source: 18 X posts (1,905+ likes) from @adriankuleszo, @dtcpages, @SammyLandix4o, @Hartdrawss + 50+ web pages from Shopify, Baymard Institute, Nielsen Norman Group, OptiMonk, BigCommerce, VWO, GemPages. February 2026.