Product Mockup Image Size Guide
Product mockup images are the images displayed on your product cards, product detail pages, sales pages, and other storefront sections. Using the right image ratio and image size helps your products look clean while keeping your store loading speed optimized.
This guide explains the recommended mockup image sizes for BurgerShop themes.
On this page
- What is a product mockup image?
- Recommended image size
- Square image ratio
- Portrait image ratio
- Where to set image ratio
- Best practices
- Troubleshooting
What is a product mockup image?
A product mockup image is the main visual image used to show your product to customers.
For example, a mockup image can be:
- A T-shirt mockup
- A mug mockup
- A canvas mockup
- A product lifestyle image
- A product image with design preview
Good mockup images help customers understand the product faster and can improve product page quality.
Recommended image size
BurgerShop recommends using consistent image sizes across products.
| Image ratio | Recommended size | Best used for |
|---|---|---|
| Square | 1000 × 1000 px | Product cards, simple mockups, balanced grid layout |
| Portrait | 1000 × 1200 px | Apparel mockups, vertical product images, lifestyle-style product display |
Square image ratio
If you choose Square as the image ratio, the recommended image size is:
1000 × 1000 px
This is the best balance between image quality and page loading performance for square product images.
Use square images when you want:
- A clean 1:1 product grid
- Consistent product cards
- Faster image loading
- Lightweight mockups
- Balanced display across desktop and mobile
Recommendation
For square product images, use 1000 × 1000 px. This size displays clearly and keeps the image file lighter than oversized images.
Portrait image ratio
If you choose a vertical or rectangular image style, the recommended image size is:
1000 × 1200 px
his follows a 5:6 ratio and works well for products that need more vertical space, such as apparel mockups.
Use portrait images when:
- The product image is taller than it is wide
- The product is shown on a model
- The mockup needs more vertical space
- You want the product card to feel more editorial or fashion-focused
Where to set image ratio
You can set the product card image ratio from the Theme Editor.
Steps:
- Log in to your BurgerShop admin.
- Go to Online store.
- Select Themes.
- Open the theme you want to edit.
- Click Customize.
- Go to General setting.
- Select Product card.
- In Image ratio, choose:
- Portrait
- Square
- Click Save.
Image Quality setting
In the Product card settings, you can also choose the image quality level.
| Option | Description |
|---|---|
| Normal | Recommended for most stores. BurgerShop automatically optimizes the image for a balance between clarity and speed. |
| Original | Uses the original uploaded image. This can keep maximum sharpness but may slow down page loading. |
| Medium | Uses a lighter image size to prioritize speed, especially on mobile. |
Recommendation
Use Normal for most stores. Use Original only when the image looks blurry and sharpness is more important than speed.