HTML and CSS code unable to be added to store

Retired Boards Appdev Store Design
, , ,
1

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:

Dance
Smell
Illuminate
Experience
with your Mistify
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;
}

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.

2

remove the tags for use in custom-liquid settings.

get the relative off the tag and put the other code in it’s own container for testing.

When working then position the container to the body.

In the css all the absolute position elements will be right on top of each other.

Make sure you a previewing the correct theme.

With custom-liquid settings make sure the code is saving.

Inspect the actual rendered HTML source(ctrl+u) of the themes frontend to ensure the code is being rendered.

3

Okay, excellent! That solved the issues! :slightly_smiling_face: