How can I add a "SHOP NOW" button and header text to my liquid video? (Dawn Theme)

CATAY
Tourist
6 0 1

I would like to add two pieces the the middle area of my liquid video on my homepage:

- Header Text

- SHOP NOW button

 

The example photo I've added below is of a Video Background with the same look I'm going for in the liquid video.

 

So far, this is the code we have in the liquid, for the video itself:

 

<style>

video {

display: block;
margin: 0 auto;
width: 100%;
height: 50%;
}

</style>

<video autoplay loop
playsinline muted>

<source src="https://cdn.shopify.com/videos/c/o/v/videoexample.mp4"></video>

 

Example of what we want:

Screenshot 2023-06-07 at 10.44.36 AM.png

Replies 10 (10)

made4Uo
Shopify Partner
3818 715 1135

Hi @CATAY 

 

You need a section to be written. I would suggest to hire someone to do this for you

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

gr_trading
Shopify Partner
1695 141 176

Hi @CATAY ,

 

update your code with the below one.

 

<style>
video {display: block; margin: 0 auto; width: 100%; height: 50%;}
.video_wrapper{position:relative;}
.video_overlay{position:absolute; top:0; right:0; left:0; bottom:0; padding:10px;}
</style>
<div class="video_wrapper">
	<video autoplay loop playsinline muted><source src="https://cdn.shopify.com/videos/c/o/v/videoexample.mp4"></video>
	<div class="video_overlay">
		<h1>Video heading</h1>
		<h5>Video subheading</h5>
		<a href="#">Link</a>
	</div>
</div>

 

Hope it will help...

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee
CATAY
Tourist
6 0 1

Thanks! I will try this now 😊

CATAY
Tourist
6 0 1

I've managed to create code that works. I'm pretty new to this so it's been tricky.

 

There are only minor issues now.

 

1. The video header title will overlap the "shop now" button on mobile, when the screen size is smaller. 

2. I cannot seem to adjust the section height, to make the video smaller on desktop view.

 

I tried adjusting code to make the header text smaller based on a maximum screen size, as well as adjusting the padding bottom to make the video height smaller. It did not seem to do anything though. 

 

Liquid section code found here:

 

 

<style>
.custom-video-section {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 20%; /* Adjust the padding-bottom value to make the section shorter */
}

.video-container {
  position: relative;
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-now-button {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 30px;
  display: inline-block;
  padding: 12px 24px;
  background-color: #DF3F0E;
  color: white;
  text-decoration: none;
  font-size: 16px;
  border-radius: 20px;
  z-index: 1;
}

.video-heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  font-size: 24px;
  z-index: 1;
}

@media (max-width: 768px) {
  .video-heading {
    font-size: 8px;
    top: 45%; /* Adjust the value to align the header text */
  }
}
</style>

<div class="custom-video-section">
  <div class="video-container">
    <video autoplay loop playsinline muted>
      <source src="https://cdn.shopify.com/videos/c/o/v/ee75b90e5e634fba9a0664dc8aeff6d1.mp4">
    </video>
    <h2 class="video-heading">A curated collection that reflects the warmth of our Brazilian roots.</h2>
    <a href="https://catay.us/collections/impar-atelier" class="shop-now-button">SHOP NOW</a>
  </div>
</div>

 

 

 

 

gr_trading
Shopify Partner
1695 141 176

It's because if you have position absolute in video-heading class

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee
CATAY
Tourist
6 0 1

Thanks for letting me know this is one of the issues.

 

1. What should I change video heading class position to instead of absolute?

 

2. Any ideas to make the video size smaller (shorter in height but still full width if possible) on desktop?

gr_trading
Shopify Partner
1695 141 176

For 1 point just remove the position attribute u don't need that attribute.

 

For point 2

You have video tag class put your desired height in it.

 

However your video has to in proportion of that height or width or video block will show black spot arround the video if your video is not in proportion.

 

Hope it will solve your issue.

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee
LL20
Visitor
1 0 0

Is there a way to use this code but have the ‘buy now’ link NOT blue and as a button with a square around it?

Zqdo
Shopify Partner
803 32 63

Hey @CATAY , saw you were able to get some help. Were you able to figure out the issue?

banned
CATAY
Tourist
6 0 1

Hi @Zqdo! Thanks for asking. 

 

Still having some issues figuring out how to implement a solution for:

 

1. shop now button / video header title overlap on small screens (especially mobile)

 

2. making the video frame size smaller (shorter in height but still full width if possible) on desktop

 

Any insight is appreciated!