Image

Add a customizable featured image with options for style, size, aspect ratio, overlays, captions, links, and responsive alignment — perfect for eye-catching banners, promotions, and branded visuals.

Last updated 4 months ago

Overview

The Image section offers a flexible way to showcase branded visuals, highlight promotions, or break up page content with a customizable image. This section combines customizable image style, overlays, captions, and links, equipping you to create bold, high-impact visuals that enhance engagement and reinforce your brand identity.

⚠️ Important: The Image section combines granular controls for image style, overlays, captions, and interactivity, making it easy to achieve polished, effective results.

Image settings

Image settings let you define the look, dimensions, shape, and behavior of your featured image. These controls make it easy to create compelling visuals that are responsive and visually consistent with the rest of your storefront.

  1. Image style

    1. Default — Displays the image in a standard rectangle.

    2. Rounded corners — Softens the image’s edges for a modern look.

    3. Circle — Crops the image into a perfect circle, suitable for profile or icon images.

    4. Default: Default

  2. Maximum image width

    1. Restricts the visual width from 0 px (no maximum) up to 1600 px in 16-pixel steps.

    2. Default: 0 px

    3. Limiting width helps maintain consistency and composure within your section layouts.

  3. Aspect ratio

    1. Default — Maintains the image’s natural aspect ratio.

    2. Landscape — Wide and flat, great for banners or headers.

    3. Portrait — Taller, vertical format for emphasis.

    4. Square — Equal height and width for balance.

    5. Ultrawide — Cinematic, dramatic presentation.

    6. Widescreen — Standard wide display style.

    7. Default: Default

    8. This setting ensures your images look unified and professional.

  4. Aspect ratio (mobile)

    1. Assign an aspect ratio for mobile displays using the same set of options as desktop.

    2. Default: Default

    3. Customizing for mobile ensures your image stays attractive and effective on every screen.

  5. Link

    1. Turn the image into a clickable link by providing a destination URL.

  6. Open link in a new tab

    1. If enabled, clicking the image will open the linked page in a new browser tab.

    2. Default: Disabled

    3. This is especially helpful for external destinations or resources so visitors remain on your site.

Caption settings

Caption settings provide options for extra messaging. You can add richly formatted text, choose its position and adjust alignment and text size, enabling better storytelling, calls to action, or product information.

💡 Tip: Captions enhance your visuals with extra context, storytelling, or calls to action, making your imagery even more compelling.

  1. Caption

    1. Add text with support for bold, italic, and links to enrich the message.

  2. Caption alignment

    1. Specify left, center, or right alignment for the caption text to create balance.

  3. Caption position

    1. Top — Places the caption above the image.

    2. Bottom — Positions the caption below the image.

    3. Good placement makes your content easier to scan.

  4. Caption text size

    1. Small

    2. Medium

    3. Large

    4. Extra large

    5. Default: Medium (md)

Overlay settings

Overlay settings allow you to place a color or gradient over your image. This boosts caption clarity and contrast, enables bold design effects, or helps unify imagery with your branding. Overlay opacity is fully adjustable for subtlety or dramatic focus.

📝 Note: Use overlays for contrast and branding, ensuring caption text remains readable without hiding the underlying image.

  1. Overlay color

    1. Lays a solid color over your image for accent or to aid readability.

  2. Overlay gradient

    1. Adds a multi-color overlay for visual depth and style, ideal for more dynamic looks.

  3. Overlay opacity

    1. Adjust from 0% (transparent) to 100% (fully opaque) in 4% increments.

    2. Default: 48%

    3. Higher opacity creates stronger separation between image and text, while lower keeps more of the image visible.

Supported block types

Blocks are not supported in the Image section. All controls and customization are handled directly in the section settings for simplicity, speed, and clarity.

Usage notes

⚠️ Important: For optimal performance and accessibility, use high-resolution, compressed images and test your configuration on multiple devices.

  1. Select images that are at least twice the size they will display for sharp results, but compress them for faster loading.

  2. Adjust overlay color and opacity to ensure text is always readable for all users.

  3. Test aspect ratio and caption settings across mobile and desktop to keep imagery and messaging balanced everywhere.

  4. When linking, provide descriptive alt text to support accessibility and improve SEO.

  5. Use overlay thoughtfully to reinforce your brand, but avoid visual clutter that distracts from key content.

By leveraging all settings and quality imagery, the Image section delivers prominent, fast, and accessible visuals that look great on any device.