Nothing says “this store is alive” like text that types itself. A typing text effect cycles through your key messages — free shipping, new arrivals, easy returns — right in your hero, holding visitor attention far longer than static text. Big brands pay developers for this; you’ll do it in 2 minutes with copy-paste code and zero apps.
Below are 6 typing styles for different store personalities. Each renders live here — watch the cursor blink — then grab the code and drop it into a Custom Liquid section. The JavaScript is tiny, dependency-free, and works on every Shopify theme.
1. Fashion – Classic Typewriter
The timeless typewriter: clean black text on white, blinking bar cursor, cycling through your store’s top perks. It reads as confident and editorial — like a fashion magazine that talks. The 90ms keystroke speed feels human, and the 1.5-second pause lets each message land before the next one types out. A safe, classy default for any apparel store.
Preview
|
Live demo above ☝️ — watch it type, pause, delete, repeat.
Liquid Code
<div class="lk-ty1">
<h2 class="lk-ty1-line"><span class="lk-ty1-text"></span><span class="lk-ty1-cursor">|</span></h2>
</div>
<style>
.lk-ty1{background:#ffffff;text-align:center;padding:60px 20px;border-radius:12px}
.lk-ty1-line{color:#111111;font-size:34px;margin:0;font-family:Georgia,serif;}
.lk-ty1-cursor{color:#111111;animation:lk-ty1Blink 1s infinite;font-weight:300}
@keyframes lk-ty1Blink{0%,49%{opacity:1}50%,100%{opacity:0}}
</style>
<script>
(function(){var words=["Free Shipping Over $50","New Arrivals Every Friday","30-Day Easy Returns"];var el=document.querySelector('.lk-ty1-text');var wi=0,ci=0,del=false;
function tick(){var w=words[wi];el.textContent=w.slice(0,ci);
if(!del){ci++;if(ci>w.length){del=true;return setTimeout(tick,1500);}}
else{ci--;if(ci===0){del=false;wi=(wi+1)%words.length;}}
setTimeout(tick,del?40:90);}
tick();})();
</script>2. Tech – Terminal Style Typing
Green-on-black terminal text with a blocky cursor — instant hacker cred for gadget and gaming stores. The monospace font and dark background make it feel like your store runs on pure code. Swap the phrases for specs (‘4K Display’, ’48Hr Battery’) and tech shoppers will feel right at home. Bonus: it looks incredible on dark-mode themes.
Preview
|
Live terminal demo above ☝️ — pure cyber vibes.
Liquid Code
<div class="lk-ty2">
<h2 class="lk-ty2-line"><span class="lk-ty2-text"></span><span class="lk-ty2-cursor">|</span></h2>
</div>
<style>
.lk-ty2{background:#0a0f0a;text-align:center;padding:60px 20px;border-radius:12px}
.lk-ty2-line{color:#00ff66;font-size:34px;margin:0;font-family:'Courier New',monospace;}
.lk-ty2-cursor{color:#00ff66;animation:lk-ty2Blink 1s infinite;font-weight:300}
@keyframes lk-ty2Blink{0%,49%{opacity:1}50%,100%{opacity:0}}
</style>
<script>
(function(){var words=["4K Ultra HD Display","48-Hour Battery Life","Free Express Shipping"];var el=document.querySelector('.lk-ty2-text');var wi=0,ci=0,del=false;
function tick(){var w=words[wi];el.textContent=w.slice(0,ci);
if(!del){ci++;if(ci>w.length){del=true;return setTimeout(tick,1500);}}
else{ci--;if(ci===0){del=false;wi=(wi+1)%words.length;}}
setTimeout(tick,del?40:90);}
tick();})();
</script>3. Beauty – Soft Cursive Typing
An italic serif that types like a love letter — perfect for cosmetics, fragrances, and wellness brands. The slower keystroke pace feels deliberate and luxurious, like each word is being chosen with care. Pair it with a blush background and you’ve got a hero that whispers instead of shouts. Elegance, automated.
Preview
|
Live demo above ☝️ — soft, slow, luxurious.
Liquid Code
<div class="lk-ty3">
<h2 class="lk-ty3-line"><span class="lk-ty3-text"></span><span class="lk-ty3-cursor">|</span></h2>
</div>
<style>
.lk-ty3{background:#fdf2f4;text-align:center;padding:60px 20px;border-radius:12px}
.lk-ty3-line{color:#9d4e5c;font-size:34px;margin:0;font-family:Georgia,serif;font-style:italic;}
.lk-ty3-cursor{color:#9d4e5c;animation:lk-ty3Blink 1s infinite;font-weight:300}
@keyframes lk-ty3Blink{0%,49%{opacity:1}50%,100%{opacity:0}}
</style>
<script>
(function(){var words=["Clean Ingredients Only","Cruelty Free Always","Loved by 50,000+ Customers"];var el=document.querySelector('.lk-ty3-text');var wi=0,ci=0,del=false;
function tick(){var w=words[wi];el.textContent=w.slice(0,ci);
if(!del){ci++;if(ci>w.length){del=true;return setTimeout(tick,1800);}}
else{ci--;if(ci===0){del=false;wi=(wi+1)%words.length;}}
setTimeout(tick,del?60:130);}
tick();})();
</script>4. Food – Fast & Fun Typing
Crank the speed up and let the energy fly. This rapid-fire typer zips through tasty phrases at nearly double speed — great for snack brands, cloud kitchens, and anyone selling fun. The bold orange-on-cream combo is pure appetite appeal. Short punchy phrases work best here; think slogans, not sentences.
Preview
|
Live demo above ☝️ — fast, tasty, fun.
Liquid Code
<div class="lk-ty4">
<h2 class="lk-ty4-line"><span class="lk-ty4-text"></span><span class="lk-ty4-cursor">|</span></h2>
</div>
<style>
.lk-ty4{background:#fff8e7;text-align:center;padding:60px 20px;border-radius:12px}
.lk-ty4-line{color:#c2410c;font-size:34px;margin:0;font-weight:800;}
.lk-ty4-cursor{color:#c2410c;animation:lk-ty4Blink 1s infinite;font-weight:300}
@keyframes lk-ty4Blink{0%,49%{opacity:1}50%,100%{opacity:0}}
</style>
<script>
(function(){var words=["Hot & Fresh Daily!","Free Delivery Over $20","4.9★ Rated by Foodies"];var el=document.querySelector('.lk-ty4-text');var wi=0,ci=0,del=false;
function tick(){var w=words[wi];el.textContent=w.slice(0,ci);
if(!del){ci++;if(ci>w.length){del=true;return setTimeout(tick,1200);}}
else{ci--;if(ci===0){del=false;wi=(wi+1)%words.length;}}
setTimeout(tick,del?25:55);}
tick();})();
</script>5. Jewelry – Luxury Slow Typing
True luxury never rushes. This slow, stately typer reveals each word with ceremony — ideal for fine jewellery, watches, and premium gifts. The deep charcoal background with champagne-gold text creates instant perceived value. Use phrases about craftsmanship and heritage; let the pauses do the heavy lifting.
Preview
|
Live demo above ☝️ — slow luxury in motion.
Liquid Code
<div class="lk-ty5">
<h2 class="lk-ty5-line"><span class="lk-ty5-text"></span><span class="lk-ty5-cursor">|</span></h2>
</div>
<style>
.lk-ty5{background:#1a1a1a;text-align:center;padding:60px 20px;border-radius:12px}
.lk-ty5-line{color:#d4af37;font-size:34px;margin:0;font-family:Georgia,serif;letter-spacing:2px;}
.lk-ty5-cursor{color:#d4af37;animation:lk-ty5Blink 1s infinite;font-weight:300}
@keyframes lk-ty5Blink{0%,49%{opacity:1}50%,100%{opacity:0}}
</style>
<script>
(function(){var words=["Handcrafted in Italy","Lifetime Warranty","Since 1987"];var el=document.querySelector('.lk-ty5-text');var wi=0,ci=0,del=false;
function tick(){var w=words[wi];el.textContent=w.slice(0,ci);
if(!del){ci++;if(ci>w.length){del=true;return setTimeout(tick,2200);}}
else{ci--;if(ci===0){del=false;wi=(wi+1)%words.length;}}
setTimeout(tick,del?70:150);}
tick();})();
</script>6. Fitness – Bold Punchy Typing
ALL CAPS. No mercy. This aggressive typer hammers out motivational phrases in heavy condensed type on a red-black background. The fast delete (just 25ms per character) keeps the intensity maxed — it barely finishes one phrase before attacking the next. Made for supplement brands, gyms, and anyone selling beast mode.
Preview
|
Live demo above ☝️ — feel the intensity.
Liquid Code
<div class="lk-ty6">
<h2 class="lk-ty6-line"><span class="lk-ty6-text"></span><span class="lk-ty6-cursor">|</span></h2>
</div>
<style>
.lk-ty6{background:#0d0d0d;text-align:center;padding:60px 20px;border-radius:12px}
.lk-ty6-line{color:#ff3b3b;font-size:34px;margin:0;font-weight:900;letter-spacing:1px;}
.lk-ty6-cursor{color:#ffffff;animation:lk-ty6Blink 1s infinite;font-weight:300}
@keyframes lk-ty6Blink{0%,49%{opacity:1}50%,100%{opacity:0}}
</style>
<script>
(function(){var words=["NO EXCUSES. JUST RESULTS.","FREE WORKOUT PLANS","JOIN 100K+ ATHLETES"];var el=document.querySelector('.lk-ty6-text');var wi=0,ci=0,del=false;
function tick(){var w=words[wi];el.textContent=w.slice(0,ci);
if(!del){ci++;if(ci>w.length){del=true;return setTimeout(tick,1300);}}
else{ci--;if(ci===0){del=false;wi=(wi+1)%words.length;}}
setTimeout(tick,del?25:70);}
tick();})();
</script>How to Add Typing Text Effect to Shopify
- From your Shopify admin, go to Online Store → Themes.
- Click Customize on your live (published) theme.
- In the theme editor sidebar, click Add section → Custom Liquid.
- Copy the code from any variation above and paste it into the Custom Liquid box.
- Drag the section where you want it on the homepage and click Save — done! No app needed.
Customize the Typing Text Effect
- Edit the phrases — change the words inside
var words=[...]to your own messages. - Control typing speed: the last three numbers in the script are
type speed, delete speed, pause(in milliseconds). - Change colours and fonts in the
<style>block to match your brand. - Make it slower and calmer for luxury brands (try 150 / 70 / 2200) or faster for playful brands (55 / 25 / 1200).
- The effect loops forever automatically — add as many phrases as you like to the words array.
More Shopify Code Sections
- Shopify Hero Banner Text Animation (Liquid + CSS)
- Shopify Animated Gradient Text Effect
- Shopify Liquid Announcement Bar with Scrolling Text
- Shopify Video Background Hero Section
- Shopify Animated Counter Section
- Shopify Testimonial Auto Slider
- Shopify Sticky Announcement Bar
- Shopify Countdown Announcement Bar
Conclusion
A typing text effect turns your hero from a billboard into a conversation — and conversations convert better. Pick the style that matches your brand’s voice, swap in your own phrases, and paste it into a Custom Liquid section. Two minutes of work, zero apps, and a homepage that literally talks to your visitors. Your competitors’ static headlines won’t stand a chance.
Want more copy-paste Shopify sections like this? Check out LayoutKart’s premium Shopify templates — professionally designed themes packed with conversion-boosting sections, ready to launch in minutes.
