Video Banner

About Shine Theme Video BannerClick to copy 2222

The Shine Theme Video banner displays a video as the background. It often appears at the top of the website’s homepage.

Video Banner

Access Shine Theme Video BannerClick to copy 2222

From any page in the Shine Admin Dashboard, click on the Add section button > Search for Video banner > Click on it to add the Video Banner section to your page.

Video Banner

Shine Theme Video Banner ConfigurationClick to copy 2222

To configure the Video banner section, click on the section to access the configuration settings.

Video Banner

GeneralClick to copy 2222

Under the Color Scheme, you can choose a specific scheme for the Video banner section. To modify or add a new color scheme, go to Theme Settings > Color.

Video banner

In general, you can paste your video link at External video option or Select video from Shopify-hosted video option which has been uploaded to your Shopify store.

  • External

Video banner

  • Shopify-hosted

Video banner

Note: In the External video option, the Shine theme supports videos from Youtube and Vimeo. If you use video from the Shopify-hosted option, it will override the External video before.

Large ScreenClick to copy 2222

The Video banner section offers three height options to cater to your specific requirements. These options are reflected in the Section height option:

  • 50% screen: This option resizes the banner to fit the content.
  • 70% screen: This default setting provides the highest-quality Video display.
  • Fill screen: This option expands the Video banner to cover the entire page’s width and height.

Video banner

Note: The Section height settings typically establish a minimum height for each section. This means that the actual height of a section may be greater than the specified value if its content exceeds the available area.

You can adjust the position for the content of the section area, which can be changed at Content Position:

  • Top left
  • Top center
  • Middle left
  • Middle center
  • Bottom left
  • Bottom center

Video banner

Mobile ScreenClick to copy 2222

You can set the banner height of the section for smaller screens, such as mobile devices, in the Section height option. The setting options are the same with large screen settings.

Video banner

SpacingClick to copy 2222

You can choose to customize the outer spacing top/bottom of the Video banner section.

  • Remove outer spacing top
  • Remove outer spacing bottom

Video banner

Custom ColorClick to copy 2222

You can customize the colors of the Mask overlay by clicking on the color picker. You can adjust the Overlay opacity between 0 and 90.

You can also customize the colors of the Text overlay by clicking on the color picker.

Video banner

The default color of the Mask overlay and Text overlay are transparent.

Shine Theme Video banner Blocks ConfigurationClick to copy 2222

The Video banner section provides five block types: Subheading, Heading, Description, Buttons, and Countdown timer.

To add blocks to the Video banner, simply click the Add Block button.

Video banner

To modify an existing block, click on it to open the settings modal.

For more details customization about Subheading, Heading, Description, Button, and Countdown Timer blocks, check out Image Collage With Text article.

Navigate this category