You create banner images on version 7.1 by adding background images to page sections. These images always crop to some degree, especially on mobile. To customize the banner, you can:

• Change the amount of content overlaying the banner. A lot of content will increase the banner's height and cause the image to crop more.
• Change the banner size.
• Use the focal point to change how the image centers.

To learn how your banners appear on mobile, visit How will my site appear on mobile devices?

Page banners

With a few exceptions, page banners always crop to some degree, especially on mobile. The amount of cropping depends on the height of the banner and the width of the browser.

Tips:

• Learn how to style your site's banners and set their height.
• Use the focal point to adjust how the image centers.

Site-wide banners

Images added to site-wide banner images (added within site styles) can repeat, display at the banner height or width, or fill the container completely.

Tips:

• Use site styles to set how the banner image displays.
• Choose tweaks that look good on both mobile and a computer.

If your section background image or video appears cropped, change the section height or width to show more of your image or video.

Background images can repeat, display at the browser height or width, or fill the browser screen completely.

Tips:

• Use site styles to choose how the banner image displays.
• See our troubleshooting tips for help with mobile display.
• Images that are more than 2500 pixels along their longest edge can cause issues on mobile devices.

Upload and manage images directly in the gallery section, then use the Gallery tab to control how images display.

To learn more, visit Gallery sections.

How images appear in your gallery page depends on your template. Visit your template's guide to learn how images might crop to fit your gallery page’s design.

Hover over a portfolio section to add an image, then use the Gallery tab to control how it displays.

To learn more, visit Portfolio pages.

How images appear in an index page depends on your template. Visit your template's guide to learn more.

After uploading images to your store, use the store section tweaks to style them. While editing the page, hover over the store section and click the pencil icon. You can change the spacing, columns, aspect ratio, and text alignment. Experiment with different style tweaks to set how your product images display. To learn more about customizing your store page, visit Collection page sections.

Product image aspect ratios

It's not possible to auto crop product images in store pages. We recommend using product images with similar aspect ratios. For example, before uploading images to your site, ensure your product images all have a consistent landscape or portrait orientation.

If your product images have different orientations, use our built-in image editor or third-party tools to crop your images. You can also create a custom layout for your products using product blocks.

How your product images crop on the landing page depends on your template's store page type.

Classic

For classic store pages:

• In site styles, use the Product Image Auto Crop tweak to choose whether the images crop to the same shape, or display at their original shapes.
• If you're cropping, use the Product Item Size tweak to set the shape.
• Use the focal point to adjust where the image centers.
• If you're not cropping, use the Product Overlay Color tweak to choose the color that displays behind the image.
• For more help, visit Styling store pages.

Advanced

For advanced store pages:

• Images always crop to the same shape. This helps give your page a cohesive look and feel.
• To set the shape for all images on your store page, use the Image Aspect Ratio tweak in the Products: Layout section of site styles.
• Use the focal point to adjust where the image centers.
• For more help, visit Styling store pages.

Unique

Visit these links to learn about the thumbnail styles for either of the unique store pages:

• Galapagos
• Supply