Everything you need to set up and customize the Image Slide block — from uploading your photo and adjusting timing to configuring the pan and zoom effect and positioning your text overlay.
An Image Slide is a single full-width image panel used inside a slideshow section. Each slide fills the entire width of the page and can display a background image with optional text and buttons layered on top. Slideshows cycle through multiple image slides automatically, creating an engaging visual experience at the top of your store or on any page.
In the Boardwalk theme, the Image Slide block supports a background image, a dark overlay to improve text readability, a built-in pan and zoom animation effect, and flexible text positioning. Each slide can also contain inner content blocks such as text, buttons, and spacers, giving you full control over the message displayed on each slide.
Follow these steps to add and configure an Image Slide block inside a slideshow section on your Shopify store.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Navigate to the page
where you want your slideshow using the page selector
dropdown at the top center of the editor.
If you don't already have a slideshow on the page, click Add section in the Theme Editor sidebar and choose a slideshow section. If you already have one, click it to expand its contents.
Inside the slideshow section, click Add block and select Image slide from the list. A new slide will appear with a placeholder image.
Click the Image Slide block in the sidebar and use the Image picker to upload or select a photo from your media library. For best results, use a high-resolution image that is at least 2000 pixels wide.
Adjust the slide duration, overlay opacity, pan and zoom effect, and text position to match your design. These settings are covered in detail in the sections below.
Each Image Slide can contain inner content blocks. Click Add block inside the slide to add Text, Button, or Spacer blocks. These appear layered on top of your image and are positioned according to the text position settings.
Click Save in the Theme Editor. Preview your page to verify the slide image, text overlay, and animation are displaying as expected.
These settings are available when you click on an Image Slide block in the Theme Editor sidebar. They control the image, timing, overlay, animation, and text positioning for that individual slide.
The background image for this slide. Use a high-resolution photo (at least 2000px wide) for the best quality across all screen sizes. If no image is selected, a placeholder graphic is displayed instead.
How long this slide stays visible before the slideshow advances to the next slide. Range: 3 seconds to 10 seconds. A longer duration gives visitors more time to read the text overlay, while a shorter duration creates a faster-paced feel.
Adds a dark layer on top of the image to improve the readability of any text or buttons. Range: 0% (no overlay) to 80% (heavy darkening). Increase this value if your text is hard to read against the image.
Turns on a slow, cinematic camera movement effect (sometimes called a "Ken Burns" effect) that gently pans and zooms the image while the slide is active. This adds motion and visual interest. The effect only plays when an image has been selected.
The point on the image where the pan and zoom effect
begins. Options:
Top left, Top center,
Top right, Center left,
Center, Center right,
Bottom left, Bottom center,
Bottom right. Only visible when pan and
zoom is enabled.
The point on the image where the pan and zoom effect finishes. Uses the same position options as the start position. Choose a different position from the start to create a visible panning movement across the image. Only visible when pan and zoom is enabled.
Controls whether the image slowly zooms in (getting
closer) or zooms out (pulling away) during the slide
duration. Options: Zoom in or
Zoom out. Only visible when pan and zoom
is enabled.
Sets the vertical position of the text overlay on the
slide. Options: Top,
Middle, or Bottom.
Sets the horizontal alignment of the text overlay. Choose between left, center, or right alignment. This also controls the text alignment direction of the inner content blocks.
Each Image Slide can contain inner blocks that appear layered on top of the background image. These blocks let you add headlines, descriptions, call-to-action buttons, and spacing between elements.
Adds a text element to the slide. Use this for headlines, subheadings, or short descriptions. You can add multiple text blocks to create layered typographic layouts on a single slide.
Adds a clickable button to the slide. Use this to link visitors to a collection, product page, or any other URL. Great for call-to-action messages like "Shop Now" or "Learn More."
Adds empty vertical or horizontal space between other content blocks. Use spacers to fine-tune the distance between a headline and a button, or to push content away from the edges of the slide.
The Image Slide block comes with features that work automatically — no apps or custom code needed.
A cinematic camera-style effect that slowly pans across and zooms into (or out of) the image while the slide is displayed. You control the start position, end position, and zoom direction to create a custom motion path for each slide.
The slide automatically serves an optimally sized version of your image based on the visitor's screen size. This ensures fast load times on mobile devices while preserving sharp quality on large desktop monitors.
An adjustable dark overlay sits between the image and the text content, making your headlines and buttons easier to read regardless of the image brightness or color.
When the slide comes into view, the image smoothly fades in with a subtle animation. This creates a polished transition effect as the slideshow cycles between slides.
Position your text overlay anywhere on the slide using a combination of vertical (top, middle, bottom) and horizontal (left, center, right) alignment. This gives you nine possible placement options for your content.
If no image is selected, the slide displays a styled placeholder graphic so the layout remains intact while you're building out your content. This makes it easy to set up slides first and add images later.