Most Checkmate sections can show a photo or a video behind their content, the way the Hero does. A background video plays without sound, in a loop, with no controls. To show a video customers can play with sound, use the Video section instead.
The section needs a Background group in its settings. These sections have one: Blog posts, Comparison, Contact form, Custom Liquid, Facts, FAQ, Featured collection, Featured product, Features, Highlights, Orbit, Promo list, Section, Specifications, Steps, Subscription, Testimonials and Video. The Hero has the same settings in its Media group, plus a Mobile image for phones, as Hero section describes.
Card rail, Marquee, Photo wall, Stacking cards and Timeline have no background. In Hotspots, the Background group holds the photo the product points sit on, with no video or color.
Under Background, select Image in Background type.
Under Background image, choose a photo.
Click Save.
The photo fills the section, and its edges are cut to fit the section's shape. For a sharp photo, use one at least 3840 px wide, as Image sizes explains.
In the Hero, Section and Video sections, the photo moves a little slower than the page as customers scroll. To keep it still, turn off Background parallax under Motion.
Add a background video
Pick one of three sources for the video.
Source
Setting
Use it when
A video you upload to Shopify
Video in Background type, then Background video
You have the video file
A link to an MP4 file
Video in Background type, then Video file link
The file is already online, such as in Content > Files in your Shopify admin
A YouTube or Vimeo video
YouTube or Vimeo in Background type, then Video URL
Under Background, select Video or YouTube or Vimeo in Background type.
Choose the video in Background video, or enter its address in Video file link or Video URL. A video file link ends in .mp4. A video URL looks like https://www.youtube.com/watch?v= or https://vimeo.com/ followed by the video's code.
Under Background image, choose a still image to show before the video plays.
Click Save.
Video file link is used only when Background video is empty. To get the link of a file you uploaded to Content > Files, copy it there, as Shopify's guide to files describes.
The still image in Background image is also what visitors see when their device is set to reduce motion, because the video does not play for them. With an uploaded video and no still image, the video's own preview frame shows instead. With a video file link or a YouTube or Vimeo video and no still image, those visitors see no background at all.
If you select Video and leave both video fields empty, the section shows the still image as a background photo.
A YouTube or Vimeo video is enlarged a little to keep the player's bars and buttons out of view, so more of its edges is cut than a photo's would be.
Make the text readable over the background
Setting
What it does
Overlay opacity
Darkens the photo or video, from 0% to 100%. Above 0%, the section's text and buttons switch to your dark mode colors, so they read as light on dark.
Text color
One color for all text over the background. Leave it empty to let the section pick its text colors. Shows with Image, Video, YouTube or Vimeo, and a Custom color. The Video section has no Text color.
Choose the width
Background width has two choices. Inset, the default, leaves a small margin at both sides of the screen and rounds the corners. Full stretches the background to both edges of the screen.
The background covers the section's padding, not its margins. Padding top and Padding bottom start at None in most sections, so the content sits close to the top and bottom edges of the background.
Under Layout, set Padding top and Padding bottom to add room between the content and the edges of the background. Section layout settings explains them.
Use a color instead
Select Color in Background type, then choose Surface, Surface, stronger or Custom in Background color. Surface and Surface, stronger are two shades of your page background that turn dark in dark mode. Custom shows a Color picker, and that color stays the same in both modes. A custom color darker than mid gray switches the section's text to your dark mode colors.
Most Checkmate sections can show a photo or a video behind their content, the way the Hero does. A background video plays without sound, in a loop, with no controls. To show a video customers can play with sound, use the Video section instead.
The section needs a Background group in its settings. These sections have one: Blog posts, Comparison, Contact form, Custom Liquid, Facts, FAQ, Featured collection, Featured product, Features, Highlights, Orbit, Promo list, Section, Specifications, Steps, Subscription, Testimonials and Video. The Hero has the same settings in its Media group, plus a Mobile image for phones, as Hero section describes.
Card rail, Marquee, Photo wall, Stacking cards and Timeline have no background. In Hotspots, the Background group holds the photo the product points sit on, with no video or color.
Add a background photo
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
In the editor sidebar, select the section.
Under Background, select Image in Background type.
Under Background image, choose a photo.
Click Save.
The photo fills the section, and its edges are cut to fit the section's shape. For a sharp photo, use one at least 3840 px wide, as Image sizes explains.
In the Hero, Section and Video sections, the photo moves a little slower than the page as customers scroll. To keep it still, turn off Background parallax under Motion.
Add a background video
Pick one of three sources for the video.
Source
Setting
Use it when
A video you upload to Shopify
Video in Background type, then Background video
You have the video file
A link to an MP4 file
Video in Background type, then Video file link
The file is already online, such as in Content > Files in your Shopify admin
A YouTube or Vimeo video
YouTube or Vimeo in Background type, then Video URL
The video is on one of those sites
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
In the editor sidebar, select the section.
Under Background, select Video or YouTube or Vimeo in Background type.
Choose the video in Background video, or enter its address in Video file link or Video URL. A video file link ends in
.mp4. A video URL looks likehttps://www.youtube.com/watch?v=orhttps://vimeo.com/followed by the video's code.Under Background image, choose a still image to show before the video plays.
Click Save.
Video file link is used only when Background video is empty. To get the link of a file you uploaded to Content > Files, copy it there, as Shopify's guide to files describes.
The still image in Background image is also what visitors see when their device is set to reduce motion, because the video does not play for them. With an uploaded video and no still image, the video's own preview frame shows instead. With a video file link or a YouTube or Vimeo video and no still image, those visitors see no background at all.
If you select Video and leave both video fields empty, the section shows the still image as a background photo.
A YouTube or Vimeo video is enlarged a little to keep the player's bars and buttons out of view, so more of its edges is cut than a photo's would be.
Make the text readable over the background
Setting
What it does
Overlay opacity
Darkens the photo or video, from 0% to 100%. Above 0%, the section's text and buttons switch to your dark mode colors, so they read as light on dark.
Text color
One color for all text over the background. Leave it empty to let the section pick its text colors. Shows with Image, Video, YouTube or Vimeo, and a Custom color. The Video section has no Text color.
Choose the width
Background width has two choices. Inset, the default, leaves a small margin at both sides of the screen and rounds the corners. Full stretches the background to both edges of the screen.
The background covers the section's padding, not its margins. Padding top and Padding bottom start at None in most sections, so the content sits close to the top and bottom edges of the background.
Under Layout, set Padding top and Padding bottom to add room between the content and the edges of the background. Section layout settings explains them.
Use a color instead
Select Color in Background type, then choose Surface, Surface, stronger or Custom in Background color. Surface and Surface, stronger are two shades of your page background that turn dark in dark mode. Custom shows a Color picker, and that color stays the same in both modes. A custom color darker than mid gray switches the section's text to your dark mode colors.
Section background settings describes every setting in the Background group.