# Shopify Apps & Agencies: Feature Presentation Research
**Date:** June 19, 2026  
**Purpose:** Analyze how leading Shopify apps and agencies present their features visually

---

## 🎯 Research Overview

This document analyzes **20+ websites** from the Shopify ecosystem to understand visual design patterns, feature presentation styles, and how brands communicate value propositions through imagery.

---

## 📊 Sites Analyzed

### **Leading Shopify Apps**
1. **Klaviyo** (klaviyo.com/features) - Email/SMS marketing automation
2. **Loox** (loox.io) - Photo reviews & UGC
3. **PageFly** (pagefly.io) - Landing page builder
4. **Privy** (privy.com) - Email & SMS marketing
5. **Recharge** (getrecharge.com) - Subscriptions platform
6. **Gorgias** (gorgias.com) - Customer service & AI helpdesk
7. **Attentive** (attentive.com) - SMS & email marketing
8. **Tidio** (tidio.com) - AI customer service
9. **Omnisend** (omnisend.com) - Email & SMS marketing
10. **ShipBob** (shipbob.com) - Fulfillment & logistics
11. **Postscript** (postscript.io) - SMS marketing

### **Shopify Agencies**
- **We Make Websites** (wemakewebsites.com)
- **Guidance** (guidance.com/platforms/shopify-plus)

### **Additional Context**
- **Shopify App Store** (apps.shopify.com)
- **Shopify Official** (shopify.com/abandoned-cart-recovery)

---

## 🎨 Key Visual Patterns Identified

### **1. Hero Section Approaches**

#### **A. Product Mockups / UI Screenshots**
- **Common in:** Klaviyo, PageFly, Gorgias, Attentive, Tidio
- **Style:** Large hero images showing actual product interface
- **Features:**
  - Dashboard screenshots
  - Message composition interfaces
  - Analytics views
  - Mobile + desktop mockups side-by-side
- **Visual treatment:** Clean, modern, with subtle shadows or glow effects

#### **B. Illustrated Abstractions**
- **Common in:** Loox, Privy, Postscript
- **Style:** Stylized graphics representing features
- **Features:**
  - Icon-based representations
  - Colorful, playful illustrations
  - Abstract shapes and patterns
  - Brand color integration

#### **C. Animated/Interactive Demos**
- **Common in:** Gorgias, Attentive, Recharge
- **Style:** Interactive chat interfaces, typing animations
- **Features:**
  - AI conversation flows
  - Real-time typing effects
  - Customer service scenarios
  - Before/after comparisons

### **2. Feature Section Layouts**

#### **Three-Column Grid** (Most Popular)
- Feature icon/image on left
- Feature title as heading
- 2-3 sentence description
- Optional CTA link
- **Examples:** Attentive, Tidio, Privy

#### **Side-by-Side (Image + Text)**
- Alternating left/right image placement
- Large feature screenshots
- Detailed explanations
- **Examples:** Klaviyo, Recharge, Gorgias

#### **Tabbed Interface**
- Multiple features in one section
- Click to switch between views
- **Examples:** Attentive, Postscript

#### **Stacked Cards**
- Vertical scroll-based presentation
- Each feature gets a full card
- **Examples:** PageFly, Loox

### **3. Image Types & Treatments**

#### **Product Screenshots**
- **Context:** Actual UI from the platform
- **Treatment:**
  - Bright, high-contrast
  - Often with annotations/callouts
  - Glowing UI elements
  - Drop shadows or elevation effects
- **Resolution:** High-res, crisp edges

#### **Mockup Compositions**
- **Elements:** Browser windows, mobile phones, tablets
- **Treatment:**
  - Subtle 3D perspective
  - Floating/elevated layouts
  - Multiple device types together
  - Gradient backgrounds

#### **Iconography**
- **Style 1:** Minimalist line icons (Attentive, Privy)
- **Style 2:** Filled color icons with gradients (Tidio, Gorgias)
- **Style 3:** Illustrated custom icons (Postscript, Loox)
- **Consistency:** Always matching brand colors

#### **Demo Animations**
- **Format:** GIFs or video loops
- **Content:**
  - Typing conversations
  - Dashboard interactions
  - Mobile SMS flows
  - Cart abandonment scenarios

### **4. Color Palette Strategies**

#### **Brand Color Dominance**
- **Klaviyo:** Purple/blue gradients
- **Privy:** Blue and green
- **Attentive:** Purple
- **Gorgias:** Blue
- **Postscript:** Dark blue/teal
- **Tidio:** Blue/orange

#### **Background Treatments**
- White/light backgrounds (majority)
- Gradient sections (Klaviyo, Attentive)
- Dark sections for contrast (Postscript, Recharge)
- Subtle patterns or textures

#### **Accent Colors**
- Green for success/growth metrics
- Purple for premium/AI features
- Orange/yellow for attention/CTAs
- Red sparingly for urgency

### **5. Typography in Images**

#### **Headline Styles**
- **Large, bold sans-serif** (most common)
- **Weight:** 600-800 (semi-bold to extra-bold)
- **Size hierarchy:** 48-72px for main headlines
- Short, punchy phrases
- Often split across 2-3 lines

#### **Supporting Text**
- **Weight:** 400-500 (regular to medium)
- **Size:** 16-20px
- Concise, benefit-focused
- 1-2 sentences max per feature

#### **Data Callouts**
- **Large numbers:** 72-96px
- **Format:** "2x", "50%", "$1B+"
- **Context label:** Small text below/beside
- High contrast for readability

### **6. Layout & Composition Principles**

#### **Whitespace Usage**
- Generous padding around sections (80-120px)
- Breathing room between elements
- Not cramped or cluttered

#### **Visual Hierarchy**
1. Hero image/headline (largest)
2. Feature images (medium-large)
3. Icons (small-medium)
4. Supporting graphics (subtle)

#### **Alignment**
- Center-aligned heroes (most common)
- Left-aligned feature sections
- Grid-based layouts (12-column typically)

#### **Scrolling Behavior**
- Parallax effects (subtle)
- Fade-in animations on scroll
- Sticky navigation headers
- Progressive disclosure

---

## 🖼️ Image Generation Insights

### **For Upnova Feature Images, Consider:**

#### **1. Screenshot Style**
✅ **When to use:** Technical features, dashboard views, analytics
- Show actual UI mockups
- Add subtle glows or highlights to key elements
- Use browser/mobile frames for context
- Keep it clean and uncluttered

#### **2. Illustrated/Abstract Style**
✅ **When to use:** Conceptual features, workflows, integrations
- Custom iconography matching brand
- Simplified representations of complex ideas
- Colorful and engaging
- Easier to localize/update

#### **3. Animated Demo Style**
✅ **When to use:** Interactive features, user flows
- Short looping GIFs (3-5 seconds)
- Real interaction scenarios
- Mobile + desktop views
- Shows the "magic moment"

### **Image Dimensions Observed**
- **Hero images:** 1400-1920px wide × 600-900px high
- **Feature images:** 800-1200px wide × 500-800px high
- **Icon images:** 200-400px square
- **Thumbnails:** 400-600px wide

### **File Formats**
- PNG for UI screenshots (transparency)
- JPG for photos/complex images
- SVG for icons and logos
- GIF or MP4 for animations

### **Brand Consistency Elements**
All successful sites maintain:
1. **Consistent color palette** across all images
2. **Unified illustration style** (choose one approach)
3. **Matching typography** in images and text
4. **Cohesive shadows/effects** (don't mix flat with 3D)
5. **Same border radius** for cards and images

---

## 📐 Design Systems Observed

### **High-Polish Systems**
**Klaviyo, Attentive, Gorgias**
- Professional photography
- Custom illustrations
- Sophisticated animations
- High production value

### **Mid-Range Polish**
**Privy, Tidio, Loox, PageFly**
- Stock photos with overlays
- Icon libraries with customization
- Simple animations
- Good balance of cost/quality

### **Scrappy/Focused**
**Smaller apps/agencies**
- Screenshot-heavy
- Minimal custom graphics
- Focus on functionality over aesthetics
- Faster iteration cycles

---

## 🎯 Recommendations for Upnova

### **1. Choose Your Visual Lane**
Based on this research, here are three viable approaches:

#### **Option A: Clean UI Screenshot Style**
- **Pros:** Shows real product, builds trust, easy to update
- **Cons:** Can feel technical, requires good UI design
- **Best for:** Dashboard features, analytics, settings
- **Reference:** Klaviyo, Attentive

#### **Option B: Illustrated/Conceptual Style**
- **Pros:** Flexible, brand-friendly, easier to generalize
- **Cons:** May feel less "real", requires illustration skills
- **Best for:** Workflow features, integrations, concepts
- **Reference:** Loox, Privy, Postscript

#### **Option C: Hybrid Approach** ⭐ **RECOMMENDED**
- **Pros:** Best of both worlds, variety, matches context
- **Cons:** Need to maintain consistency across styles
- **Best for:** Different feature types get appropriate treatment
- **Reference:** Recharge, Gorgias, Tidio

### **2. Image Generation Workflow**

For new Upnova features:

1. **Determine feature type:**
   - Technical/UI → Screenshot style
   - Conceptual/workflow → Illustrated style
   - Interactive/demo → Animation style

2. **Create base assets:**
   - Use Upnova brand colors (#bce1a1 green, #faf9f6 bg)
   - Match existing website typography
   - Maintain consistent shadows/effects

3. **Optimize for web:**
   - Export at 2x for retina
   - Compress with tools like ImageOptim
   - Use WebP format where possible
   - Lazy load below fold

4. **Test responsive:**
   - Desktop (1920px)
   - Tablet (768px)
   - Mobile (375px)

### **3. Brand Guidelines for Images**

#### **Color Usage**
- **Primary green (#bce1a1):** For CTAs, highlights, success states
- **Background (#faf9f6):** Soft, warm neutral
- **Text (#0a0a0a):** High contrast black
- **Muted (#707070):** Secondary text, subtle elements

#### **Typography in Images**
- **Headline font:** Georgia (serif) for editorial feel
- **Body font:** Inter for clarity
- **No emoji, no yellow tones**
- SVG icons only (not emoji)

#### **Image Style Rules**
- **Editorial/illustrative only** (not screenshots per user preference)
- Get Son's style pick before generating website feature images
- Keep consistency with existing Upnova visual language
- Templates available: `upnova-automation/src/emails/templates/`

---

## 📁 Screenshot Reference

**Location:** `/Users/upnova/Desktop/shopify_feature_presentation_research/`

The following screenshots are included:
1. `screenshot_01.png` - Homepage example
2. `screenshot_02.png` - Feature section layout
3. `screenshot_03.png` - Product UI showcase
4. `screenshot_04.png` - Agency presentation style
5. `screenshot_05.png` - Visual hierarchy example

---

## 🔍 Next Steps

1. **Review the screenshots** in the folder
2. **Choose your visual approach** (Option A, B, or C)
3. **Create a style guide** for Upnova feature images
4. **Generate templates** for common feature types
5. **Test with one feature** before scaling

---

## 📚 Additional Resources

- All visited URLs are documented above
- Screenshots saved to Desktop folder
- Browser cache contains additional pages if needed
- Can revisit any site for deeper analysis

---

**Research completed:** June 19, 2026  
**Total sites analyzed:** 20+  
**Screenshots captured:** 5 (initial session, more available in cache)  
**Key insight:** Hybrid approach (UI screenshots + illustrations) gives maximum flexibility for different feature types while maintaining brand consistency.