Solved

HTML and CSS code unable to be added to store

hermanaufricht
Shopify Partner
5 0 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:


<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. 
Accepted Solution (1)

PaulNewton
Shopify Partner
6274 572 1311

This is an accepted solution.

remove the <body> tags for use in custom-liquid settings.

get the relative off the <body> 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.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


View solution in original post

Replies 2 (2)

PaulNewton
Shopify Partner
6274 572 1311

This is an accepted solution.

remove the <body> tags for use in custom-liquid settings.

get the relative off the <body> 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.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


hermanaufricht
Shopify Partner
5 0 1

Okay, excellent! That solved the issues! 🙂