How to add music or audio to shopify store for FREE

Are you looking to enhance your digital product offerings with music previews on your Shopify website or store? This step-by-step tutorial will guide you through the process of seamlessly integrating a music player or audio player, and the best part is, you can do it for free. Let’s get started! If you don’t want to touch any code, you can download this template here

Step 1: Accessing Your Shopify Dashboard

First things first, head to your Shopify admin dashboard. In my case, I’m working with the ‘Down’ theme. If you don’t have it yet, don’t worry; you can install it for free. Once you’re in, click on the three dots and select ‘Edit Code.’

Step 2: Integrating the HTML Audio Player

Copy the HTML code return to your Shopify code, paste it in after line 140, and hit save.

  <div class="player">
        <audio controls>
          <source src="{{ card_product.metafields.product.audio.value.url }}">
        </audio>
      </div>
<style>
.player {
  position: relative;
  height: 40px;
  margin-bottom: -10px;
  pointer-events: auto;
}
.player audio {
  width: 100%;
  height: 40px;
  margin-bottom: -10px;
  outline: none;
}
</style>

A quick find (‘Ctrl + F’ or ‘Command + F’) for ‘href’ around line 55 will allow you to delete the appropriate link without disrupting functionality. Make sure to save your changes.

Step 3: Installing MetaFields Guru App

To upload instrumental file seamlessly, you’ll need to install an app called matafield guru. Click on ‘Apps,’ then ‘Shopify App Store.’ Search for ‘MetaFields Guru’ and install it. Follow the prompts, and once installed, you’re ready to set up your product page for audio integration.

Step 4: Setting Up Product Pages for Audio

In ‘Settings,’ navigate to ‘Custom Data,’ select ‘Products,’ and add a definition named ‘music.’ Ensure the name/key is ‘product.audio’ to match the previously added code. Choose ‘File’ as the file type and save your settings.

Step 5: Adding Your First Beat

Now, let’s add your first beat to the product page. Click on ‘Products,’ then ‘Add Product.’ Name your product (e.g., Instrumental One), upload an image, and scroll down to ‘Meta Fields.’ Look for ‘Music,’ click ‘Select File,’ and upload your audio file.

Remember to save your changes, and voilà! Your Shopify store is now equipped with a sleek music player.

Feel free to experiment with different beats, sounds, and digital products. If you have any questions or run into issues, drop a comment below, and we’ll be happy to help.

Happy selling and happy beats! 🎶✨

HTML CODE

  <div class="player">
        <audio controls>
          <source src="{{ card_product.metafields.product.audio.value.url }}">
        </audio>
      </div>

CSS CODE

.player {
  position: relative;
  height: 40px;
  margin-bottom: -10px;
  pointer-events: auto;
}
.player audio {
  width: 100%;
  height: 40px;
  margin-bottom: -10px;
  outline: none;
}

Part 2 of How to Add Music or Audio to shopify Website