Video

Embeds a video (hosted file, YouTube, or Vimeo) with an optional cover image, heading, and text overlay.

Section settings #

• Color scheme: Choose which color scheme (defined in Theme settings → Colors) this element uses.
• Section width: Choose from: “Page”, “Full”.

Desktop settings #

• Source: Choose from: “Uploaded”, “External url”, “Image”.
• Shopify-hosted video: Add a video by uploading a file or pasting a YouTube/Vimeo URL.
• youtube or Vimeo video URL: Add a video by uploading a file or pasting a YouTube/Vimeo URL.
• Image: Upload or select an image to display.

Mobile settings #

• Shopify-hosted mobile video: Add a video by uploading a file or pasting a YouTube/Vimeo URL.
• youtube or Vimeo mobile video URL: Add a video by uploading a file or pasting a YouTube/Vimeo URL.
• Mobile image: Upload or select an image to display.

Video settings #

• Autoplay: Turns the “Autoplay” option on or off.
• Loop video: Turns the “Loop video” option on or off.
• Muted: Turns the “Muted” option on or off.
• Overlay color scheme: Choose which color scheme (defined in Theme settings → Colors) this element uses.
• Overlay opacity (%): Fine-tune this value with the slider (from 0 to 80).
• Desktop aspect ratio: Choose from: “1:1”, “3:2”, “16:9”, “4:3”, “None”.
• Mobile aspect ratio: Choose from: “1:1”, “2:2.5”, “2:3”, “2:4.5”, “2:5”, “3:2”, “16:9”, “4:3”, “None”.
• Direction: Choose from: “Vertical”, “Horizontal”.
• Desktop content position: Choose from: “Top left”, “Top center”, “Top right”, “Middle left”, “Middle center”, “Middle right”, “Bottom left”, “Bottom center”, “Bottom right”.

Centered small thumbnail overlay #

• Enable centered small video preview overlay: Switch this on to activate centered small video preview overlay.
• Centered video thumbnail image: The small width preview image overlay
• Heading: Enter a longer block of plain text.
• Heading size: Choose from: “H1”, “H2”, “H3”, “H4”, “H5”, “H6”.
• Text: Enter a longer block of plain text.
• Text size: Choose from: “H1”, “H2”, “H3”, “H4”, “H5”, “H6”.
• Button label: Enter the text you want to display.
• Button link: Link this element to a page, product, collection, blog, or external URL.
• Centered thumbnail max width: Fine-tune this value with the slider (from 200 to 800px).
• Top padding: Fine-tune this value with the slider (from 0 to 100px).
• Bottom padding: Fine-tune this value with the slider (from 0 to 100px).

@theme block #