Media Gallery

Key Features for Interactive Media Galleries

Create engaging media galleries with hover effects, clickable visuals, overlay content, flexible sizing, custom positioning, responsive layouts, and detailed styling controls.

Get App

Multiple Media Items

Add up to three media items inside each gallery block, with separate images, content, links, and hover effects.

Hover Video Experience

Add a Shopify-hosted video that automatically appears when visitors hover over a media item on the desktop.

Alternate Hover Images

Show a different image on hover when no hover video is configured, creating a smooth visual transition.

Custom Media Content

Add a heading and rich-text content above each media item to highlight products, messages, or visual details.

Clickable Media Items

Add a custom link to each media item so visitors can navigate directly to related products, collections, or pages.

Flexible Media Heights

Choose small, medium, or large media heights to control the overall size and visual impact of gallery items.

Custom Content Positioning

Position overlay content at different locations on desktop and mobile, with separate controls for each device.

Responsive Gallery Layout

Automatically adapt gallery items for mobile with stacked media, adjusted heights, spacing, typography, and content positioning.

Media Gallery Settings & Options

Customize gallery content, media sizing, spacing, overlay positions, typography, colors, border radius, section padding, and width.

Section Settings

Applies to the whole section

Add the main heading displayed above the media gallery.

Section Heading

Add rich text below the heading to introduce or describe the gallery.

Section Content

Choose the alignment of the main heading and section content.

Text Alignment

Select small, medium, or large height options for gallery media items.

Media Height

Control the gap between media items displayed within each gallery row.

Media Spacing

Choose where the overlay heading and content appear on desktop.

Desktop Content Position

Set a separate overlay position for gallery content on mobile devices.

Mobile Content Position

Set overlay text alignment to left, center, or right.

Content Text Alignment

Adjust the corner radius of each gallery media item.

Media Border Radius

Choose a full-width display or set a custom maximum section width.

Section Width

Add Section

Block Settings

Applies to each media item

Select the main image displayed for each media item.

Media Image

Add a video that appears automatically when visitors hover over the media.

Hover Video

Add an alternate image that appears when the hover video is blank.

Hover Image

Add a custom heading that appears over the selected media item.

Media Heading

Add rich text content to display as an overlay on the media.

Media Content

Add a URL that visitors can open by clicking the media item.

Media Link

Customize separate heading and content colors for each media item.

Media Colors

Add Section

Where This Section Can Be Used

Use this section across different store pages to showcase visual content, products, campaigns, collections, services, and promotional messages with interactive media.

Home
Collection
Product
Landing

Home

Create an Engaging Visual Homepage Gallery

Showcase featured products, collections, campaigns, or brand visuals using large media cards with hover effects, overlay content, and clickable destinations.

Highlight important visual content above the fold.

Add hover videos to make presentations more engaging.

Link each media item to relevant store pages.

Display short promotional messages over images.

Create flexible gallery layouts for different campaigns.

Collection

Showcase Collection Visuals with Interactive Media

Use gallery items to introduce collection themes, featured products, or category visuals with custom links, alternate hover images, and useful overlay content.

Present multiple collection visuals within a single section.

Link each image directly to relevant collections.

Use alternate images to show different visuals.

Add headings to explain collection highlights.

Adjust media height to suit the collection page.

Product

Present Product Visuals with Hover Interactions

Use interactive gallery cards to showcase product imagery, alternate visuals, promotional content, and supporting information while directing shoppers to relevant destinations.

Showcase product imagery in a flexible layout.

Add alternate visuals using hover images.

Use videos to create dynamic product presentations.

Add useful content over product visuals.

Link media directly to related product pages.

Landing

Build Visual Campaign Sections for Landing Pages

Create focused visual sections for campaigns, promotions, services, or brand storytelling using custom media, hover effects, overlay content, and clickable links.

Create strong visual sections for campaigns.

Combine images with hover videos or images.

Add promotional messages directly over media.

Connect visuals to dedicated landing destinations.

Control the layout for desktop and mobile visitors.

Built for Engaging Visual Experiences

Give customers an interactive way to explore images, hover effects, videos, and content across desktop, tablet, and mobile.

Why Choose Media Gallery

Make visual content more engaging with a responsive gallery designed for interactive media, clickable content, hover effects, and flexible layouts.

Showcase products and visual content

Create engaging hover experiences

Highlight important product details

Add videos and alternate images

Guide customers with clickable media

Deliver a better mobile experience

Match your store branding

Do this, skip that.

DO

Use high-quality and relevant images for every media item.
Keep overlay headings short, clear, and easy to scan.
Use hover videos when they add useful visual information.
Add relevant links that match the displayed media content.
Check content positioning and spacing carefully on mobile.

DON'T

Avoid using unrelated images within the same gallery.
Don't fill media cards with too much overlay text.
Avoid hover videos that distract from the main visual.
Don't use links that are unrelated to the displayed media.
Don't ignore mobile layout, spacing, and content positioning.

Frequently Asked Questions

How many media items can I add to one gallery block?

Each gallery block supports three media items. Every item can have its own image, hover video, hover image, heading, content, link, and color settings.

Can I add a video that appears when visitors hover?

Yes. You can add a Shopify-hosted hover video to each media item. On desktop, the video appears automatically when the visitor hovers over the item.

What happens if I do not add a hover video?

If the hover video is blank, you can use a hover image instead. If both are blank, the main image is used as the hover visual.

Can I add text over each media item?

Yes. Each media item supports a custom heading and rich-text content that can appear as an overlay on the visual.

Can each media item have a different link?

Yes. Each media item has its own link setting, allowing you to send visitors to different products, collections, landing pages, or other URLs.

Can I change the position of the overlay content?

Yes. You can control the content position separately for desktop and mobile, with multiple positioning options available.

Can I choose different media heights?

Yes. The section provides Small, Medium, and Large media height options to control the visual size of gallery items.

Is the section optimized for mobile devices?

Yes. On mobile, gallery items stack vertically and use dedicated mobile settings for media height, spacing, content position, and typography.

Help Center

We're Here to Help: We believe in providing exceptional customer support!

For Support or any Questions Email Us: [email protected]

Ready When You Are: Create an Interactive Media Gallery

Install SectionHub and add the Media Gallery section to your theme in minutes - no coding required.