Skip to content

Reggie Beatz Media | Services & Products for Music Producers & More

How to Add Audio Player on Shopify Product Page

Screenshot 2024 01 24 at 11.25.13

Login to shopify –

Certainly! Here’s an instructional blog on how to add audio to a Shopify product page:

Title: Enhance Your Product Pages with Audio: A Step-by-Step Guide for Shopify

Incorporating audio elements on your Shopify product pages can add a new dimension to the shopping experience, especially for products that benefit from audio demonstrations or descriptions. Follow these simple steps to seamlessly integrate audio into your product pages:

Step 1: Access your Shopify Admin Dashboard

Screenshot 2024 01 24 at 11.20.48

Log in to your Shopify account and navigate to the admin dashboard.

Step 2: Open the Online Store Section

Screenshot 2024 01 24 at 11.12.59

On the left-hand side of the dashboard, locate and click on “Online Store.”

Step 3: Customize Your Theme

Within the Online Store section, find and click on the “Customize” button. This will open the theme editor where you can make changes to your store’s appearance.

Step 4: Navigate to Product Pages

Screenshot 2024 01 24 at 11.15.24

At the top menu, locate the section labeled “Home Page.” Click on it, and a dropdown menu will appear. From the dropdown, select “Products” and then choose “Default Product.”

Step 5: Add a Custom Liquid Widget

Screenshot 2024 01 24 at 11.16.27

Scroll down to the “Product Information” section on the left side of the editor. Under “Add block,” click on the option to add a new block. Choose “Custom Liquid Widget” from the available options and add it to your product page.

Step 6: Paste the Provided Code

Screenshot 2024 01 24 at 11.24.34

In the newly added custom liquid widget, paste the following code:

<div class="player">
  <audio oncontextmenu="return false;" controls controlsList="nodownload noplaybackrate">
    <source src="{{ }}">
  document.addEventListener('play', function(e){
    var audios = document.getElementsByTagName('audio');
    for(var i = 0, len = audios.length; i < len;i++){
      if(audios[i] !={
  }, true);

Step 7: Save and Preview

After pasting the code, ensure to save your changes. You can then preview your product page to see how the audio player appears and functions.

Congratulations! You’ve successfully added an audio element to your Shopify product page. Visitors can now enjoy a richer shopping experience with the inclusion of audio content.

Feel free to customize the code further to match your store’s design preferences or to add additional functionality as needed. Experiment with different audio formats and lengths to find the best fit for your products.

Happy selling! 🎶✨