Wissenszentrum/Docs/Artikel
Docs

App Embed Extension verwenden, um Inhalte der Website anzuzeigen

Aktualisiert 28. März 2025

Verwendung der Mobile App Embed Extension in Evlop

Einleitung

Die Mobile App Embed Extension ermöglicht es dir, Seiten deiner Website oder Shopify-Website nahtlos in deine Evlop‑Mobile‑App einzubetten. Sie zeigt nur den Hauptinhalt deiner Webseite an und blendet automatisch Header, Footer und andere nicht‑wesentliche Elemente aus, um ein reibungsloses Nutzererlebnis in deiner App zu gewährleisten.

Wann du sie einsetzen solltest

  • Zeige benutzerdefinierte oder komplexe Webseiten schnell an, ohne sie neu zu erstellen.
  • Sorge für Konsistenz zwischen deiner Website und deiner Mobile‑App.
  • Binde Richtlinien, FAQs oder Sonderseiten direkt in die App ein.

So funktioniert es

Die Extension erkennt das <main>-HTML‑Element direkt im <body>-Tag deiner Website oder Shopify‑Website, zeigt nur diesen Inhalt in der App an und blendet alle anderen Elemente aus. Für optimale Ergebnisse stelle sicher, dass dein Website‑Theme das <main>-Tag direkt innerhalb von <body> platziert, wobei Header und Footer ebenfalls im <body>-Tag, aber außerhalb von <main> liegen.

Fehlerbehebung

1. Wenn nach dem Aktivieren nichts angezeigt wird

  • Check: Bestätige, dass dein Website-Theme ein <main>-HTML-Tag direkt im <body> um deinen Hauptinhalt hat.
  • Resolve: Fehlt das <main>-Tag, füge es im Theme-Code hinzu oder kontaktiere deinen Theme-Entwickler für Unterstützung.
  • Check: Stelle sicher, dass das Mobile App Embed in den Shopify-Theme-Einstellungen aktiviert ist:
    • Gehe zu Shopify Admin > Online Store > Themes > Customize.
    • Wechsle zu Theme Settings > App Embeds.
    • Aktiviere die Mobile App Embed-Erweiterung.
  • Resolve: Wenn sie nicht aktiviert ist, aktiviere sie und speichere die Theme-Einstellungen.

2. Wenn Header oder Footer weiterhin angezeigt werden

  • Check: Prüfe die Struktur deines Website-Themes. Header und Footer müssen im <body>-Tag, aber außerhalb des <main>-Tags liegen.
  • Resolve: Passe die Theme-Struktur an, indem du Header und Footer aus dem <main> herausbewegst. Wenn du dich nicht mit dem Code auskennst, wende dich an deinen Theme-Entwickler.

Für weitere Unterstützung wende dich an den Evlop Support.