Fluorescent
Eclipse
Eclipse
  • Get started
    • Migrating to Eclipse
    • Theme license
  • FAQs
  • Changelog
    • Update your theme
  • General
    • Editing themes
      • Dynamic content with metafields
      • Edit default theme content
      • Multiple languages
      • Unique content for markets
      • Customizing your site
      • H1 heading tags
    • Image guide
      • Web ready photography
      • Image sizes
      • File formats
      • Theme image settings
    • SEO for Shopify
    • Online store speed
    • Accessibility
  • Theme settings
    • Theme settings
      • Social media
    • Theme styles
    • Fonts
    • Colors
  • Corner rounding
  • Pages
    • Page templates
      • Using templates
      • Customize page styles
      • Create and assign templates
    • Demo layouts
    • About page
    • Home page
    • Blog page
    • Blog post
    • Contact page
    • Password page
    • Search page
  • Sections
    • Sections
      • Using sections
      • Content blocks
    • Blog posts
    • Collapsible content
    • Collection list
    • Contact form
    • Featured collection
    • Featured links
    • Feature product
    • Grid
    • Icon with text columns
    • Image hero
    • Image with text
    • Multi-column
    • Newsletter
    • Rich text
    • Scrolling content
    • Shop the look
    • Shoppable feed
    • Slideshow
    • Video
    • Video hero
    • Video with text
    • Custom Liquid
  • Header
    • Announcement bar
    • Header
      • Layout and style
      • Logo
      • Transparent header
      • Mega menu
      • Language and Currency
    • Impact logo
    • Search
  • Footer
    • Footer
      • Image Text and Socials
      • Links block
      • Newsletter and Socials
      • Language and Currency
      • Custom Liquid
  • Products
    • Product listings
      • Product card styles
      • Sale and sold out badges
      • Quick shopping
    • Prices and currencies
    • Swatches
      • Use default colors
      • Use custom colors
      • Use custom images
  • Product pages
    • Product page
      • Gift card product
    • Media gallery
      • Media grouping
    • Product overview blocks
      • Description
      • Price
      • Buy buttons
      • Collapsible row
      • Complementary products
      • Custom option
      • Featured icon with text
      • Icon with text
      • Inventory status
      • Image block
      • Popup block
      • Product rating
      • Text block
      • Share icons
      • Custom Liquid
    • Variant selector
      • Info popup
    • Sticky add-to-cart
    • Sibling products
    • Product recommendations
  • Collections
    • Collection page
      • Banner
      • Product grid
      • Promotion tiles
      • Filters and sorting
    • Collection list page
  • Cart
    • Cart
    • Free shipping bar
    • Cross sells
  • Popups
    • Popups
  • Support
    • Support policy
    • Shopify vs Theme issues
    • Store access requests
  • Advanced
    • Custom CSS
    • Custom fonts
Powered by GitBook
On this page
  • Set up section
  • Section styles
  • Set up video
  • Upload and embed video
  • Change aspect ratio and focal point
  • Add cover image
  • Play video on loop
  • Add content blocks
  • Change content layout

Was this helpful?

  1. Sections

Video

Last updated 3 months ago

Was this helpful?

Editing templates will change all pages that use the same template. for different page layouts, or in the same template.

Set up section


In the editor side panel, click (+) Add section and select Video. Click and hold the drag handles ⋮⋮ to re-order sections.

Section styles


Click the section to edit general section styles for colors and spacing, available in all sections:

Set up video


The Video section accepts videos uploaded to Shopify or linked videos from Youtube and Vimeo.

Upload and embed video

Click Video section to find settings

Setting
Description

Shopify video

Select or upload a video.

Mobile Shopify video

Select or upload an alternate video to show on mobile devices.

Youtube or Vimeo URL

Enter the full URL of your YouTube or Vimeo video. The video must be public.

Video alt text

Enter alt text to describe the content and purpose of the video for customers using screen readers.

Change aspect ratio and focal point


You can crop the video to a uniform shape (Aspect ratio) and select the Focal point of your video to keep the most important part centred and avoid unwanted cropping.

These options only apply to Shopify-hosted videos.

Click Video section to find settings

Setting
Description
Options

Aspect ratio

Crop the video to a uniform shape, or select Natural to maintain its original shape. "Aspect ratio" refers to the proportion between the video's width and height (W:H).

Natural Default Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2) Landscape wide (16:9) Landscape ultrawide (21:9)

Video focal point

Specify the main focus of the video. The focal point will remain centered and within frame to avoid unwanted cropping.

Center Default Top Bottom Left Right

Add cover image


After choosing your video, you can add a Cover image that overlays the video before visitors click play.

Setting
Description

Cover image

Select or upload a preview image that overlays the video player. There are no required dimensions. A minimum width of 2500px will ensure optimal quality on the widest screens.

Play video on loop

After adding your video, you can choose to Play the video on loop.

Click Video section to find settings

Setting
Description
Options

Play video on loop

When checked, the video will start over after ending.

Add content blocks


Click (+) Add block to add text and image content to the section. Use the drag handles ⋮⋮ to re-order blocks, and add Spacer and Divider blocks to further customize the layout.

Change content layout


Click Video section to find settings

Setting
Description
Options

Content width

Use the sliders to set the maximum width (in pixels) of the section content.

200-1000 px Default: 500

Text alignment

Set the position of the text content for desktop screens.

Left Center Default Right

Text position

Set the position of the text content for desktop screens.

Above video Default Below video

Section colors

Section width

Section padding

Heading

Text

Overline text

Button

Image

Spacer

Divider

Custom Liquid

Create new templates
show dynamic page content