Shopify themes, liquid, logos, and UX
Hey there i want to add https://codepen.io/JacobStone420/pen/dyEvl/ between my slideshow and first image on my site but not sure how to, can someone please assist me. Thank
Site: photifypresets.com
Password: photify
Hello @phxllip
Add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
Iam {
padding: 2em 5em;
font: normal 40px/50px Montserrat, sans-serif;
color: #999;
}
.Iam p {
height: 50px;
float: left;
margin-right: 0.3em;
}
.Iam b {
float: left;
overflow: hidden;
position: relative;
height: 50px;
top: 40px;
}
.Iam .innerIam {
display: inline-block;
color: #e74c3c;
position: relative;
white-space: nowrap;
top: 0;
left: 0;
/*animation*/
-webkit-animation:move 5s;
-moz-animation:move 5s;
-ms-animation:move 5s;
-o-animation:move 5s;
animation:move 5s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-iteration-count:infinite;
/*animation-delay*/
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-ms-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s;
}
@keyframes move{
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
@-webkit-keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
@-moz-keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
@-o-keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
@keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
2. sections->/slideshow.liquid->paste below code before " {% schema %} "
<div class="Iam">
<p>This is</p>
<b>
<div class="innerIam">
leggera<br />
a theme in progress<br />
built on bootstrap<br />
how I learn stuff<br />
how we do it
</div>
</b>
Hey @Uncle_ben this didn't work i manage to get it on my homepage by creating a custom css and inserting it into my theme.liquid between the <head> tags and then inserting the html as text in a banner section. But it doesn't align properly as it should both on desktop and mobile and padding is wide. Can you help me please. Examples of code i used and pics below.
.Iam {
padding: 2em 4em 5em;
font: normal 40px/50px Montserrat, sans-serif;
color: #999;
}
.Iam p {
height: 50px;
float: left;
margin-right: 0.3em;
}
.Iam b {
float: left;
overflow: hidden;
position: relative;
height: 50px;
top: 40px;
}
.Iam .innerIam {
display: inline;
color: #487177;
max-width:100%;
align:center;
position: relative;
top: 0;
left: 0;
/*animation*/
-webkit-animation:move 5s;
-moz-animation:move 5s;
-ms-animation:move 5s;
-o-animation:move 5s;
animation:move 5s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-iteration-count:infinite;
/*animation-delay*/
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-ms-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s;
}
@keyframes move{
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
@-webkit-keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
@-moz-keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
@-o-keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
@keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<div class="Iam">
<p>This is</p>
<b>
<div class="innerIam">
leggera<br>
a theme in progress<br>
built on bootstrap<br>
how I learn stuff<br>
how we do it
</div>
</b>
</div>
hello @phxllip
It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like
Hey, did you find a solution to insert that ? i would like to use this effect also.
cordially
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024