Shopify Integration

Mit gettickr.app Timer kannst du in deinem Shopify-Shop gezielt Kaufanreize schaffen, zeitlich begrenzte Angebote hervorheben und Vorfreude auf Produkt-Launches erzeugen. Dieser Leitfaden zeigt verschiedene Integrationsmöglichkeiten für unterschiedliche Shopify-Anwendungsfälle.

Schnellstart-Überblick

Voraussetzungen

Vor dem Start benötigst du:

Methode 1: Produktseiten-Timer (Theme Customizer)

Ideal für Produkt-Launches, zeitlich begrenzte Angebote und Dringlichkeit auf einzelnen Produkten.

Schritt-für-Schritt-Anleitung

Schritt 1: Timer erstellen

1. Gehe zum Editor
2. Gestalte einen Timer passend zum Produktseiten-Design
3. Countdown für zeitbasierte Aktionen (z.B. „24h Flash Sale“)
4. CountTo für feste Enddaten/-zeiten
5. Kopiere die Timer-URL aus dem Renderer-Bereich

Schritt 2: Theme Customizer öffnen

1. Shopify Admin → Onlineshop → Themes
2. Klicke auf „Anpassen“ beim aktiven Theme
3. Navigiere in der Vorschau zu einer Produktseite

Schritt 3: Custom Liquid Section hinzufügen

1. Klicke auf „Abschnitt hinzufügen“ oder wähle einen bestehenden Abschnitt
2. Suche nach „Custom Liquid“ oder „Custom HTML“
3. Falls nicht verfügbar, nutze Methode 3 (Code Editor)

Schritt 4: Timer-Code einfügen

Füge diesen Code in die Custom Liquid Section ein:

<div
  class="product-countdown-timer"
  style="text-align: center; margin: 30px 0;"
>
  <h3 style="margin-bottom: 15px;">Nur für kurze Zeit!</h3>
  <iframe
    src="https://gettickr.app/r/#DEIN-TIMER-ID"
    width="100%"
    height="300"
    style="border: none; max-width: 800px; margin: 0 auto; display: block;"
    title="Produkt Sale Timer"
  ></iframe>
  <p style="margin-top: 15px; color: #e74c3c; font-weight: bold;">
    Beeil dich! Das Angebot endet, wenn der Timer abläuft.
  </p>
</div>

Schritt 5: Position & Styling

• Abschnitt per Drag & Drop positionieren (z.B. über „In den Warenkorb“)
• Margin und Styles nach Bedarf anpassen

Schritt 6: Speichern & Veröffentlichen

1. Oben rechts auf „Speichern“ klicken
2. Vorschau auf Desktop und Mobil prüfen
3. „Veröffentlichen“, wenn alles passt

Empfohlene Timer-Größen für Produkte

Methode 2: Startseiten-Integration

Erzeuge Dringlichkeit für Shop-weite Aktionen oder Events durch Timer auf der Startseite.

Theme Sections nutzen

Schritt 1: Startseiten-Editor öffnen

1. Shopify Admin → Onlineshop → Themes
2. Klicke auf „Anpassen“
3. Stelle sicher, dass die Startseite angezeigt wird

Schritt 2: Custom Section hinzufügen

1. Klicke auf „Abschnitt hinzufügen“
2. Wähle „Custom Liquid“ oder „Custom HTML“
3. Positioniere den Abschnitt (Hero, Mitte, Footer)

Schritt 3: Timer-Code einfügen

<section
  class="homepage-countdown"
  style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 60px 20px; text-align: center; color: white;"
>
  <div style="max-width: 1200px; margin: 0 auto;">
    <h2 style="font-size: 48px; margin: 0 0 10px 0; font-weight: bold;">
      🎉 Flash Sale läuft!
    </h2>
    <p style="font-size: 24px; margin: 0 0 30px 0;">
      Spare bis zu 50% auf ausgewählte Artikel
    </p>
    <iframe
      src="https://gettickr.app/r/#DEIN-TIMER-ID"
      width="100%"
      height="400"
      style="border: none; max-width: 1000px; margin: 0 auto; display: block; background: transparent;"
      title="Flash Sale Timer"
    ></iframe>
    <a
      href="/collections/sale"
      style="display: inline-block; margin-top: 30px; padding: 15px 40px; background: white; color: #667eea; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 18px;"
    >
      Jetzt Angebote shoppen →
    </a>
  </div>
</section>

Methode 3: Kategorieseiten (Collection Pages)

Timer für kategorie-spezifische Aktionen (z.B. „Sommer-Sale“).

Theme Code Editor Methode

Schritt 1: Code Editor öffnen

1. Shopify Admin → Onlineshop → Themes
2. Aktionen → Code bearbeiten
3. Im linken Menü „Sections“ suchen

Schritt 2: Collection-Template bearbeiten

1. Datei collection-template.liquid oder main-collection.liquid öffnen
2. Stelle fest, wo der Timer erscheinen soll (z.B. nach <h1>{{ collection.title }}</h1>)

Schritt 3: Timer-Code einfügen

{% comment %} Countdown Timer für Collection Sale {% endcomment %}
<div
  class="collection-countdown-wrapper"
  style="margin: 40px auto; max-width: 1200px; padding: 0 20px;"
>
  <div
    style="text-align: center; background: #f8f9fa; padding: 30px; border-radius: 8px;"
  >
    <h2 style="margin-top: 0;">⏰ Sale endet bald!</h2>
    <iframe
      src="https://gettickr.app/r/#DEIN-TIMER-ID"
      width="100%"
      height="300"
      style="border: none; max-width: 900px; margin: 20px auto; display: block;"
      title="Collection Sale Timer"
    ></iframe>
    <p style="margin-bottom: 0; font-size: 18px; color: #666;">
      Nicht verpassen – exklusive Rabatte!
    </p>
  </div>
</div>

Optional: Nur für bestimmte Collections anzeigen

{% if collection.handle == 'sommer-sale' %}
<!-- Timer-Code hier -->
{% endif %}

Schritt 4: Speichern & testen

1. Oben rechts auf „Speichern“ klicken
2. Collection-Seite im Shop prüfen
3. Mobil-Ansicht testen

Methode 4: Eigene Seiten (Landingpages)

Für spezielle Aktionsseiten, Events oder Promotion-Landingpages.

Seiten-Editor Methode

Schritt 1: Seite erstellen/bearbeiten

1. Shopify Admin → Onlineshop → Seiten
2. „Seite hinzufügen“ oder bestehende Seite bearbeiten
3. Titel und Inhalt eingeben

Schritt 2: In den HTML-Modus wechseln

1. Im Editor auf „<>“ (HTML anzeigen) klicken

Schritt 3: Timer-Code einfügen

<div style="text-align: center; margin: 40px 0;">
  <h2>Early Bird Registrierung endet in:</h2>
  <iframe
    src="https://gettickr.app/r/#DEIN-TIMER-ID"
    width="100%"
    height="400"
    style="border: none; max-width: 1000px; margin: 20px auto; display: block;"
    title="Registrierungs-Timer"
  ></iframe>
  <p style="font-size: 18px;">Jetzt anmelden und 30% sparen!</p>
</div>

Schritt 4: Speichern & veröffentlichen

1. „Speichern“ klicken
2. Seite testen und veröffentlichen

Methode 5: Site-weites Banner (Header/Notification Bar)

Timer im gesamten Shop als Banner anzeigen.

Theme Header Integration

Schritt 1: Theme-Code bearbeiten

1. Themes → Aktionen → Code bearbeiten
2. Datei sections/header.liquid oder sections/announcement-bar.liquid suchen

Schritt 2: Banner-Timer einfügen

<div
  class="site-wide-countdown-banner"
  style="background: #ff6b6b; padding: 15px 20px; text-align: center;"
>
  <div
    style="max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px;"
  >
    <span style="color: white; font-weight: bold; font-size: 16px;">
      🔥 Flash Sale endet in:
    </span>
    <iframe
      src="https://gettickr.app/r/#DEIN-TIMER-ID"
      width="400"
      height="60"
      style="border: none; vertical-align: middle;"
      title="Sale Banner Timer"
    ></iframe>
    <a
      href="/collections/sale"
      style="color: white; text-decoration: underline; font-weight: bold;"
    >
      Jetzt shoppen →
    </a>
  </div>
</div>

Optional: Banner ausblendbar machen

<div
  id="countdown-banner"
  class="site-wide-countdown-banner"
  style="background: #ff6b6b; padding: 15px 20px; text-align: center; position: relative;"
>
  <!-- Timer-Inhalt -->
  <button
    onclick="document.getElementById('countdown-banner').style.display='none'"
    style="position: absolute; right: 10px; top: 10px; background: none; border: none; color: white; font-size: 20px; cursor: pointer;"
  >
    ×
  </button>
</div>

Fehlerbehebung Shopify Integration

Häufige Probleme

Checkliste vor Veröffentlichung

• Auf Produkt/Collection/Seite testen
• Mobil-Ansicht prüfen (Shopify Mobile Preview)
• Timer aktualisiert sich korrekt
• Layout bleibt intakt
• In mehreren Browsern testen
• Timer lädt schnell (< 3 Sekunden)
• Timer passt zum Shop-Design

Performance & SEO

Performance-Tipps

SEO-Hinweise

Best Practices:

• Aussagekräftiges title-Attribut für iFrames
• Textliche Einbettung (Überschriften, Beschreibungen) um den Timer
• Keine wichtigen Inhalte hinter Timern verstecken
• Seite sollte auch ohne Timer wertvoll sein

Premium-Features für Shopify

Remote-Control-Workflow:

1. Timer mit Premium-URL auf Produktseite einbinden
2. Bei Aktionsstart: Im Editor Timer remote starten
3. Timer aktualisiert sich automatisch im Shop
4. Nach Aktionsende: Timer remote pausieren oder zurücksetzen
5. Timer für nächste Aktion wiederverwenden

Best Practices für E-Commerce-Timer

Conversion-Optimierung

✅ Empfohlen:

• Timer prominent „above the fold“ platzieren
• Dringliche Farben (rot, orange) für zeitkritische Aktionen
• Timer-Design an Produkt/Brand anpassen
• Verschiedene Positionen testen
• Mit klaren Call-to-Actions kombinieren
• Echte Deadlines verwenden

❌ Vermeiden:

• Zu viele Timer (sonst „Alarm“-Effekt)
• Falsche oder irreführende Deadlines
• Timer zu groß, sodass Inhalt verdrängt wird
• Abgelaufene Timer nicht entfernen
• Timer ohne klaren Nutzen

A/B-Test-Ideen

Nächste Schritte

• iFrame Integration – Universelle Methode für alle Plattformen
• Timer-Design anpassen – Optik an deinen Shop anpassen
• WordPress Integration – Für WooCommerce ähnlich wie Shopify
• Fernsteuerung – Timer direkt aus dem Editor steuern