Image

The Image block is a versatile tool designed to enhance your store's visual appeal by allowing you to add and customize images across various sections. It offers a range of settings to adjust the image's appearance, alignment, and additional features like captions and overlays, ensuring a cohesive and engaging presentation.

Key settings include options for selecting and styling images, controlling aspect ratios for both desktop and mobile views, and customizing border colors and link behaviors. You can also adjust alignment settings, add captions, and apply overlays to enhance visual effects.

Practical usage examples include displaying a product image with a caption, creating a hero image with an overlay, and linking an image to a product page. These features help create a dynamic and interactive user experience, tailored to fit seamlessly within your store's layout.

Overview #

The Image block is designed to enhance your store's visual appeal by allowing you to add and customize images across various sections. This block provides a range of settings to adjust the image's appearance, alignment, and additional features like captions and overlays, ensuring a cohesive and engaging presentation.

Key components and functionality #

Image settings

The image settings allow you to select and style an image for display, providing flexibility in how images are presented.

• Image picker: Choose an image to display.
• Image style: Select the style of the image. Options include default, rounded corners, and circle.
• Max image width: Set the maximum width of the image. The range is from 0 to 1600 pixels, with a default of 0, which stretches the image to the full available width.

Aspect ratio

Control the aspect ratio of the image for both desktop and mobile views to ensure optimal display across devices.

• Aspect ratio: Choose the aspect ratio for the image. Options include default, landscape, portrait, square, ultrawide, and widescreen. The default is default.
• Aspect ratio - Mobile: Similar options as desktop, with the default being default.

Border and link settings

Customize the border color and link behavior for the image to enhance interactivity and visual appeal.

• Border color: Set the color of the image border.
• Link: Add a URL to make the image clickable.
• Open link in a new tab: Enable this option to open the link in a new tab. The default is false.

Alignment settings

Adjust the alignment of the image on different devices to ensure it fits seamlessly within your layout.

• Alignment - Desktop: Set the horizontal alignment of the image on desktop.
• Alignment - Mobile: Set the horizontal alignment of the image on mobile devices.

Caption settings

Add and style captions for the image to provide context or additional information.

• Caption: Add a caption to the image or video.
• Text alignment - Caption: Align the caption text.
• Caption position: Choose whether the caption appears at the top or bottom of the image.

Text size

Adjust the size of the text used in captions to ensure readability and aesthetic consistency.

• Text size: Options include small, medium, large, and extra large. The default is medium.

Overlay settings

Add color overlays to the image for enhanced visual effects, helping to highlight or soften the image.

• Overlay color: Set the color of the overlay.
• Overlay gradient: Apply a gradient overlay.
• Overlay opacity: Adjust the opacity of the overlay, ranging from 0% to 100%, with a default of 48%.

Editor settings

Customize the title of the block within the editor to help organize and identify blocks easily.

• Editor title: Set a title for the block in the editor. The default is Image.

Available in sections #

The Image block can be used in the following sections:

1. Collage
2. Slideshow
3. Multicolumn
4. Image with text
5. Hero

Usage notes #

• Responsive design: Ensure images are optimized for both desktop and mobile views by adjusting aspect ratios and alignments.
• Performance: Use appropriately sized images to maintain fast loading times.
• Accessibility: Add descriptive alt text to images for better accessibility and SEO.

Usage examples #

1. Displaying a product image with a caption: Use the image picker to select a product image, set the style to rounded corners, and add a caption at the bottom. Adjust the text size to medium for readability.

2. Creating a hero image with overlay: Select a high-resolution image, apply a widescreen aspect ratio, and add a semi-transparent overlay to enhance text readability over the image.

3. Linking an image to a product page: Choose an image, add a link to the product page, and enable the option to open the link in a new tab for seamless navigation.