Using images in Align

Featured links

1. Shopify documentation on images
2. Shopify documentation on adding free stock photos to your theme
3. Shopify documentation on uploading images
4. Shopify documentation on fix the colors of uploaded images
5. Burst free stock photos
6. Burst attribution license
7. Shopify theme editor
8. Shopify documentation on theme media settings
9. Shopify documentation on image aspect ratio
10. Shopify Files page

Helpful videos

Learn With Shopify video: How to Design an Ecommerce Store that Sells: Proven Strategies and Best Practices

Learn With Shopify video: How to Design an Ecommerce Store that Sells: Proven Strategies and Best Practices

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use high-quality images that support your brand and stay clear across screen sizes. This guide explains how to find or upload images for your Company XYZ Align theme, choose suitable formats, set focal points, and prepare banners and slideshows for responsive layouts.

Related resources

1. Image guidance
2. Burst free stock photos
3. Theme image guidance
4. Fix image colors

Add free stock photos

Burst offers free, high-resolution stock photography in a wide range of categories. You can browse its images from the Shopify theme editor and use them in image-enabled areas of your Align store, such as slideshows, blog posts, and product pages.

Burst images are available under a royalty-free license, so you can use and edit them as needed. Attribution is encouraged but not required.

Add a stock photo

1. Open the theme editor
2. Select the section that contains the image picker you want to update.
3. Select Explore free images.
4. Search for an image or browse a category.
5. Select an image to preview it in Align, then select Select.
6. Adjust image appearance or animation settings in the sidebar, if available.
7. Select Save.

Upload images

Use images for logos, products, slideshows, banners, and blog posts. You can crop and resize images, and customize your media settings in your theme to apply a consistent border or shadow to media across your store.

Choose an appropriate image aspect ratio so each image fits its intended Align layout.

Tip

Upload the best-quality image you have. Images do not need to be manually compressed before uploading.

Upload an image in the theme editor

You can upload images in the theme editor or from the Files page. For file-management guidance, see Uploading files to your website

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

2. Select Customize beside Align, or the Align theme copy you want to edit.

3. Use the template menu to choose the page or template to update.

4. In the theme editor sidebar, select the section or block that contains the image.

5. Select Select Image.

   • To upload an image from your computer, select Upload.
   • To choose a free stock photo from Burst, select Explore free images.

6. Select an image to preview it, then select Select.

7. Select Save.

Add an image from a metafield

If you have metafields for images, use the dynamic source picker to connect an image to a theme setting. For supported image formats and more details, see Metafield content types and values

Use image banners

Image banners can combine one or two images with text and an action button. On desktop screens, two banner images appear side by side; on smaller screens, this layout can be difficult to view.

When using two images, enable Stack images on mobile in the Image banner theme settings. For additional guidance, see image banners, slideshows, and Best practices for slideshow and image banners

Set an image focal point

A focal point marks the most important area of an image. It helps keep that area in frame when Align crops an image for different layouts and screen sizes.

Each image can have one focal point, which you can change or remove at any time. A focal point set on an image applies everywhere that same image is used.

Focal points are available only for theme images, not product, blog, or collection images.

Add a focal point

You can add a focal point from Files or directly in the theme editor.

1. In the theme editor, select a section or block with an image.
2. Select Edit on the image.
3. Select Add focal point.
4. Drag the blue circle, or select the area that should remain visible.
5. Select Done.

To move the focal point later, open the image again and select a new area.

Remove a focal point

1. In the theme editor, select a section or block with an image.
2. Select Edit on the image.
3. Select Remove focal point.
4. Select Done.

Note

Depending on how Align crops and resizes an image, its focal point might not appear visually centered.

Choose an image format

Supported image formats include:

• JPEG
• Progressive JPEG
• PNG
• GIF
• HEIC
• WebP

The best supported format is selected automatically for each visitor’s browser. Learn more about image transformation capabilities

Use JPEG for photographs

JPEG is well suited to photography and other still images with complex colors. Its lossy compression can reduce file size while maintaining good visual quality.

Use JPEG for:

• Products
• Banners and slideshows
• Pages and blog posts

Use PNG for graphics

PNG works well for graphics and icons with flat colors, especially when you need transparency.

Use PNG for:

• Logos
• Icons
• Borders and trims

Understand automatic optimization and upload limits

Shopify automatically compresses images for faster loading and chooses the most suitable delivery format for each browser. For example, compatible browsers can receive modern formats such as WebP or AVIF; GIFs are converted to animated WebP to reduce file size.

An uploaded image cannot exceed either limit:

1. 25 megapixels
2. 20 megabytes

Calculate megapixels with (pixel width x pixel height)/1,000,000. For example, a 4900 × 6930 image is 33.9 MP: (4900x6930)/1,000,000 = 33.9 MP.

Note

Product images have different image and file-size upload limits.

Manage color profiles

Colors can look different after upload when an image includes an .ICC or .ICM color profile. Shopify removes these profiles so images display more consistently across devices and browsers and to avoid larger file sizes.

When an image has no color profile, browsers assume sRGB, the most common web color profile. If accurate color matching is important, save the image without its embedded profile before uploading.

Remove a color profile in Adobe Illustrator or Photoshop

1. Select Edit > Assign Profile.
2. Select Don’t Color Manage This Document.
3. Select OK.

Remove a color profile in Adobe InDesign

1. Select Edit > Assign Profile.
2. For RGB Profile and CMYK Profile, select Discard (Use Current Working Space).
3. Select OK.

For more detail, see the Adobe documentation on color profiles

Prepare slideshows, banners, and full-width images

Large images and slideshows adapt to the available screen size, so some parts of an image may be cropped. Plan for this cropping before adding images to full-width Align layouts.

1. Keep text out of the image itself. Use the theme editor to add text and links so they can adapt with the layout.

2. Choose simple images when text appears over them to help the text remain readable.

3. Set a focal point on the important subject.

   • Wide images can be cropped at the left and right on tall screens.
   • Tall images can be cropped at the top and bottom on wide screens.

Usage notes

1. Choose the layout first. Match the image aspect ratio to the Align section where it will appear.
2. Protect the main subject. Use focal points for images that may be cropped on mobile or desktop layouts.
3. Keep banner text separate. Add headings, copy, and links in the theme editor rather than baking them into a banner image.
4. Use the right format. Choose JPEG for photographs and PNG for transparent graphics such as logos and icons.
5. Check color-sensitive images. Remove embedded color profiles before upload when color changes would be noticeable.