How to Add a Player App to Shopify Website

Online Audio Player plugin is among the finest apps to have your users interested in your site and its content. Having a player with an outstanding playlist will bring value to your site content and will make it more captivating for your audience. And if you’ve chosen to upgrade your Shopify website with some audio player and cool playlist, you are welcome to put to use this guide provided below to get it done. Now let’s move on and see what is a music plugin, find out how you can add it to your Shopify website and what difficulties may occur when you decide to do it. 

What is Player widget 

Elfsight Online Music Player is an easy-to-use option for websites allowing visitors and site owners to present various audio tracks on any page of your Shopify website. The plugin offers a variety of different options, for example, you are not restrained in terms of the number of audio tracks to attach to the plugin, there are plethora of audio formats for you to choose from – from mp3 to DASH. There’s also an option to build a playlist in line with your taste. 

These are the most prominent features of the audio player for you to see: 

  • There’s a possibility to make your color scheme for the online music player. 
  • An autoplay feature is there for you to assist you with switching on so that your Shopify site audience could start listening to your playlist right away as they open your page. 
  • A background picture could be embedded to your music widget to match it with your website’s design. 
  • Music tracks can be added to a playlist by URL or straight from your device. 
  • In case you are limited in time or simply can’t build an audio player plugin that will match your site in terms of style, you are always welcome to use one of professionally built templates. 

Right here you will explore the app’s features in detail, if you need it. And now we can go ahead to discovering what strengths and weaknesses a player widget can deliver your website. 

Player plugin on Shopify: benefits and downsides

Of course, when you start considering adding the Music Player to your Shopify website, you cannot avoid some relevant points. Online music player apps can bring both positive and negative aspects to your site, so we recommend you to check out the notes below before adding it to some of your website pages. 

Here are advances you can enjoy from an audio player on your Shopify site: 

  • Music tool sets the mood on site. If you’re the owner of some sort of lifestyle blog, sports website or an online portfolio, a music widget can become a useful upturn to it. 
  • Music player widget can boost the engagement of your audience. Just as the music in the games used to serve as an attraction for the game players and worked as an additional way to captivate them, the well-built playlist can do the same job on your Shopify website. 
  • An awesome playlist can help you deliver your idea more evidently. You are welcome to make the audio player become a means of delivering not only music, but for instance podcasts that correlate with the topic your website is devoted to. 
  • You can profit off your music. In case a player widget provides some marketing features, you can even use it to make money off your music. All that needs to be done here is to embed the player on the pages of your Shopify website to start making money on your music. 

Still, in spite of all the positives, the online music player apps on your website can still be perceived skeptically by your users for a score of reasons. Let’s see why you should be careful with implementing it on your Shopify site pages: 

  • Misapplication of the online audio player apps can be annoying. Usually users browse the web while listening to music with headphones on. Thus, the music starting to play the moment when they open your site can annoy users and they will escape right away. 
  • Not every browser supports audio content. Thus, your flawlessly thought-out playlist may simply not not be heard by part of the audience, and your awesome idea of adding music to the website will fail. 
  • Some sites don’t really need an audio player. You may consider that having background music on your website will complement it beautifully, but your audience may have quite different opinions on this matter. So, use this option with very great care. 

Now that you grasp all the benefits and downsides that an audio plugin can deliver to your Shopify site, you can make an informed decision about adding it. Remember that in spite of the ubiquitous dominance of music streaming services, the music widget on your Shopify website is still not for everybody. But if you still want to have it, let’s proceed to the installation instructions. 

Adding the Music Player to Shopify website

There are lots of ways to embed the music player apps to the Shopify website. For example, you can use the plugin or apply some other way like Google Tag Manager. But if choose to apply the audio plugin with mp3 or any other tracks, here are the benefits you get:

  • No need to learn programming for creating your Audio Player. 
  • A huge number of professionally designed templates will give you useful concepts for your audio widget. 
  • You’ll be able to build the player on your own, without hiring a skilled developer and worrying about the widget’s proper work. 
  • The widget can be observed instantly in a live demo. 

And now it’s time to find out how you can embed the Audio Player widget on your Shopify website. 

Use the Music widget

You have several ways to embed the Music Player apps to the Shopify site. For instance, you can apply a video instruction with an installation given closely. Or else you can switch to GTM, as we’ve already mentioned before. 

And here are the steps you need to follow if you ’ve decided to add the Audio Player app by means of Shopify administrator panel: 

  1. First thing you’ll need to get if you want to add the audio widget to your Shopify website – the widget’s installation code.
  2. Log in to your Elfsight account cnd click on the name of the app you need to install on the Applications tab.
  3. Select Add to website option next to the name of the widget you need to embed to your Shopify website. A popup window will be seen where you’ll get the installation code of your Online Audio widget. 
  4. After that, open your website’s visual editor. To do it, log in to your Shopify website’s backend, go to the Online Store section and select Customize.
  5. Add a custom content section to the target page. To do it, select the right page from the dropdown menu at the top of the page. Simply click “add section” after selecting the page to call up the Custom Content section.
  6. Remove the extra sections of the Custom Content block and click Add content to call up the Custom HTML field in order to embed your widget’s code.  
  7. Done! The widget has been successfully added to your Shopify website.

Keep in mind that the guidelines given above are only true for the cases when you need to embed the online music widget with mp3 or other tracks to some particular page of your Shopify website. But if you need the widget on all pages, follow the steps below:

  1. Log in to your Shopify website, go to the Online Store and select the Actions, Edit Code option.
  2. Next, open the theme.liquid file in the Layout section.
  3. Paste the widget’s installation code before the closing </ body> tag and save the changes.
  4. Done! The widget has been successfully added to all pages of your Shopify website.

In some cases, the opportunity to embed HTML code to the site might be removed. In a given setting, you are welcome to apply the GTM. 

How to add Online Player to website with GTM

There are quite a few CMS or site builders that ban embedding custom HTML in order to integrate some apps. In the event that you are not self-certain of your coding abilities, Google has created a tool referred to as Google Tag Manager or GTM that is there to assist you to embed the Audio Player to your website without much effort. All that needs to be done to start displaying the Audio Player on your site is to form a tag for your website and attach dynamic content. 

And these are the steps you need to follow in case you want to embed Audio Player to your site with GTM: 

  • Log in or sign up to your Google Tag Manager account. 
  • Create a new tag, select ‘Custom HTML’. 
  • Put the first line of the Online Audio player widget’s installation code to the created tag. 
  • Add a trigger and the tag to your Shopify website. 
  • Save your tag and publish the changes. 
  • Done! The Online Player will soon be available to your website’s audience. 

That’s it! Now you grasp how to apply GTM in order to get your website empowered with an Audio Player. 


No doubt, your online audio feature will look perfect on your Facebook Page site. Using all the offered options granted by the wonderful Elfsight team, you’ll be able to build a player that will complement your site through the prism of style and features. But you shouldn’t avoid some extra actions you have to take if you want the new opportunity on your Facebook Page website to get noticed. 

In case you have a social media account, as practically every online business these days does, you must definitely notify your audience of the new options on your website. This can either be a short announcement or series of posts – it’s up to you to decide which way you will push your website’s new enhancement. It’s a very significant step as it helps you kindly notify your audience on quite a controversial feature which may not be liked by everyone. 

The bottom line is, what you definitely don’t have to make a big deal about is that the new music widget is working properly. Selecting a widget by Elfsight, you may rest assured that it will work perfectly on all devices – from smartphone to tablet and will definitely not influence the work of your website in a slightest way. So shape your new widget and don’t forget to share it on social media!