Or go to our Shopify Theme Detector directly
How to Insert Audio Files With the Rich Text Editor on Shopify
Last modified: December 1, 2023
Do you have products that have audio aspects to them? Perhaps you sell CDs of your own music, or you have products that contain a musical element. You might want to include a preview of these sounds on your Shopify store.
Or, perhaps you’ve moved into podcasting and would like to showcase your shows on your website. The more people that view the content on your website, the better the results might be from your website.
With Shopify, you’re allowed to insert audio filed within the rich text editor to any part of your content. This allows you to showcase the content that you would like to promote. There are lots of factors that can cause problems, but these can be easily overcome, there are also apps that can help you. For instance, you could use this app to add media players to your website.
However, if you want to do it for free, here are some instructions for you.
|Get a Free Custom Shopify Store
Widgetic (Audio Players)
Osaria Audio Player
Music Player by Websyms
Custom Background Music
Elfsight Podcast Player
Elfsight Background Music
Elfsight Radio Player
Star Audio Player
Step 1 – Log In
The first step is to log into your Shopify store with your user credentials.
Step 2 - Settings
After entering your main admin area, you need to click on the ‘Settings’ area that is in the bottom left corner of the menu. Then you need to select the ‘Files’ option.
Step 3 – Upload
Look in the top right corner of the screen and then click on the option that reads ‘Upload files’, this is where you’re going to add the audio file you would like on your website. After uploading the files you will be given a URL, this is the URL that is for the audio file, you need to keep a record of this.
Step 4 – Add Audio File to Page
Now you need to go to the page where you would like to add the link to the audio page. On the page/post, find the text where you would like to insert the link and highlight it.
Then you need to add the code inside the text editor to embed the audio player (remember text editor not rich text editor).
<div id="player"><audio controls="controls"> <source src="xxxx" type="audio/mpeg" /></div>
Remember to replace the xxxx with the URL of the audio that you wanted to insert into the page. Otherwise, nothing will display.
The URL of the audio file that is uploaded will begin with cdn.shopify.com and not your own address. It is important to remember that.
Step 5 – Save
Now that you’ve added the media player and the audio extract to the page, you can save the page. This will confirm changes. You can also test the audio player by visiting the page as a guest.
Conclusion: How to Insert Audio Files With the Rich Text Editor on Shopify
Inserting an audio file with the rich text editor on Shopify is really simple. It is a two-stage process, but one that can be done within minutes. Alternatively, you can use a number of apps that allow you to add media to your website within nice interfaces that are simple to use.
Can I add multiple audio files to a single page in Shopify?
Yes, you can add multiple audio files to a page. Just ensure each file has its unique embed code and URL for proper functioning.
Can I use different audio formats besides MP3 for my Shopify store?
Yes, Shopify supports various audio formats, including MP3, WAV, and AAC. Ensure the format is compatible with most browsers for optimal user experience.
What’s the maximum file size for audio uploads on Shopify?
Shopify limits file uploads to 20MB. For larger audio files, consider hosting them externally and linking to them in your Shopify store.