Image with text

The Image with Text section allows merchants to combine promotional images with flexible content blocks in a clean side-by-side layout. This section is ideal for storytelling, featured collections, product highlights, brand introductions, or marketing campaigns where both visual content and descriptive text are important.

The section supports fully customizable content layouts using flexible blocks such as Heading, Text, Buttons, and Spacing, making it easy to create responsive and visually balanced storefront sections.

Settings

  • Image: Uploads the main image displayed inside the section.
  • Image width: Controls the display width of the image area. Available options include Small, Medium, and Large.
  • Image ratio: Defines the aspect ratio used for the image.
  • Link: Sets a clickable link for the image area.
  • Preload image: Enables image preloading to improve loading performance and visual stability.
  • Image placement: Controls the position of the image relative to the content. Available options include Image first and Image second.
  • Content position: Defines the position of the content area inside the section.
  • Content alignment: Controls the alignment of text and content displayed inside the content area.
  • Content color scheme: Controls the color styling used for the content area.

The Image with Text section supports the following flexible content blocks.

Block: Heading

  • Heading: Defines the main heading text displayed inside the section.
  • Seo optimization: Enables the heading to use an H2 tag instead of the default H1 tag.
  • Heading style: Controls the visual appearance of the heading text. Available options include Default and Uppercase.
  • Large desktop font size: Controls the heading font size displayed on large desktop screens.
  • Desktop font size: Defines the heading font size for desktop devices.
  • Tablet font size: Adjusts the heading font size displayed on tablet devices.
  • Mobile font size: Controls the heading font size displayed on mobile devices.

Block: Text

  • Text: Defines the text content displayed inside the block.
  • Text scale: Controls the overall text size and visual emphasis.

Block: Buttons

The Buttons block allows merchants to display up to two call-to-action buttons. Both buttons share the same configuration settings.

  • Button label: Defines the text displayed on the button. Leave empty to hide the button.
  • Button link: Sets the destination URL for the button.
  • Open this link in a new window: Opens the button link in a new browser tab or window when enabled.
  • Use outline button style: Applies an outline-style appearance instead of a solid button style.

Block: Spacing

The Spacing block allows merchants to add adjustable spacing between content blocks for cleaner and more flexible layouts.

  • Desktop spacing: Controls the spacing size displayed on desktop devices.
  • Tablet spacing: Adjusts the spacing size for tablet layouts.
  • Mobile spacing: Defines the spacing size displayed on mobile devices.

Using balanced image layouts, concise content, and properly positioned call-to-action buttons can help create more engaging storytelling sections while improving the visual flow of the storefront experience.