Images
Genstore offers rich image management features that allow merchants to personalize the look of their online store by adding custom logos, site icons, product images, slides, banners, blog post images, and stock photos. Additionally, you can upload your own images for more customization.
Upload logo and site icon
You can upload your store’s logo and favicon in the Theme design panel. The uploaded logo will be used as your store’s primary branding and can be displayed consistently across all pages.
TIP
If no logo is uploaded, your store name will be displayed instead.
Logo settings
This image will serve as the store’s brand identity. You can adjust the logo’s display width for desktop view.
Site icon (favicon)
The site icon appears in the browser tab and bookmarks. A square image (32 × 32 px) is recommended.
Steps
- Log in to the Genstore admin and go to Online store > Themes.
- Click Customize next to your theme.
- In the editor’s left panel, click the Theme design icon (gear icon).
- Select Logo from the dropdown list (see screenshot).
- Upload your logo image and adjust the width slider if needed.
- Upload a site icon in the designated field (recommended size: 32 × 32 px).
- Click Save in the top-right corner to apply your changes.
Upload images
You can upload product images, slides, banners, and blog post images, and optimize them by cropping and resizing. You can also customize media file settings for better presentation of your store.
Steps
- Log in to the Genstore admin and go to Online Store > Themes.
- Click Design next to the desired theme.
- For example, if you want to add or change the image banner displayed on the homepage, click Image banner under Segment template in the sidebar of the theme editor. Complete the necessary actions in the Image banner window on the right side of the page.
- [Optional] If you want to add an image to a page other than the homepage, click the dropdown menu under the homepage and select the page template you want to edit, such as product or product collection.
- In the theme editor sidebar, click Add section, choose Image banner from the dropdown, and adjust the image title, text, buttons, or add more blocks.
- In the Image banner window on the right side of the page, upload the image and complete the settings.
- Click Save.
Theme image and asset size recommendations
Suggested image sizes for common sections
| Section | Element | Desktop size | Mobile size | Recommended ratio | File format | File size |
|---|---|---|---|---|---|---|
| Header | Logo | Width ≥ 300px Height auto | Same as desktop | No limit | SVG / PNG | Recommended ≤ 1MB |
| Banner | Image | Height (proportional): Large 800px Medium 640px Small 480px Width auto | Height (proportional): Large 480px Medium 400px Small 320px Width auto | No limit | JPEG / PNG | Desktop ≤ 3MB Mobile ≤ 2MB |
| Image with text | Image | Responsive | Responsive | XL: 3:4 Large: 1:1 Medium: 4:3 Small: 16:9 | JPEG / PNG | Desktop ≤ 3MB Mobile ≤ 2MB |
| Collage | Image | Responsive | Responsive | Recommended 1:1 | JPEG / PNG | Desktop ≤ 3MB Mobile ≤ 2MB |
| Collage cover | Video | Responsive | Responsive | Cover image recommended 1:1 | MP4 / JPEG | Video ≤ 20MB Cover desktop ≤ 3MB / mobile ≤ 2MB |
| Collection list | Image | Responsive | Responsive | 1:1 or 3:4 | JPEG / PNG | Desktop ≤ 3MB Mobile ≤ 2MB |
| Collection page banner | Image | Responsive | Responsive | 16:9 / 3:2 / 21:9 / 32:9 | JPEG / PNG | Desktop ≤ 3MB Mobile ≤ 2MB |
| Featured collection | Image | Responsive | Responsive | 1:1 or 3:4 | JPEG / PNG | Desktop ≤ 3MB Mobile ≤ 2MB |
| Featured product | Image | Responsive | Responsive | No limit | JPEG / PNG | Desktop ≤ 3MB Mobile ≤ 2MB |
| General image | Image | Responsive | Responsive | Recommended 4:3 or flexible ratio | JPEG / PNG | Desktop ≤ 3MB Mobile ≤ 2MB |
| Video | Video | Responsive | Responsive | No limit | MP4 | Video ≤ 20MB |
| Video cover | Image | Responsive | Responsive | 1:1 / 4:3 / 3:4 / 16:9 / 21:9 | JPEG / PNG | Desktop ≤ 3MB Mobile ≤ 2MB |
| Slideshow | Image | Height (proportional): Large 800px Medium 640px Small 480px Width auto | Height (proportional): Large 480px Medium 400px Small 320px Width auto | No limit | JPEG / PNG | Desktop ≤ 3MB Mobile ≤ 2MB |
| Multi-column | Image | Responsive | Responsive | 1:1 or 3:4 | JPEG / PNG | Desktop ≤ 3MB Mobile ≤ 2MB |
| Contact form | Image | Responsive | Responsive | 1:1 / 3:4 / 4:3 / 16:9 | JPEG / PNG | Desktop ≤ 3MB Mobile ≤ 2MB |
| Blog post | Image | Responsive | Responsive | 16:9 / 3:2 / 4:3 | JPEG / PNG | Desktop ≤ 3MB Mobile ≤ 2MB |
| Gift card cover | Image | Responsive | Responsive | Recommended 16:9 | JPEG / PNG | Desktop ≤ 3MB Mobile ≤ 2MB |
Image optimization tips
- Compress images: Use tools like TinyPNG or Squoosh to reduce file size without noticeable quality loss, improving page load speed.
- Use descriptive file names: Rename files like
IMG_1234.jpgtoblue-t-shirt-front-view.jpgto help search engines understand image content and improve SEO. - Choose the right format: Use JPEG for product photos and PNG for logos or icons with transparent backgrounds.
- Maintain consistent aspect ratios: Follow the recommended ratios to avoid cropping or distortion.