Creating a Typewriter Text Animation in Shopify

Please Note: If you have never used the html editor in Shopify you might? struggle with this one, see how you go and if no luck your developer should be able to give you a hand.

Steps

  1. Open up the page (or product, blog post etc) where you would like your text animation
  2. Switch to the html editor by clicking the <> button up the top right hand corner, and find the text you would like to animate. This will likely be a standard html element like a paragraph or a heading.
  3. Add the class "type-me" and the style "display: none" to the element (see below for example)
  4. Scroll down to the very end of your page html, and copy / paste the entire script code after your page html.
  5. Save the page and you're done!

Example Element

Script Code

Disclaimer: This method is really for demonstration only - the code is very simplistic, and in practice its not the best idea to put scripts INSIDE your page html, it can get messy really quickly - so use at your own risk :)

Leave a comment

Please note, comments must be approved before they are published