Compatibilidade: compatível com a maioria dos temas do Shopify, do Debut ao Dawn 2.0
Na era digital, criar uma experiência de compra online envolvente é crucial para o sucesso. A seção Shopify Music Player oferece exatamente isso – uma maneira única de cativar seus clientes através da música. Nesta postagem, exploraremos como esse recurso pode transformar sua loja Shopify em um destino de compras envolvente e memorável.
Por que a música é importante no comércio eletrônico:
- Conexão Emocional : A música tem o poder de evocar emoções, tornando sua loja memorável.
- Identidade da marca : playlists personalizadas podem reforçar a imagem e os valores da sua marca.
- Maior envolvimento : a música de fundo pode incentivar os clientes a passar mais tempo navegando.
Apresentando a seção Shopify Music Player: Este recurso inovador permite integrar música perfeitamente à sua loja Shopify. É mais do que apenas um jogador; é uma ferramenta para elevar sua marca e interagir com seus clientes em um nível totalmente novo.
Benefícios para sua loja:
- Experiência de compra única : Destaque-se dos concorrentes oferecendo uma experiência de navegação rica em sentidos.
- Maior envolvimento do cliente : a música pode manter os clientes em seu site por mais tempo, aumentando a probabilidade de compras.
- Apresentação de produtos : Ideal para lojas que vendem música ou produtos relacionados à música.
Características principais:
- Fácil instalação : adicione-o à sua loja com apenas alguns cliques.
- Listas de reprodução personalizadas : carregue sua música ou crie links para fontes externas.
- Totalmente personalizável : ajuste as configurações de acordo com o estilo e o clima da sua loja.
- Design responsivo : funciona perfeitamente em todos os dispositivos.
O que você está comprando:
- Adicione a seção do reprodutor de música ao seu Shopify
- Adicione controles ao reprodutor de música
- Carregue qualquer música
O que torna nosso código melhor:
- Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
- Não deixamos nem adicionamos códigos para anunciar em nosso site
- Nosso código é compatível com dispositivos móveis
Para iniciar:
1. Vá para Admin store > Loja online > Temas > Ações > Editar código.
2. Na pasta da seção, crie um novo arquivo de seção, nomeie-o como “shopify-music-player” e cole o código abaixo.
| {% assign autoplayAudio = section.settings.autoplay_audio %} {% if autoplayAudio == true %} <div class="autoplayPermission"> <span class="closeAudio">X</span> <span style="text-align: center;">O site contém áudio</span> <button onclick="init()"> Permitir reprodução automática</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="margem: 0; alinhamento de texto: centro"> {% 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" permitir="autoplay" {{ block.shopify_attributes }} dados-áudio= " {{audio_file}} " data-audio-index = " {{forloop.index0}} "> <source src=" {{block.settings.audio_file}} " type="audio/mp3"> Seu navegador não é compatível com a reprodução do áudio! </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="margem: 0; alinhamento de texto: centro"> {% 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="controle prevCtrl"> <svg viewBox="0 0 50 50"> <caminho 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" /> <caminho 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="controle de reprodução"> <svg viewBox="0 0 50 50"> <caminho 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="largura do traço: 6"> <polyline points="0,0 0,0 0,0 "/> <caminho 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"/> <caminho 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="controle nextCtrl"> <svg viewBox="0 0 50 50"> <caminho 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" /> <caminho 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"> <caminho estilo = "largura do traço: 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"/> <caminho estilo="largura do traço: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"/> <estilo de caminho = "largura do traço: 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 = "largura do traço: 6" pontos = "41,16,36,94 41,16,42,8 44,65,39,76"/> <polygon style = "largura do traço: 6" pontos = "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"> <pontos do polígono = "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 = "preenchimento: nenhum; largura do traço: 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" /> <caminho 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="silenciado"> <svg class="mute" viewBox="0 0 50 50"> <pontos do polígono = "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 = "preenchimento: nenhum; largura do traço: 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" /> <caminho 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="largura do traço: 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"> <pontos de polilinha = "-0,68,-1,79 -0,68,-1,79 -0,68,-1,79 "/> <caminho 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"/ > <caminho 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"/> <caminho d="M26.99,4.74"/> <caminho 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 "/> <caminho 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 0,87,0,97z"/> </svg> </div> </div> </div> </div> <roteiro> const áudios = document.querySelectorAll('.audio'); const trackContainer = document.querySelectorAll('.audioTrack'); const activeAudios= document.querySelectorAll('.audioActive'); const ativo = document.querySelector('.activeAudio') const audioList = document.querySelector('.audioList'); const audioBox = document.querySelector('.audioBox'); const activeContainer = document.querySelector('.activeContainer'); permissão const = document.querySelector('.autoplayPermission'); const closeAudio = document.querySelector('.closeAudio'); const anterior = document.querySelector('.prevCtrl'); const próximo = 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 silenciado = document.querySelector('.mutado'); const noteMenu = document.querySelector('.noteMenu'); const volRange = document.querySelector('.volRange'); deixe brincar; deixe audioPointer; deixe abrir = verdadeiro; deixe volumeValor; deixe stillScroll = true; deixe auto = {{autoplayAudio}} ; prev.addEventListener("clique", playPrev); next.addEventListener("clique", playNext); shuffleCtrl.addEventListener("clique", shuffleAudio); pausePlayCtrl.addEventListener("clique", pausePlay); volumeBox.addEventListener("clique", mudo); volRange.addEventListener("clique", volumeUpdate); noteMenu.addEventListener("clique", audioOpen); função audioOpen() { if (aberto == verdadeiro) { audioBox.style.display = "grade"; aberto = falso; }outro { audioBox.style.display = "nenhum"; aberto = verdadeiro; } } if( {{autoplayAudio}} ) { closeAudio.addEventListener("clique", closeDiv); } if(sessionStorage.getItem('Áudio') == nulo){ audioPointer = 1; sessionStorage.setItem('Áudio', audioPointer) } outro { audioPointer = sessionStorage.getItem('Áudio'); } if(sessionStorage.getItem('Allowauto') == null){ sessionStorage.setItem('Allowauto', true); jogando = falso; autoplaySet(falso); } if(sessionStorage.getItem('Allowauto') == 'true') { janela.onscroll = função (e){ if(stillScroll) { if (sessionStorage.getItem('Áudio') != null) { audioPointer = sessionStorage.getItem('Áudio')} autoplaySet(falso); jogando = falso; atual(audioPointer); } } } função closeDiv() { sessionStorage.setItem('atual', verdadeiro); permissão.style.display = 'nenhum'; } if(sessionStorage.getItem('atual')) { permissão.style.display = 'nenhum'; } função inicialização() { permissão.style.display = 'nenhum'; sessionStorage.setItem('Allowauto', true); sessionStorage.setItem('atual', verdadeiro); janela.onscroll = função (e){ if(stillScroll) { if (sessionStorage.getItem('Áudio') != null) { audioPointer = sessionStorage.getItem('Áudio')} autoplaySet(falso); jogando = falso; atual(audioPointer); } } } função playNext() { if (audioPointer <audios.length - 1) { audioPointer++; } outro { audioPointer = 0; } áudios.forEach(função(áudio) { áudio.pausa(); áudio.tempoatual = 0; }); jogando = falso; atual(audioPointer); } function playAnterior() { if (audioPointer == 0) { audioPointer = áudios.length - 1; } outro { ponteiro de áudio-- } áudios.forEach(função(áudio) { áudio.pausa(); áudio.tempoatual = 0; }); jogando = falso; atual(audioPointer); } função playTrack(faixa) { áudios.forEach(função(áudio) { áudio.pausa(); áudio.tempoatual = 0; }); audioPointer = faixa; jogando = falso; atual(audioPointer); } função shuffleÁudio() { deixe randomIndex; áudios.forEach(function() { const totalAudio = audios.length; randomIndex = Math.floor(Math.random() * (totalAudio)); audioPointer = randomIndex; }) áudios.forEach(função(áudio) { áudio.pausa(); áudio.tempoatual = 0; }); jogando = falso; atual(audioPointer); } função atual() { if( {{autoplayAudio}} ) { sessionStorage.setItem('atual', verdadeiro); permissão.style.display = 'nenhum'; } function deleteSession() { const currentIndex = 'Áudio'; Object.keys(sessãoStorage) .filter( (chave)=> key.match(currentIndex) ) .forEach(função(chave) { sessionStorage.removeItem(chave) }); } sessionStorage.setItem('Áudio', audioPointer); const audioIndex = document.querySelector(`[data-audio-index="${audioPointer}"]`); audioIndex.currentTime = sessionStorage.getItem(`playing[${audioPointer}]`); audioPointer = sessionStorage.getItem('Áudio'); pausePlay(audioPointer); playMusic(áudioPointer); stillScroll = falso; } function playMúsica() { 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}"]`); jogando = verdadeiro; activeAudios.forEach(função(ativo) { ativo.classList.remove('ativo'); }); activeAudio.classList.add('ativo'); trackContainer.forEach(função(faixa) { track.classList.remove('ocultar'); }); trackAudio.classList.add('ocultar'); const playPromise = audioIndex.play(); if (playPromise! == indefinido) { playPromise.then(_ => {}) .catch(erro => {}); } 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 = 'reproduzindo'; Object.keys(sessãoStorage) .filter( (chave)=> key.match(áudio atual) ) .forEach(função(chave) { sessionStorage.removeItem(chave) }); } deleteSession(); sessionStorage.setItem(`playing[${audioPointer}]`, audioIndex.currentTime); } audioIndex.addEventListener('finalizado', (evento) => { jogarPróximo(); }); musicDuration.addEventListener('input', function() { audioIndex.currentTime = musicDuration.value; }, falso); } function pausePlay() { const audioIndex = document.querySelector(`[data-audio-index="${audioPointer}"]`); se(jogando) { audioIndex.pause(); jogando = falso; playCtrl.style.display = 'flex'; pauseCtrl.style.display = 'nenhum'; userScrolled = falso; noteMenu.classList.remove('reproduzindo'); } outro { autoplaySet(verdadeiro); jogando = verdadeiro; atual(audioPointer); pauseCtrl.style.display = 'flex'; playCtrl.style.display = 'nenhum'; noteMenu.classList.add('reproduzindo'); } if(sessionStorage.getItem('Allowauto') == 'true') { autoplaySet(falso); }outro{ autoplaySet(verdadeiro); } } função autoplaySet(autoAllow) { function deleteSession() { const currentIndex = 'AllowAuto'; Object.keys(sessãoStorage) .filter( (chave)=> key.match(currentIndex) ) .forEach(função(chave) { sessionStorage.removeItem(chave) }); } deleteSession(); sessionStorage.setItem('Allowauto', autoAllow); } função atualização de volume() { const volValue = volRange.valor; volumeValor = volValor/100; volume.classList.remove('silenciado'); volumeDados(volumeValor); silenciado.style.display = 'nenhum'; volume.style.display ='flex'; } função mudo() { if (valorValor! = 0) { silenciado.style.display = 'flex'; volume.style.display ='nenhum'; volumeValor = 0; volumeDados(volumeValor); } outro { atualização de volume(); } } function volumeDados() { const audioIndex = document.querySelector(`[data-audio-index="${audioPointer}"]`); audioIndex.volume = volumeValor; } </script> <estilo> entrada, área de texto { preenchimento: 0; } .autoplayPermission { posição: fixa; superior: 115px; direita: 16px; largura: 220px; exibição: flexível; plano de fundo: {{section.settings.track_bg}} ; direção flexível: coluna; alinhar itens: centro; preenchimento: 5px; sombra da caixa: 0px 0px 10px; índice z: 2; } .closeAudio { margem esquerda: 90%; largura: 24px; altura: 24px; exibição: flexível; justificar-conteúdo: centro; cursor: ponteiro; } .closeAudio:hover { peso da fonte: 600; } .botão autoplayPermission{ display: bloco embutido; fronteira: nenhuma; preenchimento: 4px; raio da borda: 5px; cor preta; plano de fundo: #ebe9e9; } Botão .autoplayPermission:hover { cor branca; fundo: preto; } .audioContainer { posição: fixa; inferior: 5%; preenchimento: 0 3%; índice z: 2; exibição: flexível; -webkit-touch-callout: nenhum; /* Safári iOS */ -webkit-user-select: nenhum; /* Safári */ -khtml-user-select: nenhum; /* HTML do Konqueror */ -moz-user-select: nenhum; /* Versões antigas do Firefox */ -ms-user-select: nenhum; /* Internet Explorer/Edge */ seleção de usuário: nenhum; } .audioWrapper { largura: 250px; posição: relativa; exibição: flexível; direção flexível: coluna; } .audios { Mostrar nenhum; } .audioList{ largura: 100%; plano de fundo: {{section.settings.track_bg}} ; exibição: grade; direção flexível: coluna; raio da borda: 8px; margem inferior: 8px; transição: altura 0,5s de facilidade; } .activeContainer { largura: 100%; plano de fundo: {{section.settings.track_bg}} ; exibição: flexível; direção flexível: coluna; raio da borda: 8px; margem inferior: 8px; transição: altura 0,5s de facilidade; } .audioAtivo { Mostrar nenhum; raio da borda: 8px; } .audioBox { Mostrar nenhum; } .musicWrapper { exibição: flexível; justificar conteúdo: espaço ao redor; alinhar itens: centro; preenchimento: 2% 5%; margem: 2% 0; } .imageWrapper { ajuste ao objeto: contém; largura: 30%; estouro: oculto; proporção: 1; exibição: flexível; alinhar itens: centro; justificar-conteúdo: centro; } .imageWrapper img { largura máxima: 100%; altura máxima: 100%; } .audioTrack:hover .musicInfo { cor preta; peso da fonte: 600; } .musicInfo { largura: 70%; exibição: flexível; justificar-conteúdo: centro; direção flexível: coluna; alinhar itens: centro; } .musicInfo span { alinhamento de texto: centro; } .musicDurWrap { largura: 90%; altura: 85%; Mostrar nenhum; raio superior esquerdo da borda: 15px; raio inferior esquerdo da borda: 15px; direção flexível: coluna; justificar-conteúdo: centro; transição: largura 0,3s linear; } /*====== Posição de controle ======*/ .canto inferior direito { direita: 0; } .inferior esquerdo { esquerda: 0; } .vertical { direita: 0; altura: 0; largura: automático; justificar conteúdo: flex-end; preenchimento: 0 !importante; } .upright .audioWrapper{ direção flexível: linha; largura: 400px; alinhar itens: centro; justificar conteúdo: flex-end; } .upright.audioController { largura: automático; altura: 200px; direção flexível: coluna; margem: 0,5%; preenchimento: 3% 1%; } .upright .volumeWrap:hover .rangeWrap { altura: 28px; } .upright .volumeWrap:hover { largura máxima: 95px; } .upright .volumeRange { margem: 0; justificar-conteúdo: centro; } .upright .volumeBox { altura: automático; preenchimento: 4px; } .upright .activeContainer { margem inferior: 0; } .upright-top { superior: 30%; } .upright-top .audioBox { margem superior: 30%; } .upright-bottom { superior: 80%; } .upright-bottom .audioBox { margem inferior: 30%; } .centro vertical { topo: 50%; } /*======Controladores ====*/ .audioController { largura: 100%; altura: 100%; plano de fundo: {{section.settings.control_bg}} ; posição: relativa; preenchimento: 3%; exibição: flexível; justificar-conteúdo: espaço entre; alinhar itens: centro; borda: 1px preto sólido; raio da borda: 5px; } .ao controle { traço: preto; largura: 20px; exibição: flexível; } .control:hover { acidente vascular cerebral: #A9A9A9; preencha: #A9A9A9; } .prevCtrl { transformar: girar (180 graus); } .pausePlay{ posição: relativa; exibição: flexível; alinhar itens: centro; } .pausePlay:hover * { acidente vascular cerebral: #A9A9A9; } .shuffleÁudio { exibição: flexível; largura: 21px; direção flexível: coluna; justificar-conteúdo: centro; alinhar itens: centro; } .shuffleAudio svg { traço: preto; largura: 21px; exibição: flexível; largura do traço:5; } .volumeWrap { exibição: flexível; alinhar itens: centro; justificar conteúdo: flex-end; } .volumeWrap:hover .volumeBox { plano de fundo: #909090; } .volumeWrap:hover .rangeWrap { largura: 60%; } .volumeWrap:hover .volRange { exibição: flexível; } /*=======Faixa de volume ====*/ .rangeWrap { largura: 0; altura: 85%; exibição: flexível; plano de fundo: #909090; raio superior esquerdo da borda: 15px; raio inferior esquerdo da borda: 15px; direção flexível: coluna; justificar-conteúdo: centro; preenchimento: 8,5% 0; transição: largura 0,3s linear; } .volRange{ largura: 100%; margem: 0,4%; Mostrar nenhum; transição: exibição 0,3s linear; } .inputRange { -webkit-aparência: nenhum; aparência: nenhuma; fundo: transparente; fronteira: nenhuma; } .inputRange:foco { esboço: nenhum; } .inputRange::-webkit-slider-thumb { -webkit-aparência: nenhum; aparência: nenhuma; borda: 1px sólido #000; altura: 10px; largura: 10px; raio da borda: 3px; histórico: #DCDCDC; cursor: ponteiro; margem superior: -3px; sombra da caixa: 0px 0px 2px #000; } .inputRange::-moz-range-thumb { -webkit-aparência: nenhum; aparência: nenhuma; borda: 1px sólido #000; altura: 10px; largura: 10px; raio da borda: 3px; histórico: #DCDCDC; cursor: ponteiro; margem superior: -3px; sombra da caixa: 0px 0px 2px #000; } .inputRange::-ms-thumb { -webkit-aparência: nenhum; aparência: nenhuma; borda: 1px sólido #000; altura: 10px; largura: 10px; raio da borda: 3px; histórico: #DCDCDC; cursor: ponteiro; margem superior: -3px; sombra da caixa: 0px 0px 2px #000; } /*===== Faixa de alcance =====*/ .inputRange:hover input[type=range]::-webkit-slider-thumb { transformar: escala(1,2); } .inputRange::-webkit-slider-runnable-track { largura: 100%; altura: 5px; cursor: ponteiro; plano de fundo: rgba (0, 0, 0, 0,7); raio da borda: 1,3px; borda: 0,2px sólido rgba (0, 0, 0, 0,7); } .inputRange::-ms-track { largura: 100%; altura: 5px; cursor: ponteiro; plano de fundo: rgba (0, 0, 0, 0,7); raio da borda: 1,3px; borda: 0,2px sólido rgba (0, 0, 0, 0,7); } .inputRange::-moz-range-track { largura: 100%; altura: 5px; cursor: ponteiro; plano de fundo: rgba (0, 0, 0, 0,7); raio da borda: 1,3px; borda: 0,2px sólido rgba (0, 0, 0, 0,7); } .inputRange::-ms-fill-lower { plano de fundo: #2a6495; borda: 0,2px sólido #010101; raio da borda: 2,6px; } .inputRange:focus::-ms-fill-lower { plano de fundo: #3071a9; } .inputRange::-ms-fill-upper { plano de fundo: #3071a9; borda: 0,2px sólido #010101; raio da borda: 2,6px; } .inputRange:focus::-ms-fill-upper { plano de fundo: #367ebd; } /*==== Faixa de volume ====*/ .volumeBox { altura: 87%; exibição: flexível; alinhar itens: centro; posição: relativa; preenchimento: 4px; raio superior direito da borda: 15px; raio inferior direito da borda: 15px; } .volume { traço: preto; largura: 20px; exibição: flexível; } .volumeBox:hover svg.vol > * { acidente vascular cerebral: #A9A9A9; preencha: #A9A9A9; } .volumeBox:hover .mute > * { acidente vascular cerebral: #A9A9A9; preencha: #A9A9A9; } .silenciado{ traço: preto; largura: 21px; altura: 21px; Mostrar nenhum; } .noteMenu svg > * { preenchimento: preto; } .noteIcon { largura: 23px;; } .noteMenu { traço: preto; preenchimento: não definido; largura: 23px; proporção: 1; exibição: flexível; justificar-conteúdo: centro; alinhar itens: centro; } .noteMenu:hover svg > * { acidente vascular cerebral: #A9A9A9; preencha: #A9A9A9; } .shuffleAudio:hover svg { acidente vascular cerebral: #A9A9A9; preencha: #A9A9A9; } /*======Condições ======*/ .ativo { pedido: {{totalAudio}} ; exibição: grade; sombra da caixa: 0px 0px 10px preto; } .esconder { Mostrar nenhum; } .ativo .musicDurWrap { exibição: flexível; } .activeAudio { Mostrar nenhum; } .jogando { largura: 25px; preenchimento: 2px; borda: 1px sólido; plano de fundo: #ff2222; raio da fronteira: 50%; animação: gire 2s linearmente infinito; } @keyframes girar { de { transformar: girar (0 graus); } para { transformar: girar (359 graus); } } Tela somente @media e (largura máxima: 500px) { .audioController { largura: 60%; preenchimento: 1%; } .volumeWrap { margem direita: 3%; } .volumeWrap:hover .volumeBox { preenchimento: 2%; } .rangeWrap { preenchimento: 14,5% 0; } .musicInfo p { altura da linha: 1,2; } } </estilo> {% schema %} { "name": "Fundo de áudio", "configurações": [ { "tipo": "caixa de seleção", "label": "Reprodução automática de música", "id": "autoplay_audio", "padrão": falso, "info": "É necessária interação antes da reprodução automática" }, { "tipo": "cor", "label": "Cor de fundo do controle", "id": "control_bg", "padrão": "#808080" }, { "tipo": "cor", "label": "Cor de fundo da faixa de áudio", "id": "track_bg", "padrão": "#f0f8ff" }, { "tipo": "selecionar", "id": "posição_áudio", "padrão": "canto inferior esquerdo", "label": "Posição de áudio", "opções": [ { "valor": "canto inferior esquerdo", "rótulo": "canto inferior esquerdo" }, { "valor": "canto inferior direito", "rótulo": "canto inferior direito" }, { "valor": "vertical vertical-inferior", "label": "vertical inferior" }, { "value": "vertical vertical-topo", "label": "topo vertical" }, { "value": "vertical vertical-centro", "label": "centro vertical" } ] } ], "blocos": [ { "tipo": "arquivo_áudio", "nome": "arquivo de áudio", "configurações": [ { "tipo": "texto", "id": "arquivo_áudio", "label": "Insira o URL do áudio" }, { "type": "image_picker", "id": "imagem", "label": "Imagem do áudio" }, { "tipo": "texto", "id": "artista_áudio", "label": "Insira o artista do áudio" } ] } ] } {% endschema %} |
3. Na pasta Layout, abra theme.liquid e encontre o {% section 'header' %} . Cole o código abaixo antes do código do cabeçalho.
| {% section ' shopify-music-player ' %} |
É isso. Curta a música!