Solved

How to add sound effects to checkout buttons?

sao
Explorer
228 0 21

Hi! I would like to have a nice short sound when you press for exemple on a product,add to cart,checkout, etc..

Accepted Solution (1)

theycallmemakka
Shopify Partner
1536 347 372

This is an accepted solution.

Hi @sao ,

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var audio = new Audio();
    audio.src='https://assets.mixkit.co/active_storage/sfx/2997/2997-preview.mp3';
    audio.preload = 'auto';
    
    var clickableElements = document.querySelectorAll('button, a');
    clickableElements.forEach(function(element) {
        element.addEventListener('click', function() {
            audio.play();
        });
    });
});
</script>

If you want to change the sound, do let me know.

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 6 (6)

theycallmemakka
Shopify Partner
1536 347 372

This is an accepted solution.

Hi @sao ,

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var audio = new Audio();
    audio.src='https://assets.mixkit.co/active_storage/sfx/2997/2997-preview.mp3';
    audio.preload = 'auto';
    
    var clickableElements = document.querySelectorAll('button, a');
    clickableElements.forEach(function(element) {
        element.addEventListener('click', function() {
            audio.play();
        });
    });
});
</script>

If you want to change the sound, do let me know.

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

sao
Explorer
228 0 21

Thanks a lot mate! Sincerly ,I have one more post and I see that you re probably pretty good in html/css..Maybe you can help me pls.. And also please tell me if this code will make my speedscore drop too much?

theycallmemakka
Shopify Partner
1536 347 372

Hi @sao ,

 

This code is loaded after the page is loaded, so this will not have that much effect on the page speed.

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

sao
Explorer
228 0 21

My name is Adrian ,nice to meet you Makka! Mate please I’ll buy you coffees,right now im pretty low, please help me to be sure that my shop is 100% good on his front-end but back-end too

sao
Explorer
228 0 21

I want also to learn better coding..Right now I know some css but not perfectly.. If u can help me with my journey I will appreciate and also will be win-win. I have this business from 3 years,forst time I was using empire theme but I got a big problem so I move the account

AndresXPER
Visitor
2 0 0

This code really helped me!

also is there a way when mouse hovering on clickable Element to make sound effect active? I've been searching for this kind of code for months.