How to add a background video to the homepage slider in Pop theme?
Pop is one of the most downloaded free themes from Shopify.
One of the outstanding features of this theme is its homepage image slider. You can take advantage of this feature and add a video to each slide with Video Background.
It is possible to add videos to each slide easily using the following pattern:
#slide--slideshow-N:not(.clone) > img<br><br>
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:
#slide--slideshow-0:not(.clone) > img<br><br>
and if we want to put the video on the third slide, we have to write this selector:
#slide--slideshow-2:not(.clone) > img<br><br>
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 Section Video Background 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.
Note that it is important to keep the target element transparent:
If we want to replace the entire slider, we can use this selector:
.flexslider<br>