How to add a background video to the homepage slider in Venture theme?

Venture is one of the most downloaded free themes from Shopify.

The design of its homepage is perfect to place a video as background and make your store look amazing. 

You can also add one video to each slide.

It is possible to add videos to each slide easily using the following pattern:

.hero__slide[data-slick-index="N"]:not(.slick-cloned) .hero__image

where N is the index of the slide starting from 0.

If we want to put the video on the first slide, we have to write this selector:

.hero__slide[data-slick-index="0"]:not(.slick-cloned) .hero__image

and if we want to put the video on the third slide, we have to write this selector:

.hero__slide[data-slick-index="2"]:not(.slick-cloned) .hero__image

To do so, let's go to the app preferences page and tap on the Add new video option.

Once on this page, make sure to select the home page and Element replacement video options on the video location page, as well as to configure the selector mentioned before:

After this, you can click on Save and continue and introduce the desired video URL on the following page:

Finally, the video should be properly visible on the desired position.

If we want to replace the entire slider, we can use this selector:

.hero
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us