Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

HTML and CSS code unable to be added to store

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
7450 657 1565

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.

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


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

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


View solution in original post

Replies 2 (2)

PaulNewton
Shopify Partner
7450 657 1565

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.

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


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

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


hermanaufricht
Shopify Partner
5 0 1

Okay, excellent! That solved the issues! 🙂