Hello @HellGames ,
Please add the below code to your theme code to create a custom cursor:
Add the below code to your theme.liquid before </body>
<div class="cursor"></div>
<div class="cursor2"></div>
<style>
.cursor {
width: 50px;
height: 50px;
border-radius: 100%;
border: 1px solid black;
transition: all 200ms ease-out;
position: fixed;
pointer-events: none;
left: 0;
top: 0;
transform: translate(calc(-50% + 15px), -50%);
}
.cursor2 {
width: 20px;
height: 20px;
border-radius: 100%;
background-color: black;
opacity: .3;
position: fixed;
transform: translate(-50%, -50%);
pointer-events: none;
transition: width .3s, height .3s, opacity .3s;
}
.cursor:empty, cursor2:empty{
display:block;
}
</style>
<script>
// UPDATE: I was able to get this working again... Enjoy!
document.addEventListener('DOMContentLoaded', function () {
var cursor = document.querySelector('.cursor');
var cursorinner = document.querySelector('.cursor2');
document.addEventListener('mousemove', function(e){
var x = e.clientX;
var y = e.clientY;
cursor.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`
});
document.addEventListener('mousemove', function(e){
var x = e.clientX;
var y = e.clientY;
cursorinner.style.left = x + 'px';
cursorinner.style.top = y + 'px';
});
document.addEventListener('mousedown', function(){
cursor.classList.add('click');
});
document.addEventListener('mouseup', function(){
cursor.classList.remove('click')
});
});
</script>
If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at
info@huptechweb.com or Visit our website
Huptech Web.Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
