How to set up typewriter effect?
What is the Typewriter Effect?
The Typewriter Effect creates an engaging animated text display that cycles through multiple phrases with a realistic typing animation. Perfect for showcasing product benefits, brand messages, or key selling points with a dynamic, attention-grabbing effect that includes a blinking cursor animation.
Step 1: Create Metafield Definition
Creation Instructions
- Go to Shopify Admin → Settings → Metafields → Products
- Click "Add definition"
- Create each metafield with the specifications below
- Set Type to "Single line text"
- No validation required
Required Metafield (1 total)
Step 2: Set Metafield Values
How to Set Values
- Navigate to Products → Select Product → Metafields section
- Find "Jhango Typewriter Phrases" field
- Enter comma-separated phrases: "Phrase 1,Phrase 2,Phrase 3"
- Each phrase will be displayed in sequence with typing animation
- Save product
Key Features
Usage Notes
- Phrases are split by comma and cycled through automatically
- Configurable typing speed and pause duration through block settings
- Responsive font sizes for mobile, tablet, and desktop
- Realistic blinking cursor animation
- Container styling with optional shadows and borders
- Smooth transitions between phrases
- Works with any Shopify theme
- Falls back to default phrases if metafield is empty
Visual Guide: Setting Up Metafields
Step-by-Step Screenshots
Here's exactly how the metafields look when you're setting them up in Shopify:
Product Metafields View: This shows how the typewriter phrases metafield appears in your product's metafields section. You can see the comma-separated phrases entered in the text field.
Creating Text Metafield: This screenshot shows the metafield definition setup with the "Single line text" type and the namespace "custom.jhango_typewriter_phrases".
Frequently Asked Questions
The typewriter effect is an animated text display that simulates someone typing out phrases in real-time. It cycles through multiple product-specific messages with a realistic typing animation and blinking cursor, creating an engaging way to showcase key selling points or brand messages on your product pages.
No coding experience is required for basic implementation. The tutorial guides you through creating the metafield using Shopify's admin interface and setting phrase values for each product. However, adding the snippet to your theme templates may require basic HTML knowledge or developer assistance.
Yes, absolutely! Each product can have unique typewriter phrases. You can set different comma-separated phrases through the product's metafields section. This allows you to highlight product-specific benefits, features, or brand messages that are most relevant to each item.
While there's no strict limit, we recommend 3-6 phrases for optimal user experience. Too many phrases can make the animation cycle feel too long, while too few might not provide enough engagement. The system will continuously cycle through all provided phrases.
If no metafield values are set, the typewriter effect will fall back to default phrases configured in the block settings. This ensures the animation still works even if you haven't customized phrases for every product, though custom phrases provide a better, more targeted experience.
