Tutorials

So fügst du einen MARQUEE-Effekt (Lauftext) in Shopify hinzu [2025 Easy Guide]

Melden

Hier ist ein umfassendes Tutorial, wie du im Jahr 2025 einen modernen Marquee-Effekt (Lauftext) in deinen Shopify-Shop integrierst – ganz ohne teure Apps.

Ein Marquee-Effekt ist ideal, um Ankündigungen, Sonderangebote oder Brand-Vorteile (wie „Kostenloser Versand“) dynamisch zu präsentieren. Wir nutzen dafür eine Custom Section, damit du den Text später bequem im Theme-Editor ändern kannst.

Schritt 1: Erstelle eine neue Section

  1. Logge dich in dein Shopify-Admin-Backend ein.
  2. Gehe zu Onlineshop > Themes.
  3. Klicke bei deinem aktuellen Theme (z. B. Dawn) auf die drei Punkte (...) und wähle Code bearbeiten.
  4. Scrolle im linken Menü zum Ordner Sections und klicke auf Neue Section hinzufügen.
  5. Nenne die Datei marquee-text und klicke auf Abschließen.

Schritt 2: Den Code einfügen

Lösche den vorhandenen Code in der neuen Datei marquee-text.liquid komplett und kopiere stattdessen diesen optimierten Code hinein:

{% style %}
  .marquee-wrapper {
    background-color: {{ section.settings.bg_color }};
    color: {{ section.settings.text_color }};
    padding: {{ section.settings.padding }}px 0;
    overflow: hidden;
    display: flex;
    white-space: nowrap;
    border-top: 1px solid {{ section.settings.border_color }};
    border-bottom: 1px solid {{ section.settings.border_color }};
  }

  .marquee-content {
    display: flex;
    animation: marquee {{ section.settings.speed }}s linear infinite;
  }

  .marquee-item {
    font-size: {{ section.settings.font_size }}px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0 40px;
    display: flex;
    align-items: center;
  }

  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  .marquee-wrapper:hover .marquee-content {
    animation-play-state: {% if section.settings.pause_on_hover %}paused{% else %}running{% endif %};
  }
{% endstyle %}

<div class="marquee-wrapper">
  <div class="marquee-content">
    {%- for i in (1..10) -%}
      <span class="marquee-item">{{ section.settings.text }}</span>
    {%- endfor -%}
  </div>
  <div class="marquee-content">
    {%- for i in (1..10) -%}
      <span class="marquee-item">{{ section.settings.text }}</span>
    {%- endfor -%}
  </div>
</div>

{% schema %}
{
  "name": "Marquee Lauftext",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "label": "Lauftext",
      "default": "✨ Kostenloser Versand ab 50€ • 30 Tage Rückgaberecht • Schnelle Lieferung ✨"
    },
    {
      "type": "range",
      "id": "font_size",
      "min": 12,
      "max": 60,
      "step": 2,
      "unit": "px",
      "label": "Schriftgröße",
      "default": 20
    },
    {
      "type": "range",
      "id": "speed",
      "min": 5,
      "max": 50,
      "step": 1,
      "unit": "s",
      "label": "Geschwindigkeit (höher = langsamer)",
      "default": 15
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Hintergrundfarbe",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Textfarbe",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Rahmenfarbe",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "padding",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Abstand oben/unten",
      "default": 10
    },
    {
      "type": "checkbox",
      "id": "pause_on_hover",
      "label": "Bei Mauszeiger-Kontakt stoppen",
      "default": true
    }
  ],
  "presets": [
    {
      "name": "Marquee Lauftext"
    }
  ]
}
{% endschema %}
  1. Klicke oben rechts auf Speichern.

Schritt 3: Den Marquee im Theme-Editor hinzufügen

Jetzt kannst du den Effekt ganz einfach nutzen:

  1. Gehe zurück zu Onlineshop > Themes und klicke auf Anpassen (Customize).
  2. Klicke auf der linken Seite auf Abschnitt hinzufügen (Add section).
  3. Suche in der Liste nach Marquee Lauftext.
  4. Jetzt kannst du rechts in den Einstellungen:
    • Den Text anpassen (nutze Emojis für mehr Aufmerksamkeit!).
    • Die Farben passend zu deinem Branding wählen.
    • Die Geschwindigkeit und Schriftgröße einstellen.
  5. Verschiebe die Section per Drag-and-Drop an die gewünschte Stelle (z. B. unter den Header oder vor den Footer).
  6. Klicke auf Speichern.

Warum diese Methode die beste für 2025 ist:

  • Performance: Kein JavaScript nötig. Der Effekt läuft über CSS-Animationen, was die Ladezeit deines Shops (Core Web Vitals) nicht beeinträchtigt.
  • Flexibilität: Dank des schema-Blocks kannst du den Text jederzeit ändern, ohne erneut den Code öffnen zu müssen.
  • Kostenlos: Du sparst dir monatliche Gebühren für "Announcement Bar"-Apps.
  • Responsive: Der Text passt sich automatisch an alle Bildschirmgrößen an.

Pro-Tipp: Nutze den Marquee-Effekt dezent. Wenn er zu schnell ist oder zu grelle Farben hat, kann er die Besucher von deinen eigentlichen Produkten ablenken. Eine Geschwindigkeit von 15-20 Sekunden ist meistens ideal für die Lesbarkeit.

0