Adding an extra button at the top of my cover page

Site URL: http://www.mattlaurencemusic.com/

Hey guys, I'm using the cover page as a landing page and I wanted to know if there's anyway to add another "book now" button right at the top, under the title, or at the very least, to bring the existing button up to the top? The person I use for marketing said that it would really help conversions to have a button at the top and bottom.

Maybe there's another kind of page that would work better. I tried looking through some other site templates and I didn't really find anything that was able to include a product directly.

Is there any quick work around that would prevent me from rebuilding everything?

Which plan do you use? Personal or Business?

I have the commerce plan

Add to Cover Page Settings > Advanced > Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$('<div class="sqs-slice yui3-widget sqs-slice-buttons sqs-slice-buttons-content sqs-slice-buttons-focused" data-slice-type="buttons"><a href="https://beaverhero.com">Top Button</a></div>').insertAfter("h1#sqs-slash-page-header");
});
</script>
  

replace beaverhero with your page url

replace top button with new text

58 minutes ago, tuanphan said:

Add to Cover Page Settings > Advanced > Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$('<div class="sqs-slice yui3-widget sqs-slice-buttons sqs-slice-buttons-content sqs-slice-buttons-focused" data-slice-type="buttons"><a href="https://beaverhero.com">Top Button</a></div>').insertAfter("h1#sqs-slash-page-header");
});
</script>
  

replace beaverhero with your page url

replace top button with new text

Awesome. thank you!! I got the buttons but it seems I ended up with 2 of them and I need to delete the tope one and move the bottom one under the title. Thanks for you help!!

remove above & use this

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$('<div class="sqs-slice yui3-widget sqs-slice-buttons sqs-slice-buttons-content sqs-slice-buttons-focused" data-slice-type="buttons"><a href="https://beaverhero.com">Top Button</a></div>').insertAfter(".sqs-slice-group.group-copy.stacked h1#sqs-slash-page-header");
});
</script>

4 minutes ago, tuanphan said:

remove above & use this

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$('<div class="sqs-slice yui3-widget sqs-slice-buttons sqs-slice-buttons-content sqs-slice-buttons-focused" data-slice-type="buttons"><a href="https://beaverhero.com">Top Button</a></div>').insertAfter(".sqs-slice-group.group-copy.stacked h1#sqs-slash-page-header");
});
</script>

 

That lost them both that time 😕

try again with this code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$('<div class="sqs-slice yui3-widget sqs-slice-buttons sqs-slice-buttons-content sqs-slice-buttons-focused" data-slice-type="buttons"><a href="https://beaverhero.com">Top Button</a></div>').insertAfter(".sqs-slice-group.group-copy h1#sqs-slash-page-header");
});
</script>

17 minutes ago, tuanphan said:

try again with this code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$('<div class="sqs-slice yui3-widget sqs-slice-buttons sqs-slice-buttons-content sqs-slice-buttons-focused" data-slice-type="buttons"><a href="https://beaverhero.com">Top Button</a></div>').insertAfter(".sqs-slice-group.group-copy h1#sqs-slash-page-header");
});
</script>

 

Got the single button, just has to come down juuust a little bit - if possible!!! Thank you!

remove above & use this

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$('<div class="sqs-slice yui3-widget sqs-slice-buttons sqs-slice-buttons-content sqs-slice-buttons-focused tuan" data-slice-type="buttons"><a href="https://beaverhero.com">Top Button</a></div>').insertAfter(".sqs-slice-group.group-copy h1#sqs-slash-page-header");
});
</script>
<style>
  .tuan {
    margin-top: 50px;
}
</style>

11 minutes ago, tuanphan said:

remove above & use this

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$('<div class="sqs-slice yui3-widget sqs-slice-buttons sqs-slice-buttons-content sqs-slice-buttons-focused tuan" data-slice-type="buttons"><a href="https://beaverhero.com">Top Button</a></div>').insertAfter(".sqs-slice-group.group-copy h1#sqs-slash-page-header");
});
</script>
<style>
  .tuan {
    margin-top: 50px;
}
</style>

 

Perfect!! That looks great. I appreciate you!!

On 7/18/2020 at 4:40 AM, tuanphan said:

remove above & use this

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$('<div class="sqs-slice yui3-widget sqs-slice-buttons sqs-slice-buttons-content sqs-slice-buttons-focused tuan" data-slice-type="buttons"><a href="https://beaverhero.com">Top Button</a></div>').insertAfter(".sqs-slice-group.group-copy h1#sqs-slash-page-header");
});
</script>
<style>
  .tuan {
    margin-top: 50px;
}
</style>

 

Hey Tuanphan! What code would I need in order to put a video right underneath this new button? I uploaded the video to Wistia. Thanks for your help!!

Edit: I know you can upload a video in the template but it's just a background image and doesn't play audio

15 hours ago, mattlaurence said:

Hey Tuanphan! What code would I need in order to put a video right underneath this new button? I uploaded the video to Wistia. Thanks for your help!!

Edit: I know you can upload a video in the template but it's just a background image and doesn't play audio

I don't see video? 

10 hours ago, tuanphan said:

I don't see video? 

Yeah the original template for a cover page doesn't have a spot for a video, just a background image, is it possible to put one on the page?

I'm running ads for lessons and am noticing that a lot of people are clicking and not signing up so I thought a video might help with signups

This is the video

You can use normal page, then we will give the code to hide header, footer... to make it to cover.

@tuanphanHi Tuanphan! I'm so thankful for all of your help! By default, clicking the site title send you back to the homepage - I wanted to know if there was a way/code to turn this off? I don't want give viewers any links to get off of the page because I want to use it as a funnel. Thank you!

I have the commerce plan. 

11 hours ago, mattlaurence said:

@tuanphanHi Tuanphan! I'm so thankful for all of your help! By default, clicking the site title send you back to the homepage - I wanted to know if there was a way/code to turn this off? I don't want give viewers any links to get off of the page because I want to use it as a funnel. Thank you!

I have the commerce plan. 

Yes. Possible. Can you share link to cover page? We can help easier

11 minutes ago, tuanphan said:

Yes. Possible. Can you share link to cover page? We can help easier

Yeah here's the link! http://www.mattlaurencemusic.com/premiumguitarbundle