Hooded Owls — Image Size Guide
🦉 Design Handover

Hooded Owls — Image Size Guide

Extracted from Figma: Hooded Owls UX Design Work ↗  ·  All sizes in px at 1× · Upload at 2× for retina

All image types at a glance

🔍
Hero / Banner
1920 × 700 px
390 × 550 px
Hero
Hero (Category)
1920 × 400 px
390 × 300 px
Hero
Hero (Landing Page)
1920 × 443 px
390 × 312 px
Hero
Split / Half-width Image
960 × 700 px
—
Content
Newsletter / Footer Banner
960 × 800 px
390 × 390 px
Content
Product Card (standard)
414 × 550 px
165 × 208 px
Card
Product Card (wide)
712 × 700 px
—
Card
Collection Grid Tile
461 × 500 px
290 × 240 px
Grid
Product Main Image
715 × 715 px
321 × 384 px
Product
Product Gallery Thumbnail
348 × 346 px
—
Product
Bundle Builder Tile
167 × 167 px
151 × 151 px
Product
Square Content Block
—
390 × 390 px
Content
Review Avatar
96 × 96 px
80 × 80 px
UI
Trust / Partner Logo
122 × 120 px
72 × 72 px
UI
Basket Slider
600 × 980 px
390 × 812 px
Slider

Desktop pages — 1920px viewport

🏠

Home Page

1920px Open in Figma
Hero Banner1920 × 700 px
Split / Half-width Image960 × 700 px
Newsletter / Footer Banner960 × 800 px
Product Card (standard)414 × 550 px
Product Card (wide)712 × 700 px
Review Avatar96 × 96 px
Trust / Partner Logo122 × 120 px
🗂️

Category A Page

1920px Open in Figma
Hero Banner1920 × 400 px
Collection Grid Tile461 × 500 px
Collection Grid (wide)712 × 700 px
Product Card414 × 550 px
Split / Half-width Image960 × 700 px
Newsletter Banner960 × 800 px
Trust / Partner Logo122 × 120 px
🗂️

Category B Page

1920px Open in Figma
Split / Half-width Image960 × 700 px
Product Card414 × 550 px
Newsletter Banner960 × 800 px
Trust / Partner Logo122 × 120 px
📄

Landing Pages (×2 variants)

1920px Open in Figma
Hero Banner (v1)1920 × 443 px
Hero Banner (v2)1920 × 400 px
Collection Grid Tile461 × 400 px
Collection Grid (large)414 × 500 px
Product Card414 × 550 px
Split / Half-width Image960 × 700 px
Newsletter Banner960 × 800 px
Trust / Partner Logo122 × 120 px
🛍️

Product Pages (Bathbomb / Potion Kit / Hooded Owls)

1920px Open in Figma
Featured Product Image715 × 715 px
Gallery Thumbnails348 × 346 px
Split / Half-width Image960 × 700 px
Related Product Cards414 × 550 px
Newsletter Banner960 × 800 px
Trust / Partner Logo122 × 120 px
📦

Bundle Builder Pages (×2 variants)

1920px Open in Figma
Split / Half-width Image960 × 700 px
Product Cards414 × 550 px
Newsletter Banner960 × 800 px
Trust / Partner Logo122 × 120 px
🛒

Basket Page

1920px Open in Figma
Basket Slider (upsell)600 × 980 px
Newsletter Banner960 × 800 px
Trust / Partner Logo122 × 120 px

Mobile pages — 390px viewport

🏠

Mobile Home

390px Open in Figma
Hero Banner390 × 550 px
Product Cards165 × 208 px
Square Content Block390 × 390 px
Newsletter Banner390 × 390 px
Review Avatar72 × 72 px
Trust / Partner Logo72 × 72 px
🗂️

Mobile Category A

390px Open in Figma
Hero Banner390 × 300 px
Collection Grid Tile290 × 240 px
Square Content Block390 × 390 px
Product Cards165 × 208 px
Newsletter Banner390 × 390 px
Trust / Partner Logo72 × 72 px
🗂️

Mobile Category B

390px Open in Figma
Bundle / Product Tile167 × 167 px
Square Content Block390 × 390 px
Product Cards165 × 208 px
Newsletter Banner390 × 390 px
Trust / Partner Logo72 × 72 px
📄

Mobile Landing Pages (×2 variants)

390px Open in Figma
Hero Banner (v1)390 × 312 px
Hero Banner (v2)390 × 300 px
Product Cards165 × 208 px
Square Content Block390 × 390 px
Newsletter Banner390 × 390 px
Trust / Partner Logo72 × 72 px
🛍️

Mobile Product Pages (×3 variants)

390px Open in Figma
Featured Product Image321 × 384 px
Review Avatar80 × 80 px
Related Product Cards165 × 208 px
Square Content Block390 × 390 px
Newsletter Banner390 × 390 px
Trust / Partner Logo72 × 72 px
📦

Mobile Bundle Builder (×3 variants)

390px Open in Figma
Bundle Product Tile151 × 151 px
Square Content Block390 × 390 px
Product Cards165 × 208 px
Newsletter Banner390 × 390 px
Trust / Partner Logo72 × 72 px
🛒

Mobile Basket

390px Open in Figma
Basket Slider (upsell)390 × 812 px
Newsletter Banner390 × 390 px

Proportional size comparison (scaled to fit)

Boxes below are scaled proportionally to show relative sizes. Hover for details.

Desktop Images

Mobile Images

Recommended upload sizes (2× retina-ready)

Upload at these dimensions. Shopify's CDN will serve the correct size per device automatically.

Image Type Upload Size (2×) Aspect Ratio Format
Desktop Hero Banner3840 × 1400 px2.74 : 1.webp / .jpg
Desktop Hero (Category)3840 × 800 px4.8 : 1.webp / .jpg
Desktop Hero (Landing)3840 × 886 px4.33 : 1.webp / .jpg
Desktop Split / Half-width (700h)1920 × 1400 px1.37 : 1.webp / .jpg
Desktop Split / Half-width (800h)1920 × 1600 px1.2 : 1.webp / .jpg
Desktop Product Card (standard)828 × 1100 px0.75 : 1.webp / .jpg
Desktop Product Card (wide)1424 × 1400 px1.02 : 1.webp / .jpg
Desktop Collection Grid Tile922 × 1000 px0.92 : 1.webp / .jpg
Desktop Product Main Image1430 × 1430 px1 : 1.webp / .jpg
Desktop Gallery Thumbnail696 × 692 px1 : 1.webp / .jpg
Bundle Builder Tile (desktop)334 × 334 px1 : 1.webp / .jpg
Mobile Hero Banner780 × 1100 px0.71 : 1.webp / .jpg
Mobile Hero (Category)780 × 600 px1.3 : 1.webp / .jpg
Mobile Product Card330 × 416 px0.79 : 1.webp / .jpg
Mobile Product Main Image642 × 768 px0.84 : 1.webp / .jpg
Mobile Square Block / Newsletter780 × 780 px1 : 1.webp / .jpg
Mobile Bundle Tile302 × 302 px1 : 1.webp / .jpg
Mobile Collection Grid Tile580 × 480 px1.21 : 1.webp / .jpg
Basket Slider (desktop)1200 × 1960 px0.61 : 1.webp / .jpg
Basket Slider (mobile)780 × 1624 px0.48 : 1.webp / .jpg
Review Avatar192 × 192 px1 : 1.webp / .png
Trust / Partner Logo244 × 240 px1 : 1.svg / .webp

Technical notes & best practices

📐 Aspect Ratios

  • Hero banners: ~2.74:1 (desktop), ~0.71:1 (mobile)
  • Product cards: ~0.75:1 (portrait)
  • Product main image: 1:1 (square)
  • Square content blocks: 1:1
  • Gallery thumbnails: ~1:1 (near square)

🖼️ File Formats

  • Photos: use .webp (best compression)
  • Fallback: .jpg for older browsers
  • Logos & icons: .svg preferred
  • Transparent images: .webp or .png

⚡ Performance

  • Keep photos under 500 KB after compression
  • Use TinyPNG or Squoosh to compress
  • Shopify CDN serves responsive sizes automatically
  • Upload at 2× for retina displays

🛍️ Shopify Tips

  • Max upload size: 20 MB per image
  • Shopify auto-generates multiple sizes from your upload
  • Use alt text on all product images for SEO
  • Product images: upload square for consistency

📱 Responsive Strategy

  • Desktop viewport: 1920px
  • Mobile viewport: 390px (iPhone 14 Pro)
  • Tablet: use desktop images, they scale down
  • Hero images need separate mobile crops

🎨 Design System

  • Figma file: Hooded Owls UX Design Work ↗
  • 30 frames across desktop & mobile
  • Consistent product card sizes across all pages
  • Newsletter banner reused on every page
Quick Delivery

Express delivery is available

Free Returns

Return for free within 14 days

Support

Effective and Freindly Support

Safe Shopping

We use the best security features