Everything you need to set up and customize Gallery blocks — from arranging images and videos in a grid to adding color blocks with text overlays, adjustable aspect ratios, and content alignment.
A gallery is a visual layout that displays a collection of images, videos, or styled content blocks in a grid. Galleries are a great way to showcase products, lifestyle photography, brand stories, or promotional content in a visually engaging format.
In the Boardwalk theme, Gallery blocks work together as a system. A Gallery Items block acts as the container that controls the grid layout, aspect ratio, and corner rounding. Inside it, you add individual Image, Video, and Color Block items. Each of these can include text, buttons, and logo overlays, and they all share the overlay and alignment controls that give you precise creative control over how your content looks.
Follow these steps to add and configure a gallery on any page of your Shopify store using the Boardwalk theme.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Navigate to the page
where you want to display a gallery using the page
selector dropdown at the top center of the editor.
Click Add block in the Theme Editor sidebar and choose Gallery items from the list. This is the container block that holds all of your gallery content and controls the grid layout.
Click the Gallery items block in the sidebar. Set the aspect ratio for all items in the gallery and adjust the border radius to round or sharpen the corners of each item.
Inside the Gallery items block, click Add block and choose from Image, Video, or Color block. Add as many items as you need — the grid will automatically arrange them based on the number of columns set by the parent section.
Each Image, Video, and Color block can hold child blocks for Text, Button, and Logo overlays. Click into any gallery item and use Add block to layer content on top of your media.
Click Save in the Theme Editor. Preview your page to verify the gallery grid, media, overlays, and any linked content are displaying as expected.
The Gallery items block is the container that holds all of your individual gallery items. Its settings control the shared visual properties that apply to every Image, Video, and Color block inside it.
Sets the shape of every item in the gallery. Options:
Auto (fit content),
Widescreen, Standard,
Landscape, Square, or
Portrait. Choosing
Auto lets each item size itself based on
its own content.
Rounds the corners of every gallery item. Range: 0px to 40px.
The Image block displays a photograph or graphic inside the gallery grid. It supports an optional link, color overlays for text legibility, and content alignment controls. You can add Text, Button, and Logo child blocks on top of the image.
Select an image from the Shopify media library. If no image is selected, a placeholder graphic will display in its place.
Optionally link the entire image block to any page, collection, product, or external URL. When a link is set, the image will gently zoom on hover to indicate it's clickable.
Adds a colored layer over the image to improve the readability of any text or buttons placed on top. You can choose the overlay style and color.
None, Solid,
Fade from bottom, or
Full gradient
Controls where overlay content (text, buttons, logos) appears on the image. These settings only take effect when child blocks are added.
Top, Middle, or
Bottom
Left, Center, or
Right
Select a color scheme to style the overlay text and content colors for this image block.
Image blocks accept Text, Button, and Logo child blocks. These appear as overlays positioned on top of the image, and their placement is controlled by the content alignment settings above.
The Video block plays a video inside the gallery grid. You can use a video file uploaded to Shopify or paste a YouTube or Vimeo URL. Like the Image block, it supports overlays, content alignment, and child blocks for layering text, buttons, and logos on top.
Select a video file from the Shopify media library. This is the primary video source for the block.
Note: To upload videos to your Shopify
media library, go to
Settings → Files
in your Shopify admin and upload your video file there.
It will then be available for selection in the theme
editor.
Alternatively, paste a YouTube or Vimeo URL to embed an external video. This is used when no uploaded video file is selected.
An optional image displayed before the video plays or as a fallback. This is helpful for showing a preview frame while the video loads.
Wraps the entire video block in a link. When set, clicking the block navigates to the linked page instead of playing the video.
Controls how the video behaves when the page loads and while it plays.
Adds a colored layer over the video to improve the readability of any text or buttons placed on top.
None, Solid,
Fade from bottom, or
Full gradient
Controls where overlay content appears on the video. Identical to the Image block alignment controls.
Top, Middle, or
Bottom
Left, Center, or
Right
Select a color scheme to style the overlay text and content colors for this video block.
Video blocks accept Text, Button, and Logo child blocks, just like Image blocks.
The Color block is a flexible content card that uses a solid background color, color scheme, or background image instead of a standalone photo or video. It's ideal for promotional messages, calls to action, brand statements, or any content tile where you want full control over the background appearance.
Wraps the entire block in a link. When set, clicking anywhere on the block navigates to the linked page.
Controls the layout and sizing behavior of the block and its child content.
Horizontal or Vertical.
Determines whether child blocks stack vertically or sit
side by side.
Fit (sizes to
content) or Fill (expands to fill
available space)
Fit (sizes to
content) or Fill (stretches to fill the
container)
Auto or Narrow. Constrains
the width of the content area inside the block.
Adds a colored layer over the background image (if one is set) to improve text readability.
None, Solid,
Fade from bottom, or
Full gradient
Controls where content appears within the block.
Top, Middle, or
Bottom
Left, Center, or
Right
Controls the background visual of the block.
Color blocks accept any theme blocks as children, giving you the flexibility to add Text, Button, Logo, and other blocks directly inside the color block.
Gallery blocks come with features that work automatically — no apps or custom code needed.
The gallery grid automatically adapts across screen sizes. On large desktops it uses the configured number of columns, on smaller desktops and tablets it reduces to fewer columns, and on mobile it stacks to a single column.
All items inside a Gallery Items block share the same
aspect ratio, ensuring a clean, uniform grid. Choose
from six presets or use Auto to let each
item size based on its content.
Every gallery block type (Image, Video, and Color) includes the same overlay system with four styles: None, Solid, Fade from bottom, and Full gradient. This makes it easy to keep text readable regardless of the background content.
Layer Text, Button, and Logo blocks on top of any gallery item. Content is positioned using the alignment and padding settings, giving you precise control without any coding.
When an Image block has a link, hovering over it triggers a subtle zoom animation on the image. This provides a visual cue that the block is interactive and clickable.
Video blocks can be set to play automatically and loop continuously, making them ideal for ambient background videos and lifestyle clips. When autoplay is enabled, the video is automatically muted.
Video blocks support both uploaded video files from your Shopify media library and external YouTube or Vimeo URLs. External videos are embedded as iframes that fill the block area.
Color blocks can use a solid color, a color scheme, or a background image — and they accept any theme block as a child. This makes them a versatile building block for promotional tiles, brand statements, or calls to action within your gallery.
Quick answers to common questions about Gallery blocks.
Auto (fit content). Choosing a fixed ratio
like Square, Portrait, or
Widescreen forces all items to the same
proportions. Images and videos will be cropped to fill
the shape.