How can I make my video hero section clickable on Impulse Theme?

Solved

How can I make my video hero section clickable on Impulse Theme?

Halfspaced
Excursionist
26 0 2

Is there any way to make my video hero section clickable to go to another page? Currently the only option is to add a button from within the section's settings, but I want the entire container clickable with no visible button, any help would be greatly appreciated.

 

My URL is www.halfspaced.com

 

Thank you!

Accepted Solution (1)

diego_ezfy
Shopify Partner
2971 571 923

This is an accepted solution.

@Halfspaced 

Ideally you'd need that custom coded in the Customize page by a dev, so you could add unique links to each individual section, but as a quick fix you can do this:

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:


<style>

</style>
<script>
function addLinkToVideoHero(){
    var link = `https://www.halfspaced.com/`;
    
    var $hero = document.querySelector(`.hero[class*='video']`);

    if (!$hero){
        return;
    }

    var html = `<a style="position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:6;" href="${link}"></a>`;

    $hero.insertAdjacentHTML( `beforeBegin`,html)
}

addLinkToVideoHero();
</script>


You can add any URL you want by changing the value `https://www.halfspaced.com/`

Just make sure it starts and ends with this sign: `

 


Kind regards,
Diego

 

View solution in original post

Replies 2 (2)

diego_ezfy
Shopify Partner
2971 571 923

This is an accepted solution.

@Halfspaced 

Ideally you'd need that custom coded in the Customize page by a dev, so you could add unique links to each individual section, but as a quick fix you can do this:

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:


<style>

</style>
<script>
function addLinkToVideoHero(){
    var link = `https://www.halfspaced.com/`;
    
    var $hero = document.querySelector(`.hero[class*='video']`);

    if (!$hero){
        return;
    }

    var html = `<a style="position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:6;" href="${link}"></a>`;

    $hero.insertAdjacentHTML( `beforeBegin`,html)
}

addLinkToVideoHero();
</script>


You can add any URL you want by changing the value `https://www.halfspaced.com/`

Just make sure it starts and ends with this sign: `

 


Kind regards,
Diego

 

Halfspaced
Excursionist
26 0 2

That worked perfectly! Thanks so much!