How to add a music player to your Shopify store

Hura Product Showcase Builder

We recommends using SoundCloud for adding a music or audio player to your store. You can upload your own audio files to SoundCloud and then embed a player on your store.

Step 1 – Create a SoundCloud account

Go to SoundCloud and enter your information to either create a new account or sign into your existing account.

Step 2 – Upload your music

After setting up your account, you can click on the Upload link to start adding songs or audio files to your account. Free SoundCloud accounts can upload up to 180 minutes of audio. If you need more than that, consider upgrading to SoundCloud Pro or trying one of the alternative options.

At this point, you can either record a new audio file right into SoundCloud using the microphone on your computer or you can upload an existing audio file. They support all standard audio formats and can accept files up to 5GB in size.

You can upload album artwork and fill in any information about the song, artist, and genre. Save when you are done.

Step 3 – Get the embed code

SoundCloud will present you with a link to where your new audio track is located. Here you can play your audio file and others can comment on it.

Look for the share icon and press it to see the available options.

Click on the Embed option.

Select which player option you prefer. There are additional options at the bottom.

After you have the player configured the way you like, copy the code in the Code and preview box.

We strongly discourage you from enabling automatic play for any audio or video on your website. Several studies show that having media playing without a visitor pressing a play button will drive people away from your website.

Step 4 – Paste the code into a element

Log in to your Shopify store. From your Shopify admin, go to Online Store > Themes. Click Actions > Edit code. In the Layouts folder, locate and click on the liquid file want to insert to open it in the online code editor and paste this code.

If you would like the player to appear on all pages, you can add the music player to the footer of your template.

Alternative music player options:

  • HearThis (similar to SoundCloud)
  • PodSnack (create custom players)
  • BandCamp (you can also sell your music online)
  • Tindeck (player somewhat difficult to resize)
  • 8Tracks (only works for music mixes)
  • Spotify (add a playlist to your website)
Hura Theme Blocks

You may also like...

1 Response

  1. kevin says:

    where exactly to add the embed code, can i use anchor embed code?

Leave a Reply

Your email address will not be published. Required fields are marked *