How to import codes into Dawn theme ( html, css, js )

thirsttrap · ‎10-29-2024

Hi everyone, any idea how to import these slideshow codes into the Dawn theme?

It looks something like this..

Website:

html:

<div class="slider" data-state="0">

<div class="status">
<div class="point" data-current="0"></div>
<div class="stat" data-key="0"></div>
<div class="stat" data-key="1"></div>
<div class="stat" data-key="2"></div>
</div>

<div class="text">
<div class="current" data-key="0">quench</div>
<div data-key="1">your</div>
<div data-key="2">thirst</div>
</div>

<div class="image current" data-key="0" >

<img src="https://cdn.shopify.com/s/files/1/0725/9389/9745/files/3.jpg?v=1730190364" alt=""/>
</div>
<div class="image" data-key="1">
<img src="https://cdn.shopify.com/s/files/1/0725/9389/9745/files/4.jpg?v=1730190514" alt=""/>
</div>
<div class="image" data-key="2">
<img src="https://cdn.shopify.com/s/files/1/0725/9389/9745/files/5.1.png?v=1730190561" alt=""/>
</div>
<div

css:

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,900");
body {
padding: 0;
margin: 0;
display:flex;
justify-content:center;
align-items: center;
height:100vh;
font-family: Montserrat, sans-serif;
font-weight:900;
}
*, *:before, *:after {
box-sizing: border-box;
position: relative;

}
.slider {
position:relative;
display: flex;
width: 100vw;
height: 100vh;
overflow: hidden;
.status {
position: absolute;
bottom: 10px;
right:10px;
display:flex;
.point {
position: absolute;
width:14px;
height:14px;
top:-2px;
background-color:#ff0;
border-radius:50%;
z-index:15;
transition: left 500ms ease-in-out;
&[data-current='0'] {
left: 4px;
}
&[data-current='1'] {
left: 24px;
}
&[data-current='2'] {
left: 44px;
}
&[data-current='3'] {
left: 64px;
}
&[data-current='4'] {
left: 84px;
}
&[data-current='5'] {
left: 104px;
}
}
.stat {
width:10px;
height:10px;
background-color:transparent;
border-radius:50%;
z-index:20;
margin: 0px 5px;
border: 1px solid #fff;
}
.stat.current {
background-color:#fff;
}
}
.text {
position:absolute;
color: #ff0;
text-shadow: 0 0 5px #0003;
z-index:20;
transform-origin:right top;
transform: rotate(-90deg) translateY( calc( -90vh + 2vw ) );
display:grid;
grid-template-columns:90vh;
grid-template-rows:1fr;
font-size:15vw;
@media (min-width: 70em) {
font-size:7em;
}
text-transform: uppercase;
div {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start:1;
grid-row-end:2;
opacity:0;
&.current {
opacity:.7;
}
}
}

img {
object-fit: cover;
object-position: center center;
width: 100%;
height: 100%;
filter: sepia(1) hue-rotate(180deg);
display: block;
}
.image {
width: 100%;
margin-right: -100%;
opacity: 0;
overflow: hidden;
transform: translateY(0) scale(1.2);
z-index: 1;
}
.image.current {
z-index: 10;
transform: translateY(0) scale(1);
opacity:1;
}
}

js:

console.clear();

const slider = document.querySelector('.slider')

const allImages = Array.from(document.querySelectorAll('.slider .image'));
let state = {
photo: 0,
animationActive: false
};

// handling swipe
var mc = new Hammer(slider);
mc.add( new Hammer.Pan({ direction: Hammer.DIRECTION_ALL}) )
// listen to events...
mc.on("panup pandown", function(ev) {
if ( !state.animationActive ) {
state.animationActive = true
let dir = 1
if (ev.type=='panup') {
dir = -1
}
var next = state.photo + dir
var current = state.photo
slide(next,current)
}
});

// handling mousewhell
slider.addEventListener("wheel", function(e) {
e.stopPropagation()
if ( !state.animationActive ) {
state.animationActive = true
let dir = Math.sign(e.deltaY);
var next = state.photo + dir
var current = state.photo
slide(next,current)
}
});

document.onkeydown = function(e) {
if ( !state.animationActive ) {
state.animationActive = true
switch (e.keyCode) {
case 37:
// left
var next = state.photo - 1
var current = state.photo
slide(next,current)
break;
case 38:
// up
var next = state.photo + 1
var current = state.photo
slide(next,current)
break;
case 39:
// right
var next = state.photo + 1
var current = state.photo
slide(next,current)
break;
case 40:
// down
var next = state.photo - 1
var current = state.photo
slide(next,current)
break;
}
}
};

var allImg = document.querySelectorAll('.slider .image:not(.current)')
var init = anime({
targets: allImg,
scale: 1.4
});

Dan-From-Ryviu · ‎10-29-2024

Hi @thirsttrap

You can do that from your Online Store > Themes > Customize, select page you want this customize code to display, + Add section > Custom liquid, add your code to Liquid and save

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

thirsttrap · ‎10-29-2024

Hi, I've tried adding the codes to custom liquid but it doesnt seem to work properly. Its showing pictures stacking on top of each other but not in a slideshow format. However, thats only the html code. Not sure what to do about the js and css codes though.

Dan-From-Ryviu · ‎10-29-2024

Please add this code below to Custom liquid and check again

 <script src="https://cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js" integrity="sha256-98Q574VkbV+PkxXCKSgL6jVq9mrVbS7uCdA+vt0sLS8=" crossorigin="anonymous"></script>
<div class="slider" data-state="0">
<div class="status">
<div class="point" data-current="0"></div>
<div class="stat" data-key="0"></div>
<div class="stat" data-key="1"></div>
<div class="stat" data-key="2"></div>
</div>
<div class="text">
<div class="current" data-key="0">quench</div>
<div data-key="1">your</div>
<div data-key="2">thirst</div>
</div>
<div class="image current" data-key="0" >
<img src="https://cdn.shopify.com/s/files/1/0725/9389/9745/files/3.jpg?v=1730190364" alt=""/>
</div>
<div class="image" data-key="1">
<img src="https://cdn.shopify.com/s/files/1/0725/9389/9745/files/4.jpg?v=1730190514" alt=""/>
</div>
<div class="image" data-key="2">
<img src="https://cdn.shopify.com/s/files/1/0725/9389/9745/files/5.1.png?v=1730190561" alt=""/>
</div>
<div

<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,900");
body {
padding: 0;
margin: 0;
display:flex;
justify-content:center;
align-items: center;
height:100vh;
font-family: Montserrat, sans-serif;
font-weight:900;
}
*, *:before, *:after {
box-sizing: border-box;
position: relative;

}
.slider {
position:relative;
display: flex;
width: 100vw;
height: 100vh;
overflow: hidden;
.status {
position: absolute;
bottom: 10px;
right:10px;
display:flex;
.point {
position: absolute;
width:14px;
height:14px;
top:-2px;
background-color:#ff0;
border-radius:50%;
z-index:15;
transition: left 500ms ease-in-out;
&[data-current='0'] {
left: 4px;
}
&[data-current='1'] {
left: 24px;
}
&[data-current='2'] {
left: 44px;
}
&[data-current='3'] {
left: 64px;
}
&[data-current='4'] {
left: 84px;
}
&[data-current='5'] {
left: 104px;
}
}
.stat {
width:10px;
height:10px;
background-color:transparent;
border-radius:50%;
z-index:20;
margin: 0px 5px;
border: 1px solid #fff;
}
.stat.current {
background-color:#fff;
}
}
.text {
position:absolute;
color: #ff0;
text-shadow: 0 0 5px #0003;
z-index:20;
transform-origin:right top;
transform: rotate(-90deg) translateY( calc( -90vh + 2vw ) );
display:grid;
grid-template-columns:90vh;
grid-template-rows:1fr;
font-size:15vw;
@media (min-width: 70em) {
font-size:7em;
}
text-transform: uppercase;
div {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start:1;
grid-row-end:2;
opacity:0;
&.current {
opacity:.7;
}
}
}

img {
object-fit: cover;
object-position: center center;
width: 100%;
height: 100%;
filter: sepia(1) hue-rotate(180deg);
display: block;
}
.image {
width: 100%;
margin-right: -100%;
opacity: 0;
overflow: hidden;
transform: translateY(0) scale(1.2);
z-index: 1;
}
.image.current {
z-index: 10;
transform: translateY(0) scale(1);
opacity:1;
}
}
</style>
 

<script>
console.clear();

const slider = document.querySelector('.slider')

const allImages = Array.from(document.querySelectorAll('.slider .image'));
let state = {
photo: 0,
animationActive: false
};

const elStatus = Array.from(document.querySelectorAll('.slider .stat'));
elStatus.forEach( stat => {
stat.addEventListener('click', () => {
if ( !state.animationActive ) {
if(stat.dataset.key!=state.photo) {
state.animationActive = true
slide(stat.dataset.key,state.photo)
}
}
});
});

// handling swipe
var mc = new Hammer(slider);
mc.add( new Hammer.Pan({ direction: Hammer.DIRECTION_ALL}) )
// listen to events...
mc.on("panup pandown", function(ev) {
if ( !state.animationActive ) {
state.animationActive = true
let dir = 1
if (ev.type=='panup') {
dir = -1
}
var next = state.photo + dir
var current = state.photo
slide(next,current)
}
});

 

// handling mousewhell
slider.addEventListener("wheel", function(e) {
e.stopPropagation()
if ( !state.animationActive ) {
state.animationActive = true
let dir = Math.sign(e.deltaY);
var next = state.photo + dir
var current = state.photo
slide(next,current)
}
});

document.onkeydown = function(e) {
if ( !state.animationActive ) {
state.animationActive = true
switch (e.keyCode) {
case 37:
// left
var next = state.photo - 1
var current = state.photo
slide(next,current)
break;
case 38:
// up
var next = state.photo + 1
var current = state.photo
slide(next,current)
break;
case 39:
// right
var next = state.photo + 1
var current = state.photo
slide(next,current)
break;
case 40:
// down
var next = state.photo - 1
var current = state.photo
slide(next,current)
break;
}
}
};

 

function slide( toSlide, currentSlide ) {
//console.log('slide: to/cur '+toSlide+' / '+currentSlide )
if ( toSlide > currentSlide ) {
var direction = 'down'
}
if ( toSlide < currentSlide ) {
var direction = 'up'
}
var ele = document.querySelector('.slider .image[data-key="'+currentSlide+'"]')
if ( toSlide < 0 ) {
toSlide = allImages.length - 1
}
if ( toSlide > allImages.length-1 ) {
toSlide = 0
}
nextPhoto = toSlide
//console.log(' nextPhoto: '+nextPhoto +' l '+allImages.length)

currentTextEle = document.querySelector(' .slider .text .current ')
nextTextEle = document.querySelector(' .slider .text div[data-key="'+toSlide+'"] ')
var textOutToTop = anime({
targets: currentTextEle,
translateX: '110vh',
duration: 700,
easing: 'linear',
autoplay: false,
complete: function(anim) {
currentTextEle.classList.remove('current')
nextTextEle.classList.add('current')
}
});
var textOutToBottom = anime({
targets: currentTextEle,
translateX: '-110vh',
duration: 700,
easing: 'linear',
autoplay: false,
complete: function(anim) {
currentTextEle.classList.remove('current')
nextTextEle.classList.add('current')
}
});
var textInFromTop = anime({
targets: nextTextEle,
translateX: [
{ value: '110vh', duration: 1 },
{ value: 0, duration: 700 }
],
opacity: [
{ value: 0, duration: 1 },
{ value: .8, duration: 700 }
],
scaleX: [
{ value: 1.7, duration: 1 },
{ value: 1, duration: 200, delay:500 }
],
easing: 'easeInQuad',
autoplay: false,
});
var textInFromBottom = anime({
targets: nextTextEle,
translateX: [
{ value: '-80vh', duration: 1 },
{ value: 0, duration: 700 }
],
opacity: [
{ value: 0, duration: 1 },
{ value: .8, duration: 700 }
],
scaleX: [
{ value: 1.7, duration: 1 },
{ value: 1, duration: 400, delay:300 }
],
easing: 'easeInQuad',
autoplay: false,
});





var eleNext = document.querySelector('.slider .image[data-key="'+toSlide+'"]')
var outToBottomAni = anime({
targets: ele,
translateY: '110vh',
duration: 700,
easing: 'linear',
autoplay: false,
complete: function(anim) {
ele.classList.remove('current')
var resetAni = anime({
targets: ele,
translateY: 0,
duration: 1,
autoplay: false,
scale: 1.4,
opacity: 0,
})
resetAni.play()
}
});
var outToTopAni = anime({
targets: ele,
translateY: '-110vh',
duration: 700,
easing: 'linear',
autoplay: false,
complete: function(anim) {
ele.classList.remove('current')
var resetAni = anime({
targets: ele,
translateY: 0,
duration: 1,
autoplay: false,
scale: 1.4,
opacity: 0,
})
resetAni.play()
}
});
var inAni = anime({
targets: eleNext,
translateY: 0,
scale: 1,
opacity: 1,
duration: 1300,
easing: 'easeOutQuart',
autoplay: false,
complete: function(anim) {
eleNext.classList.add('current')
state.animationActive = false
}
});
inAni.play()
if ( direction == 'down' ) {
outToBottomAni.play()
textOutToBottom.play()
textInFromTop.play()
}
if ( direction == 'up' ) {
outToTopAni.play()
textOutToTop.play()
textInFromBottom.play()
}
state.photo = toSlide
let statusPoint = document.querySelector('.slider .point')
statusPoint.dataset.current = toSlide
}
</script>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

thirsttrap · ‎11-01-2024

Its still not working 😅