Boardwalk Block Guide

Image with Text Block

Everything you need to set up and customize the Image with Text block — from choosing an image and writing companion text to adjusting sizing, aspect ratios, and optional links.

About

An Image with Text block pairs a small image alongside a line of text in a single horizontal row. It's a simple way to combine a visual element — such as a logo, icon, photo, or badge — with a label, name, or short description right next to it.

In the Boardwalk theme, the Image with Text block can be added inside any section that supports blocks. The image and text sit side by side, and the entire block can optionally link to another page or URL. You can control the image size, aspect ratio, spacing, and even flip the image horizontally for creative layouts.


How to Set Up the Image with Text Block

Follow these steps to add and configure an Image with Text block on any page of your Shopify store using the Boardwalk theme.

1
Open the Theme Editor

In your Shopify admin, go to Online Store → Themes, find Boardwalk, and click Customize. Navigate to the page where you want to add the block using the page selector dropdown at the top center of the editor.

2
Add the Image with Text Block

In the Theme Editor sidebar, find the section where you want to place the block. Click Add block and choose Image with text from the list. The block will appear inside the section with a placeholder image.

3
Add Your Text

Click on the block in the sidebar to open its settings. Use the Text field to enter the text that will appear next to the image. This is a rich text field, so you can apply bold, italic, and other formatting.

4
Upload an Image

Under the Image heading, use the image picker to upload or select an image from your Shopify media library. If no image is selected, a placeholder graphic will display instead.

5
Adjust the Image Size and Shape

Set the Image width to control how large the image appears (from 50px to 300px). Choose a Desktop aspect ratio to crop or shape the image — for example, use Square for a uniform look or Adapt to image to preserve the original proportions.

6
Add a Link (Optional)

Use the Link field to make the entire block clickable. When a link is set, both the image and the text become a single tappable area. You can also enable Open link in new tab so visitors stay on your store while viewing the linked content.

7
Save and Preview

Click Save in the Theme Editor. Preview your page to verify the image and text are displaying side by side as expected.


Block Settings

These settings are available when you click on an Image with Text block in the Theme Editor sidebar.

Image with Text Settings

Text

The text that appears next to the image. This is a rich text field, so you can use bold, italic, links, and other formatting to style your content.

Image

Upload or select the image to display. If no image is chosen, a placeholder graphic will appear in its place.

Image width

Controls how wide the image appears, measured in pixels. Range: 50px to 300px. A smaller width works well for icons or logos, while a larger width suits photos or detailed graphics.

Desktop aspect ratio

Controls the shape of the image by cropping it to a specific ratio. Options: Adapt to image (preserves the original proportions), Widescreen, Standard, Landscape, Square, or Portrait.

Flip image horizontally

Mirrors the image along its vertical axis, creating a horizontally flipped version. Useful for creative layouts or when the direction of an image needs to be reversed.

Link

Makes the entire block (both the image and the text) clickable. Enter any URL or choose a page, product, collection, or blog from your store.

Open link in new tab

When enabled, clicking the block opens the linked page in a new browser tab instead of navigating away from your store. This setting only appears when a link is set.

Gap

Controls the spacing between the image and the text. Range: 0px to 30px. Increase the gap for a more spacious feel, or set it to 0 to keep the image and text tightly together.


Built-In Features

The Image with Text block comes with features that work automatically — no apps or custom code needed.

Feature Overview

Side-by-side layout

The image and text are automatically arranged in a horizontal row with vertical centering. This ensures the content looks balanced regardless of the image size or text length.

Responsive image sizing

The image automatically loads at twice the display width so it appears crisp and sharp on high-resolution screens (such as Retina displays). On smaller screens, the image scales down to fit within the available space.

Flexible aspect ratios

Choose from six aspect ratio options to crop or shape the image to fit your design. Use Adapt to image to preserve the original proportions, or select a fixed ratio like Square or Portrait for a uniform look across multiple blocks.

Horizontal flip

Mirror the image horizontally with a single checkbox. This is useful when you want an image to face a different direction without editing the original file.

Optional link wrapping

When a link is added, the entire block becomes clickable — both the image and the text act as a single link. Without a link, the block displays as static content. Links can be set to open in a new tab for external URLs.

Smooth hover transition

When the block is linked, hovering over the image triggers a smooth animation effect, giving visitors a visual cue that the block is interactive.

Lazy loading

Images are loaded only when they are about to scroll into view, which helps your pages load faster and improves performance — especially on pages with many Image with Text blocks.


FAQ

Common questions about the Image with Text block.

If no image is selected, the block will display a placeholder graphic in its place. This placeholder is only visible while editing and serves as a reminder to upload an image. It's best to add your own image before publishing the page.
Yes, this block works well for displaying small logos or icons alongside a brand name or tagline. Set the Image width to a smaller value (such as 50px–80px) and choose the Adapt to image aspect ratio to preserve your logo's original proportions.
The block loads the image at twice the display width to support high-resolution screens. If the original image file is too small, it may not have enough detail to look sharp at that size. Upload an image that is at least twice as wide (in pixels) as the Image width setting. For example, if Image width is set to 150px, your source image should be at least 300px wide.
The block always displays the image on the left and the text on the right. There is no built-in setting to reverse this order. If your section supports reordering blocks or custom CSS, you may be able to adjust the layout at the section level.
The Open link in new tab setting only appears after you've entered a URL in the Link field. Once a link is set, the option will become visible in the block settings.