Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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
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
That worked perfectly! Thanks so much!
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025