1. Shopify OS 2.0 (Dawn) Dimensions & Mobile Center-Crop Safe Zones
Mixed supplier aspect ratios cause staggered collection rows on Shopify storefronts, while full-bleed desktop banners lose up to 70% of their horizontal width when cropped into mobile portrait hero containers.
| Storefront Placement | Recommended Pixels | Aspect Ratio | Primary Engineering Constraint |
|---|---|---|---|
| Product Detail & Pinch Zoom | 2048 × 2048 |
1:1 |
Activates crisp Retina zoom without upscaling artifacts |
| Collection Grid Thumbnail | 1200 × 1200 |
1:1 |
Uniform card height across 2-up mobile and 4-up desktop rows |
| Apparel & Fashion Portrait | 1600 × 2000 |
4:5 |
Full-length garment framing with zoom headroom |
| Desktop Hero Banner | 2000 × 800 |
5:2 |
Central 600 px safe width when mobile crops at 3:4 |
// Center-crop safe width on a 2000x800 banner rendered in a 3:4 mobile hero
const safeWidth = Math.min(bannerW, Math.round(bannerH * 0.75)); // 600px
const sideTrim = (bannerW - safeWidth) / 2; // 700px trimmed per side- Shopify Image Size Guide & Safe-Zone Studio — preview Dawn mobile crops and export presets directly.
- Shopify Product Image Resizer — pad, crop, or contain individual hero SKU photos locally.
- Shopify Bulk Image Resizer — batch-pad catalog sets to ZIP with SEO filename prefixes and CSV byte-savings manifests.
2. Amazon Pure White RGB(255, 255, 255) & Etsy Thumbnail Compliance
Amazon Product Detail Page rules require main images on pure white #FFFFFF with the product occupying at least
85% of the frame's longest dimension and zero edge clipping. Studio light falloff around RGB(248, 248, 248)
frequently triggers automated listing suppression.
// Scale detected product bounding box (bboxW x bboxH) to 85% of a 2000x2000 #FFFFFF canvas
const scale = Math.min((2000 * 0.85) / bboxW, (2000 * 0.85) / bboxH);
const drawW = Math.round(bboxW * scale);
const drawH = Math.round(bboxH * scale);
const x = Math.round((2000 - drawW) / 2);
const y = Math.round((2000 - drawH) / 2);3. Downloading & Renaming Supplier Files from Excel / CSV URLs
Vendor catalog spreadsheets typically pair a raw CDN image/PDF URL column with a target SKU column.
When Excel cells wrap links inside clickable =HYPERLINK() formulas, extract raw addresses first, then normalize
reserved OS characters (\ / : * ? " < > |) and deduplicate collisions before streaming into a ZIP archive.
' 4-line Excel VBA UDF to extract raw URLs from clickable cells:
Function GetURL(rng As Range) As String
If rng.Hyperlinks.Count > 0 Then GetURL = rng.Hyperlinks(1).Address
End Function