Design & Content Experimentation for Shopify Themes

Great Shopify themes aren't born — they're refined through experimentation. This chapter teaches you the professional techniques developers use to test, iterate, and perfect theme designs. You'll learn how to create demo content, test layout variations, and make data-informed design decisions.

📌 Chapter Overview

Time estimate: 60 – 90 minutes
Tags: CSS UX Design

Why Design Experimentation Matters

Amateur developers build a feature once and ship it. Professional developers build three variations, test them, and ship the best one. Experimentation is what separates functional themes from premium-quality themes.

Experimentation helps you:

Discover better solutions — Your first idea is rarely your best idea
Build a design intuition — Pattern recognition comes from seeing many variations
Justify decisions — "I chose this layout because I tested three options and this one performed best"
Speed up future work — Once you've tested patterns, you know what works
Impress clients — Showing multiple options demonstrates professionalism

✅ The Experiment Branch Workflow

Always use Git branches for design experiments. Create a branch like experiment/hero-v2, try your ideas, and compare them against the current version. If the experiment wins, merge it. If not, you haven't broken anything. This is how professional teams work.

Creating Realistic Demo Content

Your theme is only as good as the content it showcases. Testing with "Lorem ipsum" and placeholder squares gives you a false picture. Here's how professionals create demo content:

Product Catalog Strategy

Create a diverse product catalog that tests edge cases:

Product Type	Why You Need It	What It Tests
Product with long title	Tests text overflow and wrapping	"Premium Organic Extra-Virgin Cold-Pressed Olive Oil Gift Set — Family Edition"
Product with short title	Tests alignment with other cards	"T-Shirt"
Product on sale	Tests compare-at price, sale badge	Set compare-at $80, price $49
Product with many variants	Tests variant selector, swatch overflow	5 colors × 6 sizes = 30 variants
Product with single variant	Tests hidden variant selector	One-size item
Sold-out product	Tests sold-out badge, disabled button	Set inventory to 0
High-price product	Tests price formatting, layout	$1,299.99
Free product	Tests $0.00 display	Set price to $0
Product with many images	Tests gallery performance, thumbnails	8–10 product images
Product with one image	Tests no-secondary-image hover	Single product image
Product with no image	Tests placeholder display	No images uploaded
Product with long description	Tests content overflow, tab behavior	2000+ characters with formatting

Image Sources for Demo Content

Use these free, legal image sources for your development stores:

📸

Burst by Shopify

burst.shopify.com — Free stock photos specifically for eCommerce. Categories include fashion, beauty, food, tech, and more. No attribution required.

🖼️

Unsplash

unsplash.com — High-quality, free-to-use photos. Great for lifestyle images, hero banners, and background images. No attribution required for most uses.

🎨

Pexels

pexels.com — Free stock photos and videos. Great variety for product mockups, lifestyle shots, and model photography.

🧊

Shopify Placeholder SVGs

Built into Liquid: {{ 'product-1' | placeholder_svg_tag }}. Perfect for development when you need quick placeholder images without downloading anything.

💡 Create Multiple Demo Stores

Professional theme developers create multiple development stores, each with a different niche: fashion, electronics, food, beauty, furniture. This lets you test how your theme looks across different product types and photography styles. Shopify Partner accounts allow unlimited free dev stores.

Collection Structure for Testing

Create these collections in your development store:

All Products — Auto-generated, tests large grids and pagination
New Arrivals — 8–12 products, tests standard collection page
Best Sellers — 6–8 products, tests featured collection sections
Sale — Products with compare-at prices, tests sale displays
Single Product Collection — Just 1 product, tests edge cases
Empty Collection — No products, tests empty state handling
Large Collection — 50+ products, tests pagination and performance

Homepage Layout Experiments

The homepage is your theme's first impression. Professional developers test multiple homepage compositions before settling on a default. Here are proven homepage patterns to experiment with:

Pattern 1: Hero-First (Most Common)

Homepage Layout

┌─────────────────────────────────────────────┐
│           ANNOUNCEMENT BAR                  │
├─────────────────────────────────────────────┤
│              HEADER / NAV                   │
├─────────────────────────────────────────────┤
│                                             │
│          HERO BANNER (full width)           │
│     Heading + Subtext + CTA Button          │
│                                             │
├─────────────────────────────────────────────┤
│    🚚 Free Shipping  │  🔒 Secure  │  ↩️    │
│     VALUE PROPOSITION BAR                   │
├─────────────────────────────────────────────┤
│         FEATURED COLLECTION GRID            │
│   ┌───┐  ┌───┐  ┌───┐  ┌───┐              │
│   │   │  │   │  │   │  │   │              │
│   └───┘  └───┘  └───┘  └───┘              │
├─────────────────────────────────────────────┤
│     IMAGE WITH TEXT (split layout)          │
│  ┌──────────┐  ┌──────────────────┐        │
│  │  IMAGE   │  │  Text + CTA      │        │
│  └──────────┘  └──────────────────┘        │
├─────────────────────────────────────────────┤
│       SECOND COLLECTION GRID                │
├─────────────────────────────────────────────┤
│         TESTIMONIALS CAROUSEL               │
├─────────────────────────────────────────────┤
│           NEWSLETTER SIGNUP                 │
├─────────────────────────────────────────────┤
│               FOOTER                        │
└─────────────────────────────────────────────┘

Pattern 2: Product-First (Conversion-Focused)

Homepage Layout

┌─────────────────────────────────────────────┐
│           ANNOUNCEMENT BAR                  │
├─────────────────────────────────────────────┤
│              HEADER / NAV                   │
├─────────────────────────────────────────────┤
│  SLIM HERO (shorter, with category links)   │
├─────────────────────────────────────────────┤
│         COLLECTION LIST (tiles)             │
│   ┌─────────┐  ┌─────────┐  ┌─────────┐   │
│   │ Women's │  │  Men's  │  │  Kids   │   │
│   └─────────┘  └─────────┘  └─────────┘   │
├─────────────────────────────────────────────┤
│      BEST SELLERS GRID (8 products)         │
├─────────────────────────────────────────────┤
│          PROMOTIONAL BANNER                 │
├─────────────────────────────────────────────┤
│       NEW ARRIVALS GRID (4 products)        │
├─────────────────────────────────────────────┤
│          BRAND LOGO LIST                    │
├─────────────────────────────────────────────┤
│               FOOTER                        │
└─────────────────────────────────────────────┘

Pattern 3: Story-First (Brand-Focused)

Homepage Layout

┌─────────────────────────────────────────────┐
│              HEADER / NAV                   │
├─────────────────────────────────────────────┤
│                                             │
│       FULL-SCREEN VIDEO HERO               │
│                                             │
├─────────────────────────────────────────────┤
│       RICH TEXT (brand mission)             │
├─────────────────────────────────────────────┤
│       IMAGE WITH TEXT (story)               │
├─────────────────────────────────────────────┤
│      FEATURED PRODUCT (single hero)         │
├─────────────────────────────────────────────┤
│      IMAGE WITH TEXT (reversed)             │
├─────────────────────────────────────────────┤
│      TESTIMONIALS                           │
├─────────────────────────────────────────────┤
│      INSTAGRAM FEED                         │
├─────────────────────────────────────────────┤
│               FOOTER                        │
└─────────────────────────────────────────────┘

💡 Test With JSON Templates

Create alternate index templates to quickly test different homepage layouts: templates/index.json (default), templates/index.hero-first.json, templates/index.product-first.json. Each references different sections in different orders. Switch between them in the Shopify admin to compare.

Product Grid Experiments

The product grid is the most critical eCommerce layout. Small changes have big impacts on browsing experience and conversion. Here's what to test:

Column Count Testing

Columns	Best For	Trade-offs	Breakpoint Strategy
2 columns	Luxury, large product images, minimal stores	Less products visible, more scrolling	2 → 2 → 1 (desktop → tablet → mobile)
3 columns	Most stores, balanced visibility	Good compromise between image size and density	3 → 2 → 2 (desktop → tablet → mobile)
4 columns	Large catalogs, browsing-focused stores	More products visible, smaller images	4 → 3 → 2 (desktop → tablet → mobile)
5 columns	Marketplace-style, catalog-heavy stores	Very dense, small images, text hard to read	5 → 3 → 2 (desktop → tablet → mobile)

Product Card Variations to Test

Product Card Experiment Ideas

VARIATION A: Minimal Card
┌─────────────────┐
│                  │
│    [Product      │
│     Image]       │
│                  │
├─────────────────┤
│ Product Title    │
│ $49.00           │
└─────────────────┘

VARIATION B: Info-Rich Card
┌─────────────────┐
│  [SALE -20%]     │
│    [Product      │
│     Image]       │
│   [Quick Add]    │
├─────────────────┤
│ VENDOR NAME      │
│ Product Title    │
│ $̶6̶0̶ $49.00       │
│ ★★★★☆ (23)      │
│ ⬤ ⬤ ⬤ +2 colors │
└─────────────────┘

VARIATION C: Overlay Card
┌─────────────────┐
│                  │
│    [Product      │
│     Image]       │
│                  │
│  ┌─────────────┐│
│  │Title  $49.00││
│  └─────────────┘│
└─────────────────┘

VARIATION D: Horizontal Card
┌──────────┬──────────────────┐
│ [Image]  │ Title            │
│          │ $49.00           │
│          │ [Add to Cart]    │
└──────────┴──────────────────┘

Each variation serves a different purpose. Minimal cards let images speak. Info-rich cards reduce product page visits. Overlay cards create a gallery feel. Test multiple styles and observe how they affect browsing behavior.

Image Aspect Ratio Testing

Ratio	CSS	Best For	Feel
Square (1:1)	`aspect-ratio: 1/1`	Instagram-style, consistent grids	Modern, clean, uniform
Portrait (3:4)	`aspect-ratio: 3/4`	Fashion, apparel, beauty	Elegant, editorial
Tall Portrait (2:3)	`aspect-ratio: 2/3`	Fashion lookbooks, tall products	Magazine-like, dramatic
Landscape (4:3)	`aspect-ratio: 4/3`	Electronics, home goods, food	Practical, product-focused
Adaptive	`aspect-ratio: auto`	Mixed product types	Natural but uneven grid

Typography Experiments

Typography is responsible for roughly 90% of eCommerce design. Testing different type combinations dramatically changes the feel of your theme.

Font Pairing Strategies

Heading Font	Body Font	Vibe	Best For
Playfair Display	Source Sans Pro	Elegant, luxurious	Fashion, jewelry, beauty
Montserrat	Open Sans	Modern, clean	General purpose, tech
Oswald	Lato	Bold, athletic	Sports, outdoor, fitness
Cormorant Garamond	Proza Libre	Classic, refined	Wine, artisan, heritage brands
DM Sans	DM Sans	Minimal, contemporary	Minimalist, modern brands
Inter	Inter	Neutral, professional	Any niche, safe default

Typography Scale Testing

Professional themes use a consistent type scale. Here's a recommended scale to start with and adjust:

Typography Scale (CSS Custom Properties)

:root {
  /* Modular scale ratio: 1.25 (Major Third) */
  --font-size-xs: 0.75rem;    /* 12px — captions, badges */
  --font-size-sm: 0.875rem;   /* 14px — small text, meta info */
  --font-size-base: 1rem;     /* 16px — body text */
  --font-size-md: 1.125rem;   /* 18px — lead text */
  --font-size-lg: 1.25rem;    /* 20px — h4, card titles */
  --font-size-xl: 1.5rem;     /* 24px — h3 */
  --font-size-2xl: 1.875rem;  /* 30px — h2 */
  --font-size-3xl: 2.25rem;   /* 36px — h1 on content pages */
  --font-size-4xl: 3rem;      /* 48px — hero headings */
  --font-size-5xl: 3.75rem;   /* 60px — large hero headings */

  /* Line heights */
  --line-height-tight: 1.2;    /* Headings */
  --line-height-snug: 1.4;     /* Sub-headings */
  --line-height-normal: 1.6;   /* Body text */
  --line-height-relaxed: 1.8;  /* Long-form content */

  /* Letter spacing */
  --tracking-tight: -0.025em;  /* Large headings */
  --tracking-normal: 0;        /* Body text */
  --tracking-wide: 0.05em;     /* Uppercase labels */
  --tracking-wider: 0.1em;     /* Nav items, badges */
}

✅ Typography Testing Checklist

When testing typography, check these scenarios:
□ Headings at all 6 levels (h1–h6)
□ Body text in paragraphs (readability at 60–75 characters per line)
□ Product titles at different lengths
□ Price display at different values ($9.99 vs. $1,299.99)
□ Navigation menu with varying text lengths
□ Mobile readability (minimum 16px body text)
□ Contrast ratios (use Chrome DevTools accessibility checker)

Color Palette Experiments

eCommerce color palettes should be intentional. Every color serves a function:

Functional Color System

eCommerce Color System

/* Primary brand color — CTAs, links, accents */
--color-primary: #6366f1;

/* Secondary — complementary actions, tags */
--color-secondary: #8b5cf6;

/* Backgrounds */
--color-bg-primary: #ffffff;          /* Main background */
--color-bg-secondary: #f8f9fb;       /* Alternate sections */
--color-bg-tertiary: #f1f3f5;        /* Cards, inputs */

/* Text */
--color-text-primary: #1a1a2e;       /* Headings, strong text */
--color-text-secondary: #4a5568;     /* Body text */
--color-text-tertiary: #9ca3af;      /* Meta info, captions */

/* Functional colors — DON'T make these brand colors */
--color-sale: #ef4444;               /* Sale prices, sale badges */
--color-success: #10b981;            /* In stock, success states */
--color-warning: #f59e0b;            /* Low stock, warnings */
--color-error: #ef4444;              /* Errors, out of stock */
--color-info: #3b82f6;               /* Info messages */

/* Border */
--color-border: #e5e7eb;             /* Dividers, card borders */

Testing Multiple Color Schemes

Premium themes offer multiple color schemes per section. Here's how to implement this in your theme settings:

Color Scheme Settings Pattern

{%- comment -%}
  Define color schemes in settings_schema.json,
  then apply them via CSS classes on sections
{%- endcomment -%}

{%- style -%}
  .color-scheme-1 {
    --scheme-bg: {{ settings.scheme_1_background }};
    --scheme-text: {{ settings.scheme_1_text }};
    --scheme-accent: {{ settings.scheme_1_accent }};
    background-color: var(--scheme-bg);
    color: var(--scheme-text);
  }

  .color-scheme-2 {
    --scheme-bg: {{ settings.scheme_2_background }};
    --scheme-text: {{ settings.scheme_2_text }};
    --scheme-accent: {{ settings.scheme_2_accent }};
    background-color: var(--scheme-bg);
    color: var(--scheme-text);
  }

  .color-scheme-3 {
    --scheme-bg: {{ settings.scheme_3_background }};
    --scheme-text: {{ settings.scheme_3_text }};
    --scheme-accent: {{ settings.scheme_3_accent }};
    background-color: var(--scheme-bg);
    color: var(--scheme-text);
  }
{%- endstyle -%}

💡 Color Contrast Is Non-Negotiable

Every text/background combination must meet WCAG AA contrast ratios: 4.5:1 for body text, 3:1 for large text. Use WebAIM's Contrast Checker to verify. Poor contrast isn't just an accessibility issue — it directly affects readability and conversion rates.

Navigation is one of the most impactful elements to test. Even small changes can significantly affect how customers find products.

Header Layout Experiments

LAYOUT A: Logo Left (Most Common)
┌──────────────────────────────────────────────┐
│ [Logo]  Home  Shop  About  Contact  🔍 👤 🛒│
└──────────────────────────────────────────────┘

LAYOUT B: Logo Center
┌──────────────────────────────────────────────┐
│ Home  Shop  About  [Logo]  Blog  FAQ  🔍 🛒│
└──────────────────────────────────────────────┘

LAYOUT C: Logo Center, Nav Below
┌──────────────────────────────────────────────┐
│              [Logo]            🔍 👤 🛒      │
├──────────────────────────────────────────────┤
│    Home    Shop    About    Blog    Contact   │
└──────────────────────────────────────────────┘

LAYOUT D: Two-Row with Features
┌──────────────────────────────────────────────┐
│ 📧 contact@store.com    Free shipping over $50│
├──────────────────────────────────────────────┤
│ [Logo]  Home  Shop  About  Contact  🔍 👤 🛒│
└──────────────────────────────────────────────┘

Mobile Navigation Patterns to Test

Slide-from-left drawer — Most common, familiar to users
Slide-from-right drawer — Less common, feels cart-adjacent
Full-screen overlay — Dramatic, focuses attention completely
Bottom sheet (slide up) — Thumb-friendly, modern feel
Accordion nested levels — Good for deep menus

Hero Banner Experiments

The hero banner is the most visible section. Test these variations:

Variation Ideas

Variation	Description	When to Use
Full-bleed image	Image covers entire viewport width and ~60% height, text overlay	Strong product photography
Split hero	50/50 split — text on left, image on right (or vice versa)	When text content is important
Video hero	Auto-playing muted video as background	Lifestyle brands, immersive storytelling
Slideshow	Multiple slides with auto-rotation	Multiple promotions or categories
Minimal hero	Text only, solid color background, no image	Minimalist brands, text-focused messaging
Hero with product grid below	Slim hero banner with product grid immediately below	Conversion-focused, returning customers
Parallax hero	Background image moves slower than foreground on scroll	Dramatic effect for premium brands

Responsive Breakpoint Testing

Every layout decision must be tested across devices. Here's a professional testing strategy:

Recommended Breakpoints

Breakpoint System

/* Mobile-first approach */

/* Small mobile: 320px – 479px */
/* Default styles target this range */

/* Large mobile: 480px – 749px */
@media (min-width: 480px) { }

/* Tablet: 750px – 999px */
@media (min-width: 750px) { }

/* Small desktop: 1000px – 1199px */
@media (min-width: 1000px) { }

/* Desktop: 1200px – 1399px */
@media (min-width: 1200px) { }

/* Large desktop: 1400px+ */
@media (min-width: 1400px) { }

/* Dawn's breakpoints (for reference):
   - 750px: mobile → tablet
   - 990px: tablet → desktop
*/

Device Testing Checklist

Responsive Testing Checklist

TEST EVERY PAGE AT THESE WIDTHS:
═════════════════════════════════

□ 320px  — iPhone SE (smallest common phone)
□ 375px  — iPhone 12/13/14
□ 414px  — iPhone 14 Plus
□ 390px  — iPhone 14 Pro
□ 768px  — iPad portrait
□ 1024px — iPad landscape
□ 1280px — Common laptop
□ 1440px — Standard desktop
□ 1920px — Large monitor

FOR EACH WIDTH, CHECK:
═════════════════════════════════

□ Text is readable (no overflow, no tiny text)
□ Images aren't stretched or cropped badly
□ Buttons are tappable (minimum 44x44px touch target)
□ Navigation is usable
□ Product grid adapts columns correctly
□ No horizontal scrollbar appears
□ Forms are usable (inputs aren't too small)
□ Spacing feels balanced (not too cramped or too sparse)
□ Modal/drawer overlays cover correctly
□ Sticky elements don't overlap content

💡 Chrome DevTools Device Mode

Press F12 → click the device toolbar icon (or Ctrl+Shift+M). Select preset devices or enter custom dimensions. Enable "responsive" mode and drag the viewport width to find where your design breaks. Fix those breakpoints first — they're more important than fitting specific device widths.

Spacing and Whitespace Experiments

Whitespace is the most underappreciated design tool. Premium themes use generous whitespace to create elegance and focus attention.

Spacing Scale

Spacing Scale (CSS Custom Properties)

:root {
  /* 4px base unit — all spacing is a multiple of 4 */
  --space-1: 0.25rem;   /* 4px  — tight gaps */
  --space-2: 0.5rem;    /* 8px  — inline spacing */
  --space-3: 0.75rem;   /* 12px — compact spacing */
  --space-4: 1rem;      /* 16px — default spacing */
  --space-5: 1.25rem;   /* 20px — comfortable spacing */
  --space-6: 1.5rem;    /* 24px — section inner padding */
  --space-8: 2rem;      /* 32px — component gaps */
  --space-10: 2.5rem;   /* 40px — section padding */
  --space-12: 3rem;     /* 48px — large section gaps */
  --space-16: 4rem;     /* 64px — section separation */
  --space-20: 5rem;     /* 80px — major section breaks */
  --space-24: 6rem;     /* 96px — dramatic spacing */
}

Test these spacing experiments:

Section padding: Try 40px, 60px, 80px, and 100px vertical padding between sections
Grid gaps: Test 16px, 20px, 24px, and 32px between product cards
Container width: Try 1200px, 1320px, and 1440px max content width
Card padding: Test 16px, 20px, and 24px internal card padding
Text spacing: Test paragraph margin-bottom at 1rem, 1.25rem, and 1.5rem

Complete Experiment Workflow

Define the Hypothesis

"I think a 3-column product grid with portrait (3:4) images will look more premium than the current 4-column square grid."

Create an Experiment Branch

WSL Terminal

git checkout -b experiment/portrait-grid

Build the Variation

Implement the change. Test with your demo products. View on multiple screen sizes.

Compare Side by Side

Switch between main and experiment/portrait-grid branches. Take screenshots of both. Compare them at the same viewport widths.

Decide and Merge (or Discard)

If the experiment wins

git checkout main
git merge experiment/portrait-grid
git branch -d experiment/portrait-grid

If the experiment loses

git checkout main
git branch -D experiment/portrait-grid

Key Takeaways

Create realistic demo content with diverse product types and edge cases
Use Burst, Unsplash, and Pexels for free, legal demo images
Test multiple homepage layout compositions before settling on a default
Experiment with product grid columns, card designs, and image aspect ratios
Test at least 3 font pairings before committing to typography
Build a functional color system — not just pretty colors
Test multiple header layout variations and mobile nav patterns
Create hero banner variations for different use cases
Test at all common device widths — find where your design breaks
Use a consistent spacing scale based on a 4px unit
Use Git branches for every experiment — compare, decide, merge or discard
Create multiple dev stores for different niches (fashion, tech, food)

← Previous Premium Theme Analysis Next Chapter → Performance Optimization

Design & Content Experimentation for Shopify Themes

Why Design Experimentation Matters

Creating Realistic Demo Content

Product Catalog Strategy

Image Sources for Demo Content

Burst by Shopify

Unsplash

Pexels

Shopify Placeholder SVGs

Collection Structure for Testing

Homepage Layout Experiments

Pattern 1: Hero-First (Most Common)

Pattern 2: Product-First (Conversion-Focused)

Pattern 3: Story-First (Brand-Focused)

Product Grid Experiments

Column Count Testing

Product Card Variations to Test

Image Aspect Ratio Testing

Typography Experiments

Font Pairing Strategies

Typography Scale Testing

Color Palette Experiments

Functional Color System

Testing Multiple Color Schemes

Navigation Structure Experiments

Header Layout Variations

Mobile Navigation Patterns to Test

Hero Banner Experiments

Variation Ideas

Responsive Breakpoint Testing

Recommended Breakpoints

Device Testing Checklist

Spacing and Whitespace Experiments

Spacing Scale

Complete Experiment Workflow

Define the Hypothesis

Create an Experiment Branch

Build the Variation

Compare Side by Side

Decide and Merge (or Discard)

Key Takeaways