Using the correct image dimensions ensures your shop loads quickly, looks professional, and scores well in Lighthouse audits. This guide reflects how your templates actually render images, not theoretical ratios.
Follow these sizes for consistency across all stores built with eBuilder.
Hero Section Image (Shop Homepage)
Configured in Shop Settings → Hero Section → hero_image
Your hero is a two-column layout:
-
Text on the left
-
Image on the right
-
Or text only
It is not a full-width banner.
Recommended Size
1200 × 1200 pixels
Aspect ratio: 1:1 (square)
Alternative option:
1000 × 1200 pixels (soft portrait)
Why This Works
Because the image sits in a column:
-
Square images balance the text
-
The hero does not become too tall
-
Mobile stacking remains clean
-
Cropping is predictable
Do not use 16:9 images for this layout. They are designed for full-width banners and will not look correct here.
Open Graph (Social Sharing) Image
Configured in Site Settings → Default OG Image
Recommended Size
1200 × 630 pixels
Aspect ratio: 1.91:1
This image is used for:
-
Facebook
-
LinkedIn
-
X
-
Messaging previews
It is not displayed in your page layout.
Do not reuse this size for hero images.
Product Grid Images (Shop Cards)
From your featured products template
Lighthouse confirmed the rendered product image space is:
Recommended Size
413 × 637 pixels
Aspect ratio: 2:3 (portrait)
This size prevents:
-
Oversized images being scaled down
-
Unnecessary bandwidth use
-
Lighthouse image optimisation penalties
Upload images close to this size for best performance.
You may upload slightly larger (for example 826 × 1274) for retina clarity, but avoid excessively large source files.
Product Spotlight Image (Two-Column Section)
Configured in Shop Settings → Product Spotlight → spotlight_image
Rendered via two-column template
Recommended Size
1200 × 800 pixels
Aspect ratio: 3:2
This maintains:
-
Visual balance with adjacent text
-
Clean desktop alignment
-
Proper mobile stacking
Avoid square images in this section as they can appear heavy.
Content Block Icon Images (Three Column Cards)
From your content blocks template
Images are rendered inside a small fixed container:
class="w-8 h-8 object-contain"
Recommended Size
64 × 64 pixels
Aspect ratio: 1:1
These function as icons, not feature images.
Use simple graphics with transparent backgrounds where possible.
Image Full Section (16:9 Content Block)
From image_full template
class="aspect-[16/9] object-cover"
Recommended Size
1600 × 900 pixels
Aspect ratio: 16:9
This section explicitly enforces 16:9. Use widescreen images only here.
Blog Featured Images
Previously established size for blog cards:
Recommended Size
672 × 336 pixels
Aspect ratio: 2:1
This fits your blog preview layout cleanly without distortion.
Gallery Images
Gallery images are rendered responsively without forced cropping.
Recommended Size
1200 × 800 pixels
Aspect ratio: 3:2
This maintains consistency across gallery layouts and avoids vertical stretching.
Admin Preview Thumbnails
Product thumbnails in admin are scaled down automatically
No special upload size is required beyond using the correct front-end dimensions.
Standardised Image Sizes for eBuilder
Hero (two-column)
1200 × 1200 (square)
Social sharing (OG)
1200 × 630
Product grid
413 × 637 (portrait)
Product spotlight
1200 × 800
Blog image
672 × 336
Image full (16:9 sections)
1600 × 900
Content block icons
64 × 64
Gallery images
1200 × 800