I am not sure why, but whenever I try to add this code to the shopify site as custom liquid, it does not show up. My code does not have any errors that I can find, so I am unsure what the error could be. When I run it on Codepen it is fine, and same with Visual Studio Code. I went as far to make a more liquid-friendly file with a schema and added it to the theme. Still, it didn't show up at all. not sure what the problem is or if shopify has some super secret way to add it?
Here is the code for a section I was making, featuring a fade animation:
<body>
<div class="dance">Dance</div>
<div class="smell">Smell</div>
<div class="illuminate">Illuminate</div>
<div class="experience">Experience</div>
<div class="right-text">with your Mistify</div>
</body>
<style>
body {
position: relative;
font-size: 2.5em;
}
.dance,
.smell,
.illuminate,
.experience {
position: absolute;
top: 10px;
font-size: 2.5em;
right: 50.4%;
animation-name: fade;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-delay: 0s;
animation-duration: 12s;
animation-direction: normal;
}
.smell {
animation-delay: 3s;
}
.illuminate {
animation-delay: 6s;
}
.experience {
animation-delay: 9s;
}
@keyframes fade {
0%, 15% {
opacity: 0;
}
20%, 35% {
opacity: 1;
}
40%, 55% {
opacity: 0;
}
60%, 75% {
opacity: 0;
}
80%, 100% {
opacity: 0;
}
}
.right-text {
position: absolute;
top: 10px;
left: 50.4%;
font-size: 2.5em;
}
</style>
Anyway, I am really annoyed since I think it would be easy to add raw code. IDK what would be causing it to not show up no matter what I try.
