How can I add an A/B audio player to my music store on Shopify?

Technical Q&A
1

Hello, so I’m creating a shop in the music niche. I require an A/B audio player to which I’ve found this one here
https://github.com/mattbartley/AB-Audio-Player

It’s an HTML/CSS/Javascript-only audio player that allows you to toggle between two versions of the same audio file - with NO dependencies which should be no problem to add to a shopify theme. My problem is I cannot figure out where to add the CSS and JS. I have pretty basic coding skills, I can add code where directed, I just don’t specifically know each location I need to add code to.

I assumed I would add the HTML to the page I want the player on - then added the two files into assets, along with the .CSS and .JS into assets and made sure the src in the .js linked to the two audio files storage location.

Can anybody help in regards to where I need to add the CSS and JS? Eg, Edit code > templates or assets > etc.

The theme I’m using is
https://apollotheme.com/products/voonex-event-and-conference-free-shopify-theme

Thanks in advanced!

1 Like
2

If you will be displaying this on the product page, you can simply add the css in tags and the js in tags.

Would that work for you?