Call to Action - Button over a Custom Liquid video?

[Alun]

Hi,

I have a custom liquid section that displays a video on my landing page. I was wondering if it was possible to add a "call to action" button (to send people to my shop) that overlays the video? The code I have so far is:-

<style>
  video {
    display: block;
    margin: 0 auto;
    width: 97%;
    height: 50%;
  }

  @media screen and (max-width: 767px) {
    video {
      display: none;
    }
  }
</style>

<!-- Video section will be hidden on mobile devices -->
<video autoplay loop playsinline muted>
  <source src="https://cdn.shopify.com/videos/c/o/v/dfc57cbdaa394a368dd633a60a1c9615.mp4">
</video>

Using Dawn Theme 11 and my URL is https://www.snowdoniahoney.com (no password)

Apologies for the basic question but just learning my way around Shopify.

Best regards

Alun

[Dan-From-Ryviu · Accepted solution]

Hi @Alun 

You can use this code to do that. o

<style>
	.video-cover { position: relative; }
	.video-cover .cta-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 999; }
	video {
		display: block;
		margin: 0 auto;
		width: 97%;
		height: 50%;
	}

	@media screen and (max-width: 767px) {
		video {
		  display: none;
		}
	}
</style>

<!-- Video section will be hidden on mobile devices -->
<div class="video-cover">
	<!-- Call to action button -->
	<a class="cta-btn button" href="Add your site URL here">Open website</a>
	
	<video autoplay loop playsinline muted>
	  <source src="https://cdn.shopify.com/videos/c/o/v/dfc57cbdaa394a368dd633a60a1c9615.mp4">
	</video>
</div>

Please add URL that you want to open in href element of button code

[Alun]

That's amazing Dan! Thanks so much

[Alun]

Just a further thought - rather than moving to a different page, could the button move the viewer to different "coordinates"/section on the same page?

[Dan-From-Ryviu]

You can do that by adding Id of section that you want to move in href element

[Alun]

Sorry! I'm sure I'm being numb here but I've been trying to find out a way to this without success. I'm assuming that instead of sending the click of the button I created to the video file, it needs to reference the section that you want to jump to so it's at the top of the page?

multicolumn color-scheme-83ad98f1-5d87-469d-8257-b59fa0f1f3c6 gradient background-none
<div class="rich-text content-container color-scheme-83ad98f1-5d87-469d-8257-b59fa0f1f3c6 gradient rich-text--full-width content-container--full-width section-template--19592360198454__df329a39-baec-4186-82b2-b20f9fb17e73-padding">
    <div class="rich-text__wrapper rich-text__wrapper--center page-width">
      <div class="rich-text__blocks center"><h1 class="rich-text__heading rte inline-richtext h0 scroll-trigger animate--slide-in" data-cascade="" style="--animation-order: 0;">
                <strong>Welsh Wildflower Honey &amp; Welsh Heather Honey </strong>
              </h1></div>
    </div>
  </div>

 Do I use the "rich-text__wrapper" element and then change the button to reference that element??

[Dan-From-Ryviu]

Please add this to href element of button #shopify-section-template--19592360198454__df329a39-baec-4186-82b2-b20f9fb17e73

[Alun]

That's amazing @Dan-From-Ryviu ! Thanks for your help - I hope you like coffee? 😉

[Dan-From-Ryviu]

I love it. Thank you and have a great day ahead.

[Alun]

For my own learning, could I ask why you get the string "

#shopify-section-template--19592360198454__df329a39-baec-4186-82b2-b20f9fb17e73" from that goes into the button element?? How do you know what to leave out?

[Dan-From-Ryviu]

You can find section ID when view source of page 

[Alun]

Great - thanks!

[Dan-From-Ryviu]

Very welcome

[laurenahertex]

Hi! I would like to use this to add a CTA button to my home page video. I want it to link to a collection or landing page elsewhere on the site. How do I do that? I am also sorry if I'm being dumb here 😉

[Dan-From-Ryviu]

Hi @laurenahertex 

Please create a Custom Liquid section on your homepage in Sales channels > Online Store > Themes > Customize, replace Add your site URL here in the code with the page link you want the button to open. 

[laurenahertex]

Hi, I don't have the option to 'replace Add your site URL here in the code with the page link you want the button to open.' I only see the attached when I add a new section: 

[Dan-From-Ryviu]

Go to your store admin > Sales channels > Online store > Themes > Customize > click + Add section > Custom Liquid, add above code which marked as solution, and add your link 

[laurenahertex]

ok amazing, that worked 🙂 

next question: how do I create a button? at the moment it's just text and it's not in keeping with our brand. So can it be made to look the same as our other CTA buttons? Pls see attached screen shots - if possible I'd love to have the white CTA button?

[polarisdsgn]

this worked but i want the video to fill the page how would i do that?

[brigitosa]

Thank you, it works better than anything I tried. Only, how can I make it work on mobile devices also?