Drive theme Carousel

Store Design
1

Hiya,
I’ve been trying to create Carousel in Drive theme with video background for each card. However, when I use a video as background it automatically covers up any text and the content isn’t clickable anymore. I wanted it to be a carousel of videos showcasing some of my products with text overlay and with the ability to click on the video and be able to get redirected to the product that’s shown in the video if that makes sense.

I contacted the shopify support but they said there is nothing they can do and suggested that I reach out to you guys. They said that many of you are developers and might be able to help me with a custom code to fix this issue.

Any help would be appreciated!

2

This definitely needs custom coding. The video needs to be on the background, with texts in front. The entire video can be a link to any page within your store.

Best

3

are you able to help with a custom code to do this?

4

I can but I will need Collab access to store because you are using a paid theme and I cannot test a paid theme on my dev store.

Best

5

Yeah the video background is probably set with a z-index that’s covering everything. You need to either lower the z-index on the video layer or raise it on the text and button elements. What’s happening now when you try to click through, does nothing happen at all or does it play the video instead?

6

It would be helpful if you can share a preview link to your work in progress theme and a preview password, if one it set.

Drive has its own Carousel section where you can add Video slides.
Video slides can have overlay text and buttons.
If you do not like to show buttons, but want entire slide be clickable, this is achievable with small code added to sections Custom CSS, like this:

a.button-block {
  position: absolute;
  inset: 0;
  opacity:0;
}

.banner-box {
  width: 100%;
  height: 100%;
  max-width: none !important;
  padding: 20%;
}

.banner-content, 
.banner-content-wrapper {
  padding: 0 !important;
}

You’d need to configure a single button though with proper URL. The code will stretch the button to cover entire slide, but will make it transparent so that it does not cover anything.