Using imagery

Easily enhance your store’s look by adding, optimizing, and managing high-quality images—including free stock photos, banners, and product images—with smart features like focal points, automated compression, supported formats, and modern customization options for a polished, mobile-friendly design.

Last updated 4 months ago

Helpful links

  1. https://help.shopify.com/manual/shopify-admin/productivity-tools/file-uploads

  2. https://help.shopify.com/manual/custom-data/metafields/metafield-definitions/supported-content-types

  3. https://help.shopify.com/manual/online-store/images/showcasing-images

  4. https://helpx.adobe.com/photoshop/using/color-settings.html

Adding free stock photos

Burst is a free stock photo platform that offers high-resolution images, making it simple to enhance your store's visuals. With just a few clicks in the theme editor, you can browse and add photos from Burst directly to your store. You will find curated categories for every business type, so you can place high-quality photos on your homepage, blog, or product pages to elevate your design.

All Burst images use a royalty-free license, giving you total freedom to use and edit each image as you wish. Attribution is encouraged but not required.

How to add stock photos

  1. Open the theme editor.

  2. From the toolbar, select the section where you want an image, and make sure it has an image picker.

  3. Click Explore free images.

  4. Browse or search for your desired category.

  5. Preview images in your theme and click Select on your chosen image.

  6. Adjust the image’s appearance or animations within the sidebar options.

  7. Click Save to apply your changes.

Uploading images

You can add a variety of image types to your store, such as logos, product photos, slideshows, banners, and blog images. Each image can be cropped, resized, and styled. You also have options to customize your media display with borders or shadows, helping to create a unified look across your store.

Using the proper image aspect ratio ensures that your images appear exactly as you intend.

📝 Note: Always upload the highest quality images you have — manual compression is not needed.

How to upload an image

Images can be uploaded within the theme editor or from the Files page in your admin. Follow these steps to add a new image:

  1. From your admin, go to Online Store > Themes.

  2. Click Customize next to your preferred theme.

  3. Use the drop-down to pick the template you want to edit.

  4. Select the section or block for your image.

  5. Click Select image and then choose:

    1. Upload if the file is on your computer.

    2. Explore free images to browse Burst images.

  6. Preview your selection and click Select.

  7. Click Save to finish.

If you use metafields for images, take advantage of the dynamic source picker to add them. For more support, refer to guides on supported formats and content types for metafields.

Image banners

You can design impactful image banners featuring one or two images, custom text, and an action button. On desktop, banners show images side by side. To get the best mobile experience, enable the Stack images on mobile option in your image banner settings.

For further inspiration and tips, you can check best practices for slideshows and banners.

Setting a focal point

Focal points let you define the most important area of any image. This makes sure your chosen region always stays in frame, even after cropping or resizing. Setting a focal point is an effective way to keep control over how images display on every device and layout.

You can set a single focal point per image, and update or remove it as needed.

How to set a focal point

  1. In the theme editor, choose a section or block with an image.

  2. Click Edit on the image.

  3. Click Add focal point.

  4. Drag the blue circle or click the region you want to stay visible.

  5. Click Done to set the focal point.

💡 Tip: If you want to move the focal point later, just open the image and select a new area.

How to remove a focal point

  1. In the theme editor, select your section or block with the image.

  2. Click Edit.

  3. Click Remove focal point.

  4. Click Done to apply changes.

📝 Note: The focal point may not be perfectly centered, depending on your theme’s image cropping settings.

Supported image formats

Your store supports several popular image formats:

  1. JPEG

  2. Progressive JPEG

  3. PNG

  4. GIF

  5. HEIC

  6. WebP

Your theme will automatically serve the optimal format for each customer’s browser, balancing image quality and loading speed.

When to use JPEG

JPEG is best for rich, vibrant photography—use it for products, slideshows, and blog images. JPEG files provide high color depth and good compression, resulting in fast load times.

When to use PNG

PNG is ideal for logos, icons, and graphic elements that require flat color or transparency.

Image compression and optimized delivery

Every image in your store is compressed automatically for faster performance. Your theme checks browser capabilities and serves advanced formats like WebP or AVIF when possible, enhancing load speeds and image quality. Animated GIF files are converted to animated WebP for additional performance gains.

Upload limits

When uploading images, keep in mind:

  1. The maximum allowed dimension is 25 megapixels.

  2. The largest file size is 20 megabytes per image.

To estimate megapixels, use: (pixel width x pixel height)/1,000,000.

📝 Note: Product images may have different size or dimension requirements.

Color profiles and accuracy

Sometimes, colors may appear different after your image is uploaded. This is due to color profiles (like .ICC or .ICM files) embedded during the editing process. Color profiles are removed when uploading for a few reasons:

  1. Not every device supports color profiles, which can cause visual inconsistencies.

  2. Without a profile, browsers automatically use sRGB to ensure images look consistent everywhere.

  3. Removing profiles results in quicker image loading times.

How to remove color profiles before uploading

  • Save or export your image without a color profile from your image editing software.

Adobe Illustrator or Photoshop

  1. Click Edit > Assign Profile.

  2. Choose Don’t Color Manage This Document.

  3. Click OK to confirm.

Adobe InDesign

  1. Click Edit > Assign Profile.

  2. For both RGB Profile and CMYK Profile, select Discard (Use Current Working Space).

  3. Click OK to finish.

For more help, refer to the official Adobe guide on color profiles.

Best practices for images, banners, and slideshows

Our modern themes showcase stunning slideshows and full-width images to captivate visitors. These responsive designs work beautifully on every device, but some images work better than others.

Large background images may be cropped on different screen sizes, so planning ahead ensures your store always looks its best.

Recommendations

  1. Avoid putting text inside images used as backgrounds or in slideshows—text can be cropped or repositioned. Use text features in the theme editor instead.

  2. Keep slideshow or background images simple so overlaid text and content are easy to read.

Tips for handling cropping on different screens

  1. Wide images get cropped at the sides on tall screens (like smartphones). Place your focal point on the most important part to keep it visible.

  2. Tall images may be cropped at the top and bottom on wide desktop screens. Adjust your focal point to maintain visibility of key details.

💡 Tip: Always use high-quality images and set strategic focal points to guarantee your store looks amazing across every device. Our modern themes help your brand shine with the latest image optimization technology.