Solved

Call to Action - Button over a Custom Liquid video?

Alun
Explorer
55 2 16

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

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
7729 1507 1516

This is an 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

 

 

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 13 (13)

Dan-From-Ryviu
Shopify Partner
7729 1507 1516

This is an 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

 

 

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Alun
Explorer
55 2 16

That's amazing Dan! Thanks so much

Alun
Explorer
55 2 16

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
Shopify Partner
7729 1507 1516

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

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Alun
Explorer
55 2 16

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
Shopify Partner
7729 1507 1516

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

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Alun
Explorer
55 2 16

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

 

Dan-From-Ryviu
Shopify Partner
7729 1507 1516

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

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Alun
Explorer
55 2 16

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
Shopify Partner
7729 1507 1516

You can find section ID when view source of page 

Screenshot 2023-11-24 at 16.50.47.png

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Alun
Explorer
55 2 16

Great - thanks!

Dan-From-Ryviu
Shopify Partner
7729 1507 1516

Very welcome

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

polarisdsgn
Visitor
1 0 0

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