1. Overview
Maximize theme allows the use of various image sizes across all sections by having responsive image sizes. When you upload an image, regardless of the original size, the theme itself can adjust images to look great on devices of any size.
However, for the best visual quality and layout consistency, we recommend following the image size guidelines below, based on how images are used in our demo stores.
2. Common Use Cases
🤔 What are the recommended image sizes for each section?
For optimum quality, you can reference the image sizes used on our demo stores. The table below outlines the recommended image sizes for both desktop and mobile:
|
Desktop (px)
|
Mobile (px)
|
|
Menu - Promotion image
|
Vertical: 400 x 500
Horizontal: 330 x 500
|
Vertical: 400 x 500
Horizontal: 400 x 500
|
|
Menu - Banner menu
|
1 column - Height: 1200 (dynamic height)
2 columns - Height: 600 (dynamic height)
3 columns - Height: 400 (dynamic height)
4 columns - Height: 300 (dynamic height)
|
-
|
|
Drawer menu
|
500 x 500
|
300 x 200
|
|
Text with image cards
|
600 x 600 |
- |
|
Collection banner/Collection list banner
|
1920 x 823 |
400 x 600 |
|
Promotion spotlight
|
Height: 1920 (dynamic height) |
Height: 900 (dynamic height) |
|
Promotion grid
|
1500 x 1000 (standard 2 column-wide in 3-column layout) |
- |
|
Store locator
|
Square: 500 x 500 |
- |
|
Video - Cover image
|
1920 x 823 |
- |
|
Popup
|
600 x 600 |
- |
|
FAQ/Contact form
|
1400 x 1050 |
- |
|
Email signup
|
1920 x 823 |
- |
|
Collection list/Collection page/Promotional collections/Related collection - Promotion block
|
900 x 1200 (Standard 4-column layout) |
450 x 600 (Standard 4-column layout)
|
|
Tabs
|
1400 x 1050 |
400 x 600
|
|
Event calendar
|
600 x 450 |
-
|
|
Product Components
|
Section: 1920 x 1080
Block: 200 x 200 |
Section: 1080 x 608
Block: 100 x 100
|
|
Featured collections - Title card
|
1920 x 1080 |
900 x 1200
|
|
Flow - Media block
|
1400 x 1050 |
-
|
|
Email signup banner - Password page
|
1920 x 1080 |
-
|
|
Footer - block Custom text/Image
|
600 x 400 (standard 1 column-wide) |
-
|
|
Logo list
|
300 x 300 (standard 6 columns in a row) |
-
|
|
Page 404
|
600 x 400 |
-
|
|
Gift card
|
600 x 400 |
-
|
|
Motion Image banner/Product picker/Rich text/Hero Slideshow
|
1920 x 1080 |
400 x 600
|
|
Product specifications
|
400 x 600 |
-
|
|
Testimonials
|
1920 x 1080 |
400 x 600
|
|
🤔 How to check image sizes on our demo store?
STEP 1: Visit our demo store https://themes.shopify.com/themes/maximize/presets/maximize
STEP 2: Inspect an image
- On the demo, find any images you want to check the size.
- Right-click on the image, choose "Inspect".
- Hover over the <img> tag, find "Intrinsic size" for reference:
⚠️ Note:
- Some sections offer options to adjust the height/width of added images (e.g., Promotion grid, Banner menu,...). Certain configurations may lead to distortion or enlargement. Feel free to experiment with these settings to avoid display issues.
- For larger sections (e.g. Promotion grid), consider adding separate images for mobile viewing. This ensures your visuals remain effective and engaging on smaller screens, providing the best display possible across all devices.
|
Need help? Contact our support team at Omni Themes Support.
