Shopping Cart
Log in | Create account

Password Page Video Teaser Manual

subdirectory_arrow_right

Setup up the password page video teaser

face

Hi there, great to have you on this site. By now you have probably purchased the gorgeous password page video teaser feature, and we have installed the code on your page.

This manual consists of three parts which explain: 

  • chevron_rightIdentifying the possible settings for this feature
  • chevron_rightSetup your videos correctly
  • chevron_rightMechanics and technical stuff

warning

 We have designed our features to allow you to set as many options as possible yourself. Please let us know if you miss something or find the explanation hard to follow!

looks_one

Check the possible Settings

The settings are located in your normal theme customizer area. In you Shopify Admin Area, please go to "Online Store" --> "Themes"and click on "customize theme". In the left hand side list of theme settings, scroll all the way to bottom. You will find a new area "Password Video". There is a list of settings available, where you can control

  • chevron_rightThe source of your video
  • chevron_rightOverlay and fallback styles
  • chevron_rightToggle loop, play/pause and mute buttons

It is a little tricky to browse to the password page of your own store, as you will probably already have entered the password and won't even see it anymore. You can still get there by opening a private browsing session in your browser and browsing to your webpage.

Admin Settings

looks_two

Upload or embed the video

Your existing background will be replaced by a video if you either enter the Youtube ID OR enable the direct upload option. Youtube embeds will have priority if you enable Youtube and direct upload.

Youtube Embed

Identify the ID of the video you would like to embed and paste it to the text field. That's it, the video will now be embedded. If you want an image to be displayed after the video is finished just enter the video length (in seconds) and upload a poster image.


Direct Upload

Format your video file as .mp4 and/or .webm, try to have both to ensure compatibility across browsers. Browse to your Shopify Settings and upload the files. Make sure to name the files password-video.mp4 and password-video.webm respectively.

After the file(s) is (are) uploaded toggle the respective checkboxes to activate the feature.

looks_3

Mechanics

Fallback and Loading Image

If the video does not work for some reason or loading takes time the poster image will be displayed instead. Also, this image will fade-in after the youtube video has finished.

For directly uploaded videos you can toggle "Loop" and the video will play in loop. If this is turned of it will stop at the last frame.


Accessibility

To ensure accessibility and for good curtesy you can enable Play/Pause as well as Mute buttons. Simply check the respective checkboxes to make the buttons appear. The buttons are styled in the standard styles of your theme.

For directly uploaded videos you can toggle "Loop" and the video will play in loop. If this is turned of it will stop at the last frame.


Semi transparent overlay

To ensure that the content above the video has sufficient contrast at all times you can activate an overlay. Simply toggle the checkbox, choose a color (black or white makes most sense) and type a value between 0 and 1 for opacity.