Shopify Audio Player: Add MP3 Music Widget to Your Shopify Store

Use the audio widget generator below to create your responsive music widget for Shopify for free. Select a template and click the “Continue with this template” button to get started.

Want to add your Audio Player in Shopify and others? No problem.

How to use the Shopify Audio Player Widget builder

Audio player
  1. Choose a template: The available pre-designed audio widget templates are Music Playlist, Inline Audio Player, Single Track, New Album, Meditation and Ambience, Audiobook, and Nature Sounds. Click on the ‘Continue with this template‘ button to select the template that best suits your website’s audio needs.
  2. Edit audio tracks: In the Tracks section, you can upload music or audio you want to embed on your Shopify website. Each track can have its title, artist, and image. You can set the order of each audio by dragging and dropping its placement on the playlist. Additionally, you can encourage users to download or buy your track and grow your audience by adding links to music services using Call-to-Action buttons. To do this, click the ‘Add Call-to-Action’ button, select the music service, and paste the link. The supported music services are Apple Music, Spotify, YouTube Music, Soundcloud, Amazon Music, Deezer, iTunes, Bandcamp, Google Play, Pandora, and Tidal.
  3. Set the widget’s layout: There are two options: floating and embed. You can also set the Shopify music widget’s placement (Top Left and right, Bottom Left and right) and size, as well as turn the close button and the minimize button on or off.
  4. Player Settings: In this section, you can set the player options.
    • Player Controls: Turn on or off the buttons for track controls, Shuffle, Loop, Volume, Progress Bar, Playlist, and player information like image, title, and artist on the player. Also, the music widget-maker offers toggle options for enabling the Save Playing Track and Progres, shuffle, repeat, and set the volume level by default.
    • Autoplay: Automatically play audio on the website.
    • Playlist settings: Tailor the user experience by showing or hiding the playlist by default, adjusting track info, and setting the playlist’s height. This flexibility allows you to create a unique and engaging audio experience for your website visitors.
    • Message: This section lets you translate front-end messages.
  5. Customize Appearance: Two color schemes are available: Light and Dark. The Custom color scheme allows you to edit the background, colors, and fonts. There are even custom CSS and JavaScript fields for further customizing the look and feel of the music player for Shopify.
  6. Once you have finished designing the audio player plugin, click on the “Add to website for free” button and sign up on the following page to save your widget.
  7. Get the embed code for the audio gadget and use it on your website.

How to add audio player widget on Shopify Store

Your widget’s embed code includes an external JavaScript file and an HTML div with a class attribute. You can easily embed the audio player into your Shopify website using the “Custom Liquid” section in Shopify Editor. Here’s how to add audio player to a specific page in Shopify:

  1. Open your website’s visual editor: Log in to your Shopify admin panel and go to Sales Channels → Online Store:
Online Store Menu Item Shopify

Click the Customize button:

Customize Shopify Store
  1. Add Custom Liquid section to the target page: When you go to visual editor, the home page is opened by default. To select another page where you want to display audio widget on Shopify, find it in the dropdown list at the top of the page.

To install the widget, click Add Section:

Add Section to Shopify page

Then choose Custom Liquid from the list:

Custom Liquid Section in Shopify
  1. Paste the installation code: Paste the widget installation code to the Custom Liquid field. You can also change the Color scheme and set Top/Bottom paddings if needed. After this, Save the changes:
Embed Custom Codes in Shopify
  1. Save your changes and preview the widget on your Shopify page.

The best part is you can add audio widget on multiple websites regardless of whether they are made on Shopify.

How to manage your Audio Player widget

Once you have created your audio player for Shopify, you can easily manage it on your account. In your dashboard, search for “Audio Player” app under list of apps. As you can see from the following screenshot, you can create more music player widgets, edit existing ones, and get HTML embed code.

Manage Audio Player Widgets

What Are the Uses of an Audio Player for Your Business?

Enhance User Engagement with Music Player Widgets

An audio player widget allows you to embed music or podcasts directly into your Shopify, creating an immersive experience for your visitors. By offering background music or curated playlists through a music player widget , you can keep users engaged longer, reducing bounce rates and increasing time spent on your Shopify store. This is especially useful for creative industries like photography, art galleries, or fashion brands where ambiance matters. So, if you’re a musician and sell audios, you cannot miss audio player in Shopify.

Promote Podcasts and Audio Content

If your business produces podcasts, interviews, or educational audio content, an mp3 player widget on Shopify makes it easy for users to access and listen without leaving your page.

Streamline E-Learning Platforms

For businesses in the education sector, an audio player widget on Shopify can be invaluable. Use it to deliver lectures, tutorials, or language lessons in an accessible format. With features like pause, rewind, and volume control, learners have full flexibility over their listening experience, making your platform more user-friendly. Tip: Activate the Shopify audio widget’s “download” feature to enable users to download audio content and listen offline. This can be helpful if you have audio version of product manual of items on your Shopify store.

Create Interactive Storytelling Experiences

Storytelling is a powerful marketing tool, and a Shopify mp3 player widget takes it to the next level. Share customer testimonials, narrated case studies, or product stories in audio form to captivate your audience. An engaging narrative delivered via a music player widget can humanize your brand and build trust with potential customers.

Support Multilingual Audiences

If your business caters to international audiences, an audio player on Shopify store can serve as a translation aid. Offer voiceovers or narrations in multiple languages to make your content more inclusive and accessible.

Monetize Your Website with Sponsored Content

Integrating an audio player for your Shopify store opens doors to monetization opportunities. Partner with advertisers to feature sponsored tracks, jingles, or promotional messages within your widget. Alternatively, offer premium subscriptions for exclusive audio content, generating additional revenue streams for your business.

Related Tutorials