Skip to main content

Media Blocks

Media blocks bring pictures, video, and backdrops into your layouts. Use the Image, Video, and Image comparison blocks as content inside any Group or Layout item, and drop a Background color or Background image block inside a Section, a Group, or a Layout item to paint the container behind its other blocks without changing the container's own Appearance settings. Mind includes 5 media blocks.

Image​

block-image.webp

The Image block displays an image with a decorative mask, size, border, hover, and animation controls.

Settings:

  • Image: Select an image from your store's library.
  • Image (darkmode): An alternate image shown when the visitor switches to dark mode.
  • Enter the URL: Optional link wrapping the image, with an option to open it in a new tab.
  • Show on: Display on all devices, desktop only, or mobile only.
  • Mask: Crop the image to a shape: Arch, Arc Corner, Wavy Blob, Convex, Hourglass, Cloud, Butterfly, Petal Shield, Flower Quad, Layered Oval, or Stamp.
  • Size: Aspect ratio (auto, 3:4, 1:1, 4:3, 16:9, or a custom width/height ratio), width (fit or fill), height (fit, fill, or custom), and separate desktop and mobile max widths. Mobile can inherit the desktop values or use its own.
  • Borders: Border style, width, color, opacity, and corner radius.
  • Hover: Hover effect (None, Colorize, Zoom, Rotate, Shine, or Ripple) and its duration.
  • Animation: Global preset, custom effect and duration, or none.
  • Padding: Device-specific top, bottom, left, and right padding.

Video​

block-video.webp

The Video block plays a Shopify-hosted video or an external YouTube or Vimeo video, with a styled play button.

Settings:

  • Type: Uploaded or External URL.
  • Video: Pick a video uploaded to your store's files.
  • Video URL: Paste a YouTube or Vimeo URL, shown when the type is External URL.
  • Cover image: Thumbnail displayed before the video plays.
  • Loop video, Autoplay, and Controls: Playback options.
  • Aspect ratio: Auto, 3:4, 1:1, 4:3, 16:9, or a custom width/height ratio.
  • Video alt text: Describe the video for customers using screen readers.
  • Button controls: Size, icon color, background color, border, and corner radius of the play button.
  • Animation: Global preset, custom effect and duration, or none.
  • Border: Corner radius of the video frame.

Image comparison​

block-image-comparison.webp

The Image comparison block places two images on top of each other with a draggable handle, so visitors can slide between a "before" and an "after" view.

Settings:

  • Image before and Image after: The two images to compare.
  • Aspect ratio: Auto, 3:4, 1:1, 4:3, 16:9, or a custom width/height ratio.
  • Corner radius: Rounding of the comparison frame.
  • Button handle: Icon color and background color (with opacity) of the drag handle.
  • Padding: Device-specific top, bottom, left, and right padding.
  • Child blocks: Two Label blocks (below), one for each image, added automatically.

Label​

block-image-comparison-label.webp

The Label block is the caption shown over the "before" or the "after" image. Each Image comparison block always has two of them; you edit them from inside the block and cannot remove them.

Settings:

  • Text: The label text, for example "Before" or "After".
  • Position: Top, Center, or Bottom of the image, with top, bottom, left, and right offsets per device.
  • Typography: Preset or custom font, size, italic, weight, line height, letter spacing, case, and wrap, plus color, opacity, and line clamp.
  • Appearance: Color scheme, background (none, color, or gradient), corner radius, and border.
  • Padding: Device-specific spacing inside the label.

Background color​

block-bg-color.webp

The Background color block fills its parent with a solid color or a gradient.

Settings:

  • Type: Color or Gradient.
  • Background color: A color from the current scheme (Primary, Secondary, Tertiary, Background, Gradient background, Foreground, Foreground 2, Layer 1-4, or Status 1-5) or Custom.
  • Background color opacity: Fade a scheme color from 5% to 100%.
  • Custom background color: A color picker, shown when the color is set to Custom.
  • Background gradient: One of the built-in Ember gradients or Custom, with a Custom gradient editor.
  • Sticky gradient: Pins the gradient to the viewport at full height while the section scrolls.

Background image​

block-bg-image.webp

The Background image block covers its parent with an image, with a separate image for mobile, an optional overlay, and an optional parallax scroll.

Settings:

  • Device: Switch between the desktop and mobile image pickers.
  • Background image desktop: The image shown on desktop screens.
  • Background image mobile: An alternate image for mobile screens; leave it empty to reuse the desktop image.
  • Background overlay: None, Color, or Gradient, with an Overlay color or Overlay gradient to darken or tint the image so text stays readable.
  • Use parallax: Move the image slightly slower than the page as the visitor scrolls.

The image is cropped to cover the container, so pick an image whose focal point works at both wide and tall sizes.

tip

To build a tinted photo panel, add a Background image block to a Group, set its Background overlay to Color or Gradient, then add your Heading, Text, and Button blocks to the same Group. Use the Background color block when you only need a flat color or a gradient.