How to animated typing effect Shopify section stylish text [2025 Easy Guide]
Melden
Hier ist ein umfassendes, leicht verständliches Tutorial, um einen modernen, animierten Schreibeffekt (Typing Effect) als eigene Shopify-Section zu erstellen.
Ein animierter Schreibeffekt ist eine hervorragende Möglichkeit, die Aufmerksamkeit deiner Besucher sofort auf deine Kernbotschaften zu lenken. In diesem Guide erstellen wir eine komplett anpassbare Shopify-Section, die du ohne App-Gebühren direkt in deinem Theme nutzen kannst.
Was wir verwenden:
- Liquid: Für die Shopify-Integration.
- Typed.js: Die leichteste und stabilste Library für Schreibeffekte (via CDN).
- CSS3: Für das "stylish" Design.
Schritt 1: Erstelle eine neue Section
- Logge dich in dein Shopify Admin ein.
- Gehe zu Onlineshop > Themes.
- Klicke bei deinem aktuellen Theme auf die drei Punkte (...) und wähle Code bearbeiten.
- Scrolle zum Ordner Sections und klicke auf Neue Section hinzufügen.
- Nenne die Datei:
typing-effect-sectionund klicke auf Erstellen.
Schritt 2: Den Code einfügen
Lösche den gesamten Standard-Code in der neuen Datei und füge den folgenden Code ein:
{%- style -%}
.typing-section-{{ section.id }} {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
text-align: {{ section.settings.text_alignment }};
background-color: {{ section.settings.bg_color }};
}
.typing-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.typing-main-text {
font-size: {{ section.settings.font_size }}px;
font-weight: bold;
color: {{ section.settings.text_color }};
line-height: 1.2;
}
.typed-cursor {
color: {{ section.settings.cursor_color }};
opacity: 1;
animation: blink 0.7s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
.highlight-text {
color: {{ section.settings.accent_color }};
}
@media (max-width: 768px) {
.typing-main-text {
font-size: {{ section.settings.font_size | times: 0.7 }}px;
}
}
{%- endstyle -%}
<div class="typing-section-{{ section.id }}">
<div class="typing-wrapper">
<h2 class="typing-main-text">
{{ section.settings.prefix_text }}
<span id="typed-{{ section.id }}" class="highlight-text"></span>
</h2>
</div>
</div>
<!-- Typed.js Library laden -->
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var options = {
strings: [
{% assign phrases = section.settings.typing_phrases | split: ',' %}
{% for phrase in phrases %}
"{{ phrase | strip }}"{% unless forloop.last %},{% endunless %}
{% endfor %}
],
typeSpeed: {{ section.settings.type_speed }},
backSpeed: {{ section.settings.back_speed }},
backDelay: 1500,
startDelay: 500,
loop: {{ section.settings.loop_animation }},
showCursor: true,
cursorChar: '|'
};
var typed = new Typed('#typed-{{ section.id }}', options);
});
</script>
{% schema %}
{
"name": "Animated Typing Text",
"settings": [
{
"type": "text",
"id": "prefix_text",
"label": "Text vor der Animation",
"default": "Wir verkaufen"
},
{
"type": "textarea",
"id": "typing_phrases",
"label": "Animierte Wörter (mit Komma trennen)",
"default": "Qualität, Leidenschaft, Design, Innovation",
"info": "Beispiel: Wort 1, Wort 2, Wort 3"
},
{
"type": "range",
"id": "font_size",
"min": 20,
"max": 100,
"step": 2,
"unit": "px",
"label": "Schriftgröße",
"default": 40
},
{
"type": "select",
"id": "text_alignment",
"label": "Ausrichtung",
"options": [
{ "value": "left", "label": "Links" },
{ "value": "center", "label": "Zentriert" },
{ "value": "right", "label": "Rechts" }
],
"default": "center"
},
{
"type": "color",
"id": "bg_color",
"label": "Hintergrundfarbe",
"default": "#ffffff"
},
{
"type": "color",
"id": "text_color",
"label": "Haupt-Textfarbe",
"default": "#222222"
},
{
"type": "color",
"id": "accent_color",
"label": "Farbe des animierten Textes",
"default": "#007ace"
},
{
"type": "color",
"id": "cursor_color",
"label": "Cursor Farbe",
"default": "#007ace"
},
{
"type": "range",
"id": "type_speed",
"min": 20,
"max": 150,
"step": 5,
"label": "Schreib-Geschwindigkeit",
"default": 60
},
{
"type": "range",
"id": "back_speed",
"min": 10,
"max": 100,
"step": 5,
"label": "Lösch-Geschwindigkeit",
"default": 40
},
{
"type": "checkbox",
"id": "loop_animation",
"label": "Animation wiederholen",
"default": true
},
{
"type": "header",
"content": "Abstände"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Abstand oben",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Abstand unten",
"default": 36
}
],
"presets": [
{
"name": "Animated Typing Text"
}
]
}
{% endschema %}Schritt 3: Die Section im Theme-Editor nutzen
- Klicke auf Speichern in der oberen rechten Ecke des Code-Editors.
- Gehe zurück zum Shopify Admin-Bereich und klicke auf Anpassen (Customize) bei deinem Theme.
- Klicke in der Seitenleiste auf Abschnitt hinzufügen (Add section).
- Suche nach "Animated Typing Text".
- Jetzt kannst du die Section nach deinen Wünschen gestalten:
- Ändere den Prefix Text (z.B. "Wir lieben...").
- Gib unter Animierte Wörter deine Begriffe ein, getrennt durch Kommata.
- Passe Farben, Schriftgröße und Geschwindigkeit live an.
Warum diese Lösung im Jahr 2025 die beste ist:
- Performance: Wir nutzen
Typed.jsüber ein schnelles CDN. Es ist winzig und verlangsamt deinen Shop nicht. - Mobile First: Die Schriftgröße passt sich auf mobilen Geräten automatisch an (70% der Originalgröße).
- Keine App-Kosten: Viele Apps verlangen monatliche Gebühren für solche Effekte. Hier hast du die volle Kontrolle kostenlos.
- Customizer-Integration: Du musst nie wieder in den Code gehen, wenn du die Wörter ändern möchtest – alles ist über den Shopify Editor steuerbar.
Profi-Tipp für den "Stylish" Look:
Wähle als Accent Color eine Farbe, die in deinem Branding als Call-to-Action genutzt wird. Ein dunkler Hintergrund (#121212) mit einem neonfarbenen animierten Text sieht 2025 besonders modern aus!