Audio button not showing in the shopify 2.0 themes. works fine in debutify.
Share the store URL…
1 Like
https://cf13dc.myshopify.com/products/drops-by-wave-man
password: open
Can you share the screenshot pls? where is the sound button ?
it works fine in debutify theme - but i will not be using debutify
@bless996 Is these buttons your are asking ?
i have embed the audio player to the product page but is not working with all the shopify 2.0 themes including the one i am using right now.
But works perfect in debutify theme
The vertical line under the DRY SAMPLE AND CO, ARE AUDIO FILES
Listen to production samples below
Dry Sample
Please activate JavaScript for the audio player.
Vocal Sample
Please activate JavaScript for the audio player.
Produced Sample
Please activate JavaScript for the audio player.
@charset "UTF-8";
/********** Essential Audio Player 1.0.3 CSS **********/
/****************************************/
/* */
/* Section 1: The Looks */
/* */
/****************************************/
.essential_audio :hover {
-webkit-transform: scale(1.01);
transform: scale(1.01);
opacity: 1.1;
}
/* 1. The Main Container */
div.essential_audio {
position: relative;
z-index: 0;
width: 100%;
}
/* 2. The Player Button – General */
div.essential_audio > div:nth-child(1) div {
width: 28px;
height: 28px;
margin-top: -15px;
margin-left: 4px;
border-radius: 14px;
background-color: #000;
}
div.essential_audio > div:nth-child(1) div:after {
position: absolute;
top: 2px;
left: 2px;
width: 24px;
height: 24px;
}
/* Set here how much the button exceeds the horizontal track limits: */
/* This must not be deleted! (but can be changed, of course) */
:root {
--button-protrusion: 4px;
}
/* 2.a) The Player Button – Off */
div.essential_audio > div:nth-child(1) div.off:after {
content: url("data:image/svg+xml; utf8, ");
}
/* 2.b) The Player Button – Loading */
div.essential_audio > div:nth-child(1) div.load:after {
content: url("data:image/svg+xml; utf8, ");
animation: audio_load_rotate 1s infinite linear;
}
@keyframes audio_load_rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 2.c) The Player Button – Playing */
div.essential_audio > div:nth-child(1) div.play {
background-color: #000!important;
}
div.essential_audio > div:nth-child(1) div.play:after {
content: url("data:image/svg+xml; utf8, ");
}
/* 2.d) The Player Button – Dragging */
div.essential_audio > div:nth-child(1) div.drag {
transition: left 0s!important;
/*
cursor: grab!important;
*/
}
/* 2.e) The Player Button – Error */
div.essential_audio > div:nth-child(1) div.error {
background-color: rgba(0,0,0,0.35)!important;
}
div.essential_audio > div:nth-child(1) div.error:after {
content: url("data:image/svg+xml; utf8, ");
}
/* 3. The Track */
div.essential_audio > div:nth-child(2) {
height: 2px;
}
div.essential_audio > div:nth-child(2):after {
content: "";
position: absolute;
z-index: 0;
background-color: #000;
opacity: 0.3;
mix-blend-mode: multiply;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
/* 4. The Loading Progress Bar */
div.essential_audio > div:nth-child(2) div {
background-color: #666;
mix-blend-mode: multiply;
}
/* 5. The Klick & Drag Sensor */
div.essential_audio > div:nth-child(3) {
height: 12px;
margin-top: -5px;
}
/****************************************/
/* */
/* Section 2: Core Values */
/* */
/****************************************/
/* 1. The Main Container + General Settings */
div.essential_audio,
div.essential_audio * {
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-overflow-scrolling: auto;
}
div.essential_audio *:focus {
outline: none;
}
/* 2. The Player Button */
div.essential_audio > div:nth-child(1) div {
position: absolute;
top: 0px;
left: 0px;
cursor: pointer;
}
/* 2.a) Container for Player Button */
div.essential_audio > div:nth-child(1) {
position: absolute;
z-index: 3;
height: 0px;
top: 0px;
left: calc(var(--button-protrusion) * -1);
width: calc(100% + (2 * var(--button-protrusion)));
}
/* 3. The Track */
div.essential_audio > div:nth-child(2) {
position: relative;
width: 100%;
overflow: hidden;
}
/* 4. The Loading Progress Bar */
div.essential_audio > div:nth-child(2) div {
position: absolute;
z-index: 1;
width: 0%;
height: 100%;
top: 0px;
left: 0px;
transition: width 0.5s;
}
/* 5. The Klick & Drag Sensor */
div.essential_audio > div:nth-child(3) {
position: absolute;
z-index: 2;
width: 100%;
top: 0px;
left: 0px;
}
Recheck, i have now publish the debutify theme
https://cf13dc.myshopify.com/collections/dj-drops-dj-intro/products/drops-by-wave-man?variant=43013239931115
paas: open
@bless996 , Yes now I understand, revert the changes I ll check
How did you implemented this functionality ? from Jquery or javascript or app?
javascript