Compatibility: Compatible on most Shopify themes, from Debut to Dawn 2.0
In the digital era, creating an engaging online shopping experience is crucial for success. The Shopify Music Player Section offers just that – a unique way to captivate your customers through music. In this post, we'll explore how this feature can transform your Shopify store into an immersive and memorable shopping destination.
Why Music Matters in E-Commerce:
- Emotional Connection: Music has the power to evoke emotions, making your store memorable.
- Brand Identity: Tailored playlists can reinforce your brand’s image and values.
- Increased Engagement: Background music can encourage customers to spend more time browsing.
Introducing the Shopify Music Player Section: This innovative feature allows you to seamlessly integrate music into your Shopify store. It's more than just a player; it's a tool to elevate your brand and engage with your customers on a whole new level.
Benefits for Your Store:
- Unique Shopping Experience: Stand out from competitors by offering a sensory-rich browsing experience.
- Enhanced Customer Engagement: Music can keep customers on your site longer, increasing the likelihood of purchases.
- Showcasing Products: Ideal for stores selling music or music-related products.
Key Features:
- Easy Installation: Add it to your store with just a few clicks.
- Custom Playlists: Upload your music or link to external sources.
- Fully Customizable: Adjust settings to fit your store’s style and mood.
- Responsive Design: Works flawlessly on all devices.
What you are buying:
- Add music player section to your Shopify
- Add controls to music player
- Upload any music
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
To start:
1. Go to your Admin store > Online store > Themes > Actions > Edit code.
2. Under the section folder, create a new section file, name it "shopify-music-player", then paste the code below.
| {% assign autoplayAudio = section.settings.autoplay_audio %} {% if autoplayAudio == true %} <div class="autoplayPermission"> <span class="closeAudio">X</span> <span style="text-align: center;">Website contains audio</span> <button onclick="init()"> Allow autoplay</button> </div> {% endif %} <div class="audioContainer {{section.settings.audio_position }}"> <div class="audioWrapper"> <div class="audioBox"> <div class="audioList"> {% for block in section.blocks %} {% assign totalAudio = forloop.length %} {% assign audio_file = block.settings.audio_file %} <div class="audioTrack" data-track= "{{forloop.index0}}" onclick="playTrack(this.dataset.track)"> <div class="musicWrapper"> {% if block.settings.image != blank %} <div class="imageWrapper"> <img src="{{block.settings.image | img_url: 'small' }}" alt="{{block.settings.image | img_url: 'small' }}"> </div> {% endif %} <div class="musicInfo" > <p style="margin: 0; text-align: center"> {% assign audio = audio_file | split: "/" | slice: -1 %} {{ audio | split: "." | slice: 0 | replace: "[" , "" | replace: "]" , "" | replace: "\" , "" | replace: '"' , "" | replace: "-" , " " | upcase }} </p> {% if block.settings.audio_artist != blank %} <span style="font-size: 13px">{{block.settings.audio_artist}}</span> {% endif %} </div> </div> </div> {% endfor %} </div> <div class="activeContainer"> {% for block in section.blocks %} {% assign audio_file = block.settings.audio_file %} <div class="audioActive" data-active= "{{forloop.index0}}"> <audio class="audio" allow="autoplay" {{ block.shopify_attributes }} data-audio= "{{audio_file}}" data-audio-index= "{{forloop.index0}}"> <source src="{{block.settings.audio_file}}" type="audio/mp3"> Your browser is not supported to play the audio! </audio> <div class="musicWrapper"> {% if block.settings.image != blank %} <div class="imageWrapper"> <img src="{{block.settings.image | img_url: 'small' }}" alt="{{block.settings.image | img_url: 'small' }}"> </div> {% endif %} <div class="musicInfo" > <p style="margin: 0; text-align: center"> {% assign audio = audio_file | split: "/" | slice: -1 %} {{ audio | split: "." | slice: 0 | replace: "[" , "" | replace: "]" , "" | replace: "\" , "" | replace: '"' , "" | replace: "-" , " " | upcase }} </p> <div class="musicDurWrap"> <input type="range" class="musicDur inputRange" min="0" value="0" data-duration="{{forloop.index0}}"> <div style="display: flex;"> <span class="currentTime"></span> / <span class="audioDuration"></span></div> </div> </div> </div> </div> {% endfor %} </div> </div> <div class="audioController"> <div class="prevCtrl control"> <svg viewBox="0 0 50 50"> <path d="M21.91,18.49L4.08,1.56C3.16,0.69,1.67,1.35,1.67,2.62L1.5,47.37c0,1.28,1.49,1.95,2.41,1.08l17.84-16.83"/> <path d="M21.74,31.85l-0.06,15.12c0,1.28,1.49,1.95,2.41,1.08l23.72-22.37c0.61-0.58,0.61-1.57,0-2.15L24.26,1.16 c-0.92-0.87-2.41-0.21-2.41,1.07l-0.06,15.87"/> </svg> </div> <div class="pausePlay" id="pausePlay"> <div class="play control"> <svg viewBox="0 0 50 50"> <path d="M8.59,2.93v44.14c0,1.34,1.04,2.22,1.93,1.61l32.23-22.07c0.97-0.67,0.97-2.56,0-3.22L10.52,1.32 C9.63,0.71,8.59,1.59,8.59,2.93z"/> </svg> </div> <div class="pause control" style="display: none"> <svg viewBox="0 0 50 50" style="stroke-width: 6"> <polyline points="0,0 0,0 0,0 "/> <path d="M12.52,5.24L12.1,44.59c-0.02,1.5,1.15,2.72,2.6,2.72h0.04c1.47,0,2.67-1.23,2.67-2.75V5.11 c0-1.34-1.05-2.42-2.34-2.42h-0.05C13.64,2.69,12.53,3.83,12.52,5.24z"/> <path d="M32.46,5.24l-0.42,39.35c-0.02,1.5,1.15,2.72,2.6,2.72h0.04c1.47,0,2.67-1.23,2.67-2.75V5.11 c0-1.34-1.05-2.42-2.34-2.42h-0.05C33.59,2.69,32.48,3.83,32.46,5.24z"/> </svg> </div> </div> <div class=" nextCtrl control"> <svg viewBox="0 0 50 50"> <path d="M21.91,18.49L4.08,1.56C3.16,0.69,1.67,1.35,1.67,2.62L1.5,47.37c0,1.28,1.49,1.95,2.41,1.08l17.84-16.83"/> <path d="M21.74,31.85l-0.06,15.12c0,1.28,1.49,1.95,2.41,1.08l23.72-22.37c0.61-0.58,0.61-1.57,0-2.15L24.26,1.16 c-0.92-0.87-2.41-0.21-2.41,1.07l-0.06,15.87"/> </svg> </div> <div class="shuffleAudio"> <svg viewBox="0 0 50 50"> <path style="stroke-width:10" d="M1.76,8.95c2.37,0.04,4.11,0.07,4.75,0.28c8.03,2.63,19.21,25.25,28.76,30.16c1.55,0.8,5.89,0.36,5.89,0.36"/> <path style="stroke-width:10" d="M41.41,9.39c0,0-3.84-0.37-5.21,0.29c-2.05,0.98-8.51,9.52-9.68,10.48"/> <path style="stroke-width:10" d="M1.76,40.52c2.13-0.03,3.69-0.06,4.26-0.24c3.54-1.09,10.11-8.49,11.58-9.68"/> <polygon style="stroke-width: 6" points="41.16,36.94 41.16,42.8 44.65,39.76 "/> <polygon style="stroke-width: 6" points="41.16,6.36 41.16,12.22 44.65,9.18 "/> </svg> </div> <div class="volumeWrap"> <div class="rangeWrap"> <input type="range" class="volRange inputRange" min="0" max="100" value="50"> </div> <div class="volumeBox"> <div class="volume"> <svg class="vol" viewBox="0 0 50 50"> <polygon points="0.52,15.3 0.52,34.96 7.68,35.21 20.57,48.63 20.57,24.94 20.57,1.26 7.59,15.27 "/> <path style="fill: none; stroke-width: 6" d="M25.43,3.63C36.8,3.19,46.35,12.94,46.46,24.8c0.11,12.04-9.53,22.08-21.08,21.6"/> <path d="M29.08,34.96c4.2-0.83,7.01-5.92,6.5-10.91c-0.44-4.25-3.22-7.76-6.75-8.22 C28.91,22.21,28.99,28.59,29.08,34.96z"/> M0.12,0.19"/> M0.12,0.19"/> </svg> </div> <div class="muted"> <svg class="mute" viewBox="0 0 50 50"> <polygon points="0.52,15.3 0.52,34.96 7.68,35.21 20.57,48.63 20.57,24.94 20.57,1.26 7.59,15.27 "/> <path style="fill: none; stroke-width: 6" d="M25.43,3.63C36.8,3.19,46.35,12.94,46.46,24.8c0.11,12.04-9.53,22.08-21.08,21.6"/> <path d="M29.08,34.96c4.2-0.83,7.01-5.92,6.5-10.91c-0.44-4.25-3.22-7.76-6.75-8.22 C28.91,22.21,28.99,28.59,29.08,34.96z"/> <line style="stroke-width: 6" x1="2.64" y1="2.64" x2="47.32" y2="47.32"/> </svg> </div> </div> </div> <div class="noteMenu"> <svg class="noteIcon" viewBox="0 0 53 53"> <polyline points="-0.68,-1.79 -0.68,-1.79 -0.68,-1.79 "/> <path d="M27.62,36.1l0.06-33.67c0-0.75-0.6-1.36-1.35-1.37l-0.17,0c-1.1-0.02-2,0.58-2.01,1.33L23.8,30.87"/> <path d="M23.8,30.87c-2.98-1.68-7.12-1.74-11.72-0.02c-0.03,0.01-0.06,0.02-0.09,0.04c-5.79,3.07-8.38,9.83-6.74,13.74 c2.11,5.03,10.66,5.72,16.18,2.63c3.92-2.19,6.42-6.48,6.19-11.87"/> <path d="M26.99,4.74"/> <path d="M25.46,0.66c3.99-0.32,7.29,2.42,8.38,5.81c0.75,1.79,1,3.8,2.12,4.98c1.58,0.93,3.52,1.03,5.28,0.4 c1.86-0.7,3.58-2.21,4.8-4.02l0.35,0.16c-1.14,3.3-4.01,6.57-7.79,7.09c-2.13,0.33-4.63,0.05-6.26-1.42 c-1.45-1.2-2.58-3.09-3.61-4.33c-0.72-0.81-1.39-1.52-1.79-1.01c-0.07,0.08-0.2,0.16-0.39,0.27L25.46,0.66L25.46,0.66z"/> <path d="M25.87,0.97c0.83,1.15,1.45,2.33,1.82,3.64c-0.18,1.59-0.56,2.67-0.39,4.23C27.3,8.84,25.87,0.97,25.87,0.97L25.87,0.97z"/> </svg> </div> </div> </div> </div> <script> const audios = document.querySelectorAll('.audio'); const trackContainer = document.querySelectorAll('.audioTrack'); const activeAudios= document.querySelectorAll('.audioActive'); const active = document.querySelector('.activeAudio') const audioList = document.querySelector('.audioList'); const audioBox = document.querySelector('.audioBox'); const activeContainer = document.querySelector('.activeContainer'); const permission = document.querySelector('.autoplayPermission'); const closeAudio = document.querySelector('.closeAudio'); const prev = document.querySelector('.prevCtrl'); const next = document.querySelector('.nextCtrl'); const pausePlayCtrl = document.querySelector('#pausePlay'); const pauseCtrl = document.querySelector('.pause'); const playCtrl = document.querySelector('.play'); const shuffleCtrl = document.querySelector('.shuffleAudio'); const volumeBox = document.querySelector('.volumeBox'); const volume = document.querySelector('.volume'); const muted = document.querySelector('.muted'); const noteMenu = document.querySelector('.noteMenu'); const volRange = document.querySelector('.volRange'); let playing; let audioPointer; let open = true; let volumeValue; let stillScroll = true; let auto = {{autoplayAudio}}; prev.addEventListener("click", playPrev); next.addEventListener("click", playNext); shuffleCtrl.addEventListener("click", shuffleAudio); pausePlayCtrl.addEventListener("click", pausePlay); volumeBox.addEventListener("click", mute); volRange.addEventListener("click", volumeUpdate); noteMenu.addEventListener("click", audioOpen); function audioOpen() { if (open == true) { audioBox.style.display = "grid"; open = false; }else { audioBox.style.display = "none"; open = true; } } if({{autoplayAudio}}) { closeAudio.addEventListener("click", closeDiv); } if(sessionStorage.getItem('Audio') == null){ audioPointer = 1; sessionStorage.setItem('Audio', audioPointer) } else { audioPointer = sessionStorage.getItem('Audio'); } if(sessionStorage.getItem('Allowauto') == null){ sessionStorage.setItem('Allowauto', true); playing = false; autoplaySet(false); } if(sessionStorage.getItem('Allowauto') == 'true') { window.onscroll = function (e){ if(stillScroll) { if (sessionStorage.getItem('Audio') != null) { audioPointer = sessionStorage.getItem('Audio')} autoplaySet(false); playing = false; current(audioPointer); } } } function closeDiv() { sessionStorage.setItem('current', true); permission.style.display = 'none'; } if(sessionStorage.getItem('current')) { permission.style.display = 'none'; } function init() { permission.style.display = 'none'; sessionStorage.setItem('Allowauto', true); sessionStorage.setItem('current', true); window.onscroll = function (e){ if(stillScroll) { if (sessionStorage.getItem('Audio') != null) { audioPointer = sessionStorage.getItem('Audio')} autoplaySet(false); playing = false; current(audioPointer); } } } function playNext() { if (audioPointer < audios.length - 1) { audioPointer++; } else { audioPointer = 0; } audios.forEach(function(audio) { audio.pause(); audio.currentTime = 0; }); playing = false; current(audioPointer); } function playPrev() { if (audioPointer == 0) { audioPointer = audios.length - 1; } else { audioPointer-- } audios.forEach(function(audio) { audio.pause(); audio.currentTime = 0; }); playing = false; current(audioPointer); } function playTrack(track) { audios.forEach(function(audio) { audio.pause(); audio.currentTime = 0; }); audioPointer = track; playing = false; current(audioPointer); } function shuffleAudio() { let randomIndex; audios.forEach(function() { const totalAudio = audios.length; randomIndex = Math.floor(Math.random() * (totalAudio)); audioPointer = randomIndex; }) audios.forEach(function(audio) { audio.pause(); audio.currentTime = 0; }); playing = false; current(audioPointer); } function current() { if({{autoplayAudio}}) { sessionStorage.setItem('current', true); permission.style.display = 'none'; } function deleteSession() { const currentIndex = 'Audio'; Object.keys(sessionStorage) .filter( (key)=> key.match(currentIndex) ) .forEach(function(key) { sessionStorage.removeItem(key) }); } sessionStorage.setItem('Audio', audioPointer); const audioIndex = document.querySelector(`[data-audio-index="${audioPointer}"]`); audioIndex.currentTime = sessionStorage.getItem(`playing[${audioPointer}]`); audioPointer = sessionStorage.getItem('Audio'); pausePlay(audioPointer); playMusic(audioPointer); stillScroll = false; } function playMusic() { const audioIndex = document.querySelector(`[data-audio-index="${audioPointer}"]`); const activeAudio = document.querySelector(`[data-active="${audioPointer}"]`); const trackAudio = document.querySelector(`[data-track="${audioPointer}"]`); const musicDuration = document.querySelector(`[data-duration="${audioPointer}"]`); playing = true; activeAudios.forEach(function(active) { active.classList.remove('active'); }); activeAudio.classList.add('active'); trackContainer.forEach(function(track) { track.classList.remove('hide'); }); trackAudio.classList.add('hide'); const playPromise = audioIndex.play(); if (playPromise !== undefined) { playPromise.then(_ => {}) .catch(error => {}); } audioIndex.ontimeupdate = function() { musicDuration.value = audioIndex.currentTime ; musicDuration.max = audioIndex.duration; const currentMin = Math.floor(musicDuration.value / 60); const currentSec = musicDuration.value % 60; const durMin = Math.floor(musicDuration.max / 60 ); const durSec = Math.floor(musicDuration.max / 10); document.querySelector('.active').querySelector('.currentTime').innerText = `${currentMin}:${currentSec.toString().padStart(2, '0')}`; document.querySelector('.active').querySelector('.audioDuration').innerText = `${durMin}:${durSec}`; function deleteSession() { const currentAudio = 'playing'; Object.keys(sessionStorage) .filter( (key)=> key.match(currentAudio) ) .forEach(function(key) { sessionStorage.removeItem(key) }); } deleteSession(); sessionStorage.setItem(`playing[${audioPointer}]`, audioIndex.currentTime); } audioIndex.addEventListener('ended', (event) => { playNext(); }); musicDuration.addEventListener('input', function () { audioIndex.currentTime = musicDuration.value ; }, false); } function pausePlay() { const audioIndex = document.querySelector(`[data-audio-index="${audioPointer}"]`); if(playing) { audioIndex.pause(); playing = false; playCtrl.style.display = 'flex'; pauseCtrl.style.display = 'none'; userScrolled = false; noteMenu.classList.remove('playing'); } else { autoplaySet(true); playing = true; current(audioPointer); pauseCtrl.style.display = 'flex'; playCtrl.style.display = 'none'; noteMenu.classList.add('playing'); } if(sessionStorage.getItem('Allowauto') == 'true') { autoplaySet(false); }else{ autoplaySet(true); } } function autoplaySet(autoAllow) { function deleteSession() { const currentIndex = 'AllowAuto'; Object.keys(sessionStorage) .filter( (key)=> key.match(currentIndex) ) .forEach(function(key) { sessionStorage.removeItem(key) }); } deleteSession(); sessionStorage.setItem('Allowauto', autoAllow); } function volumeUpdate() { const volValue = volRange.value; volumeValue = volValue / 100; volume.classList.remove('muted'); volumeData(volumeValue); muted.style.display = 'none'; volume.style.display ='flex'; } function mute() { if (volumeValue != 0) { muted.style.display = 'flex'; volume.style.display ='none'; volumeValue = 0; volumeData(volumeValue); } else { volumeUpdate(); } } function volumeData() { const audioIndex = document.querySelector(`[data-audio-index="${audioPointer}"]`); audioIndex.volume = volumeValue; } </script> <style> input, textarea { padding: 0; } .autoplayPermission { position: fixed; top: 115px; right: 16px; width: 220px; display: flex; background: {{section.settings.track_bg}}; flex-direction: column; align-items: center; padding: 5px; box-shadow: 0px 0px 10px; z-index: 2; } .closeAudio { margin-left: 90%; width: 24px; height: 24px; display: flex; justify-content: center; cursor: pointer; } .closeAudio:hover { font-weight: 600; } .autoplayPermission button{ display: inline-block; border: none; padding: 4px; border-radius: 5px; color: black; background: #ebe9e9; } .autoplayPermission button:hover { color: white; background: black; } .audioContainer { position: fixed; bottom: 5%; padding: 0 3%; z-index: 2; display: flex; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; } .audioWrapper { width: 250px; position: relative; display: flex; flex-direction: column; } .audios { display: none; } .audioList { width: 100%; background: {{section.settings.track_bg}}; display: grid; flex-direction: column; border-radius: 8px; margin-bottom: 8px; transition: height .5s ease; } .activeContainer { width: 100%; background: {{section.settings.track_bg}}; display: flex; flex-direction: column; border-radius: 8px; margin-bottom: 8px; transition: height .5s ease; } .audioActive { display: none; border-radius: 8px; } .audioBox { display: none; } .musicWrapper { display: flex; justify-content: space-around; align-items: center; padding: 2% 5%; margin: 2% 0; } .imageWrapper { object-fit: contain; width: 30%; overflow: hidden; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } .imageWrapper img { max-width:100%; max-height:100%; } .audioTrack:hover .musicInfo { color: black; font-weight: 600; } .musicInfo { width: 70%; display: flex; justify-content: center; flex-direction: column; align-items: center; } .musicInfo span { text-align: center; } .musicDurWrap { width: 90%; height: 85%; display: none; border-top-left-radius: 15px; border-bottom-left-radius: 15px; flex-direction: column; justify-content: center; transition: width .3s linear; } /*====== Control Position ======*/ .bottom-right { right: 0; } .bottom-left { left: 0; } .upright { right: 0; height: 0; width: auto; justify-content: flex-end; padding: 0 !important; } .upright .audioWrapper{ flex-direction: row; width: 400px; align-items: center; justify-content: flex-end; } .upright .audioController { width: auto; height: 200px; flex-direction: column; margin: 0 5%; padding: 3% 1%; } .upright .volumeWrap:hover .rangeWrap { height: 28px; } .upright .volumeWrap:hover { max-width: 95px; } .upright .volumeRange { margin: 0; justify-content: center; } .upright .volumeBox { height: auto; padding: 4px; } .upright .activeContainer { margin-bottom: 0; } .upright-top { top: 30%; } .upright-top .audioBox { margin-top: 30%; } .upright-bottom { top: 80%; } .upright-bottom .audioBox { margin-bottom: 30%; } .upright-center { top: 50%; } /*======Controllers ====*/ .audioController { width: 100%; height: 100%; background: {{section.settings.control_bg}}; position: relative; padding: 3%; display: flex; justify-content: space-between; align-items: center; border: 1px solid black; border-radius: 5px; } .control { stroke: black; width: 20px; display: flex; } .control:hover { stroke: #A9A9A9; fill: #A9A9A9; } .prevCtrl { transform: rotate(180deg); } .pausePlay { position: relative; display: flex; align-items: center; } .pausePlay:hover * { stroke: #A9A9A9; } .shuffleAudio { display: flex; width: 21px; flex-direction: column; justify-content: center; align-items: center; } .shuffleAudio svg { stroke: black; width: 21px; display: flex; stroke-width:5; } .volumeWrap { display: flex; align-items: center; justify-content: flex-end; } .volumeWrap:hover .volumeBox { background: #909090; } .volumeWrap:hover .rangeWrap { width: 60%; } .volumeWrap:hover .volRange { display: flex; } /*=======Volume Range ====*/ .rangeWrap { width: 0; height: 85%; display: flex; background: #909090; border-top-left-radius: 15px; border-bottom-left-radius: 15px; flex-direction: column; justify-content: center; padding: 8.5% 0; transition: width .3s linear; } .volRange { width: 100%; margin: 0 4%; display: none; transition: display .3s linear; } .inputRange { -webkit-appearance: none; appearance: none; background: transparent; border: none; } .inputRange:focus { outline: none; } .inputRange::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; border: 1px solid #000; height: 10px; width: 10px; border-radius: 3px; background: #DCDCDC; cursor: pointer; margin-top: -3px; box-shadow: 0px 0px 2px #000; } .inputRange::-moz-range-thumb { -webkit-appearance: none; appearance: none; border: 1px solid #000; height: 10px; width: 10px; border-radius: 3px; background: #DCDCDC; cursor: pointer; margin-top: -3px; box-shadow: 0px 0px 2px #000; } .inputRange::-ms-thumb { -webkit-appearance: none; appearance: none; border: 1px solid #000; height: 10px; width: 10px; border-radius: 3px; background: #DCDCDC; cursor: pointer; margin-top: -3px; box-shadow: 0px 0px 2px #000; } /*=====Range track =====*/ .inputRange:hover input[type=range]::-webkit-slider-thumb { transform: scale(1.2); } .inputRange::-webkit-slider-runnable-track { width: 100%; height: 5px; cursor: pointer; background: rgba(0, 0, 0, .7); border-radius: 1.3px; border: 0.2px solid rgba(0, 0, 0, 0.7); } .inputRange::-ms-track { width: 100%; height: 5px; cursor: pointer; background: rgba(0, 0, 0, .7); border-radius: 1.3px; border: 0.2px solid rgba(0, 0, 0, 0.7); } .inputRange::-moz-range-track { width: 100%; height: 5px; cursor: pointer; background: rgba(0, 0, 0, .7); border-radius: 1.3px; border: 0.2px solid rgba(0, 0, 0, 0.7); } .inputRange::-ms-fill-lower { background: #2a6495; border: 0.2px solid #010101; border-radius: 2.6px; } .inputRange:focus::-ms-fill-lower { background: #3071a9; } .inputRange::-ms-fill-upper { background: #3071a9; border: 0.2px solid #010101; border-radius: 2.6px; } .inputRange:focus::-ms-fill-upper { background: #367ebd; } /*==== Volume Range ====*/ .volumeBox { height: 87%; display: flex; align-items: center; position: relative; padding: 4px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; } .volume { stroke: black; width: 20px; display: flex; } .volumeBox:hover svg.vol > * { stroke: #A9A9A9; fill: #A9A9A9; } .volumeBox:hover .mute > * { stroke: #A9A9A9; fill: #A9A9A9; } .muted{ stroke: black; width: 21px; height: 21px; display: none; } .noteMenu svg > * { fill: black; } .noteIcon { width: 23px;; } .noteMenu { stroke: black; padding: unset; width: 23px; aspect-ratio: 1; display: flex; justify-content: center; align-items: center; } .noteMenu:hover svg > * { stroke: #A9A9A9; fill: #A9A9A9; } .shuffleAudio:hover svg { stroke: #A9A9A9; fill: #A9A9A9; } /*======Conditions ======*/ .active { order: {{totalAudio}}; display: grid; box-shadow: 0px 0px 10px black; } .hide { display: none; } .active .musicDurWrap { display: flex; } .activeAudio { display: none; } .playing { width: 25px; padding: 2px; border: 1px solid; background: #ff2222; border-radius: 50%; animation: rotate 2s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } @media only screen and (max-width: 500px) { .audioController { width: 60%; padding: 1%; } .volumeWrap { margin-right: 3%; } .volumeWrap:hover .volumeBox { padding: 2%; } .rangeWrap { padding: 14.5% 0; } .musicInfo p { line-height: 1.2; } } </style> {% schema %} { "name": "Audio Background", "settings": [ { "type": "checkbox", "label": "Autoplay song", "id": "autoplay_audio", "default": false, "info": "Interaction is needed prior to autoplay" }, { "type": "color", "label": "Control's background color", "id": "control_bg", "default": "#808080" }, { "type": "color", "label": "Audio Track's background color", "id": "track_bg", "default": "#f0f8ff" }, { "type": "select", "id": "audio_position", "default": "bottom-left", "label": "Audio Position", "options": [ { "value": "bottom-left", "label": "bottom-left" }, { "value": "bottom-right", "label": "bottom-right" }, { "value": "upright upright-bottom", "label": "upright-bottom" }, { "value": "upright upright-top", "label": "upright-top" }, { "value": "upright upright-center", "label": "upright-center" } ] } ], "blocks": [ { "type": "audio_file", "name": "audio file", "settings": [ { "type": "text", "id": "audio_file", "label": "Enter URL of audio" }, { "type": "image_picker", "id": "image", "label": "Image of the audio" }, { "type": "text", "id": "audio_artist", "label": "Enter artist of audio" } ] } ] } {% endschema %} |
3. In the Layout folder, open the theme.liquid and find the {% section 'header' %}. Paste the code below before the header code.
| {% section 'shopify-music-player' %} |
That's it. Enjoy the music!