Shopify Shop in iframe einbinden

[jackie_22]

Hallo zusammen,

im Forum bin ich zu dem o.a. Thema auf eine Beitrag gestossen, hier wurde allerdings nur gesagt, dass es technisch wohl möglich wäre, es wurde das "Wie" aber leider nicht angegeben ;-).

Deshalb noch mal die Frage, ob es möglich ist einen Shopify Shop in ein iframe einzubinden.
Es handelt sich hierbei lediglich um einen Demoshop. Ich möchte nur ganz gerne über eine Leiste am oberen Bildschirmrand eine umschaltbare responsive Ansicht ermöglichen.

Ich habe eine Seite auf meiner Hauptdomain (meine-domain.de)  mit einer Auswahlmöglichkeit der responsiven Ansicht erstellt.
Darunter habe ich ein Iframe gesetzt und gebe als Quelle eine eigene Subdomain (subdomain.meine-domain.de) ein.
Dann habe ich den Shopify-Shop mit der Subdomain verknüpft, so dass alles auf einer Domain bleibt.
Diese Vorgehensweise hat noch nicht funktioniert, da die Anzeige im iframe immer noch blockiert wird.

Vielleicht kann mir jemand sagen, wie es funktioniert, wenn es überhaupt möglich ist.

Viele Grüße

Heiko

[Gabe]

Hey Heiko! @jackie_22 

Das Einbetten eines ganzen Shopify-Shops in ein Iframe ist kaum realisierbar, alleine aufgrund der Sicherheitsrichtlinien, die viele Webplattformen, einschließlich Shopify, implementieren, um Clickjacking und andere Arten von Webangriffen zu verhindern. Ich hoffe du hast jetzt nicht allzu viel Zeit damit verbraucht denn eine dieser Sicherheitsrichtlinien ist die X-Frame-Options HTTP-Antwort-Header, die bestimmt, ob eine Webseite in einem <iframe>, <frame>, <embed> oder <object> gerendert werden darf. Standardmäßig erlaubt Shopify nicht, dass sein Inhalt in Iframes auf anderen Domains gerendert wird.

• X-Frame-Options / Content Security Policy (CSP): Shopify setzt Sicherheitsrichtlinien ein, die verhindern, dass Seiten innerhalb von Iframes auf anderen Domains gerendert werden. Diese Einschränkungen sind Teil der CSP (Content Security Policy), die dazu dienen, die Sicherheit der Benutzer zu gewährleisten.
• Same-Origin-Policy: Selbst wenn du den Shopify-Shop auf einer Subdomain deiner Hauptdomain betreibst, könnte die Same-Origin-Policy ein Problem darstellen, da Browser diese Richtlinie durchsetzen, um sicherzustellen, dass Skripte auf einer Seite nur mit Ressourcen derselben Quelle interagieren können.

Diese Richtlinien sind daher dazu da, um sicherzustellen, dass Inhalte sicher und ohne Risiko für Cross-Site-Scripting-Angriffe oder Clickjacking bereitgestellt werden. 

Du könntest überlegen stattdessen deine Produkte von deinem Shopify-Shop auf einer anderen Seite oder Domain anzeigen, ueber die Verwendung des Shopify Buy Buttons. Dieser Ansatz ermöglicht es dir, individuelle Produkte oder Sammlungen auf externen Websites einzubetten, ohne gegen Sicherheitsrichtlinien zu verstoßen. Der Buy Button generiert einen JavaScript-Code, den du auf deiner Seite einbetten kannst, und stellt eine einfache Einkaufsmöglichkeit bereit.

Eine Möglichkeit, Iframes in Shopify-Seiten einzubetten, besteht darin, spezielle Skripte und Iframe-Resizer zu verwenden, um sicherzustellen, dass die eingebetteten Inhalte richtig angezeigt werden und responsiv sind. Ein User im Shopify-Forum hat beispielsweise einen Ansatz beschrieben, bei dem Iframe-Resizer-JavaScript-Bibliotheken genutzt werden, um eine reibungslose Integration und Anpassung der Iframe-Größe an unterschiedliche Bildschirmgrößen zu ermöglichen​ (Shopify Community)​.

Außerdem gibt es Anleitungen, die Schritt für Schritt erklären, wie man Iframes mit spezifischen Anpassungen, wie zum Beispiel einer responsiven Videoeinbettung, in Shopify hinzufügt. Hierbei wird ein CSS-Klassenansatz verwendet, um den Iframe responsive zu gestalten, sodass dieser sich automatisch an verschiedene Bildschirmgrößen anpasst. Es wird gezeigt, wie man eine CSS-Klasse erstellt und diese Klasse dann im CSS-Code des Shopify-Themes verwendet, um die gewünschten Stileigenschaften für den Iframe festzulegen​ (PiPiAds)​.

Direkt einen Shopify-Shop in ein Iframe einzubetten, ist somit aus Sicherheits- und technischen Gründen nicht direkt unterstützt oder empfohlen. Die oben genannten Alternativen bieten jedoch praktikable Wege, um Teile deines Shopify-Shops oder bestimmte Produkte auf externen Seiten zu präsentieren, während gleichzeitig eine gute Benutzererfahrung und Sicherheit gewährleistet werden. Für eine maßgeschneiderte Lösung, die über die Einbettung von Produkten hinausgeht, wäre die Entwicklung einer benutzerdefinierten App oder die Nutzung der Shopify APIs der beste Weg.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[jackie_22]

Hallo Gabe,

vielen Dank für Deine ausführliche Antwort.
Ich wollte eigentlich so etwas wie her realisieren:

https://themes.shopify.com/themes/dawn/styles/default/preview

Ich werde dann mal über einen anderen Lösungsweg nachdenken ;-).

Viele Grüße

Heiko

[Gabe]

Hey @jackie_22 

Danke für den Link zur Dawn Theme Demo. An welches Shopify Shop im iframe deutest du in dieser Demo wenn ich fragen darf? Die gesamte Demo selber? 

Im Themestore wird das ganze ja anders gemacht als in einem Shop. Ein Container-Element (im Beispiel <div class="device-preview__container" id="PreviewFrameContainer">) umschließt das Iframe. Dies ist eine gängige Praxis, um zusätzliche Stile oder Verhaltensweisen auf das Iframe anwenden zu können. Das Iframe selbst (<iframe id="PreviewFrame" class="device-preview__iframe" src="https://theme-dawn-demo.myshopify.com/?_bt=...">) wird mit einer spezifischen URL zu einer Shopify-Demo-Seite als Quelle (src) eingebettet. Die URL beinhaltet einen Query-Parameter (_bt), der möglicherweise spezifische Informationen oder Tokens für die Authentifizierung oder Tracking-Zwecke überträgt.

Die Tatsache, dass dieses Iframe funktioniert, lässt darauf schließen, dass Shopify für seine eigenen Demoseiten bestimmte Sicherheitsrichtlinien lockert oder anpasst. Normalerweise würde der X-Frame-Options-Header oder die CSP (Content Security Policy) das Einbetten auf externen Domains verhindern. Für Demos oder bestimmte zugelassene Domains könnte Shopify jedoch Ausnahmen zulassen.

Die Klassen und IDs, die im HTML verwendet werden (z.B. device-preview__iframe, DesktopPreview, MobilePreview), deuten darauf hin, dass es Mechanismen gibt, um die Ansicht zwischen Desktop- und Mobilversion umzuschalten. Dies wird wahrscheinlich durch JavaScript gesteuert, das nicht im Codeausschnitt enthalten ist. Solche Skripte könnten die src des Iframes ändern oder zusätzliche Parameter anhängen, um die gewünschte Vorschau zu rendern.

Die Lösung im Beispiel nutzt somit eine spezifische Konfiguration und eventuell interne Erlaubnisse von Shopify, um die Demos innerhalb von Iframes anzeigen zu können. Für einen externen Shopify-Shop, der nicht direkt von Shopify für Demo-Zwecke konfiguriert wurde, sind diese spezifischen Bedingungen oder Einstellungen, wie gesagt, nicht ohne Weiteres verfügbar sein. Es ist zu empfehlen, die Dokumentation von Shopify zu prüfen oder den Support zu kontaktieren, um ähnliche Funktionen für deinen Shop zu realisieren.

[jackie_22]

Hallo Gabe,

der Shop der in einem iFrame angezeigt werden soll, ist ein kompletter Demoshop und darüber werden keinerlei Bestellungen ausgeführt ausser vielleicht mal eine Testbestellung, mehr aber auch nicht. Ich hätte für diesen Demoshop allerdings sehr gerne eine responsive Umschaltmöglichkeit.

Viele Grüße

Heiko

[Gabe]

Hey Heiko! @jackie_22 

Braucht man dafür unbedingt ein iFrame um das zu erreichen? Gaebe es vielleicht einfachere Ansätze um das zu erreichen was du erreichen möchtest? Die Probleme mit deiner Idee liegen auf der Hand und die haben wir bereits besprochen, wie beispielsweise die groben Sicherheitsrisiken, wie das Clickjacking, und die potentiellen Hack-Attacks, und auch die verschlechterte Benutzererfahrung (z.B. fehlende rendering Flexibilität und Navigationsprobleme, Scrollen innerhalb des iFrames, Kompatibel mit bestimmten Browser wie Safari, verlängerte Page-Ladezeiten, das iFrame auf Mobile und Responsive UI usw. usw.)

Beispielsweise alleine für eine responsive Umschaltmöglichkeit und eine bessere Integration könntest du alternative Ansätze erwägen, wie im Shop die Produkte nur anzuzeigen OHNE Buy oder ATC Buttons. Das hätte auch den Vorteil einer tollen Benutzererfahrung sowie die volle Responsiveness auf alle Bildschirmgrößen.

Dann. könntest du auch erwägen einen Custom Storefront auf die Beine zu stellen. Hydrogen (hydrogen.shopify.dev) bietet eine Reihe von Komponenten, Dienstprogrammen und Werkzeugen von Shopify, mit denen du ein reines Schaufenster auf Remix aufbauen kannst. Oxygen ist die Hosting-Ebene für Hydrogen-Storefronts und zusammen bilden sie den von Shopify empfohlenen Stack für den Aufbau von Headless Commerce.

Shopify bietet das leistungsstarke APIs (insbesondere die Storefront API), mit denen du einen komplett benutzerdefinierten Shop erstellen kannst, der außerhalb der Shopify-Umgebung läuft. Diese Lösung erfordert mehr Entwicklungsaufwand, bietet dir aber maximale Flexibilität in Bezug auf Design und Funktionalität. Du könntest eine responsive Website von Grund auf neu aufbauen, die als Demoshop dient und über die API Produkte, Sammlungen und andere Daten von deinem Shopify-Shop abruft.

Eine weitere Möglichkeit könnte sein, deinen Shopify-Shop auf einer Subdomain zu betreiben, die speziell für Demonstrationszwecke eingerichtet wird. Du könntest den Zugang zum Checkout-Prozess beschränken oder anpassen, um echte Bestellungen zu verhindern. Diese Methode würde die Komplexität und potenzielle Probleme von iFrames vermeiden und gleichzeitig eine vollständige Demonstration deines Shops in einer isolierten Umgebung ermöglichen.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

[jackie_22]

Hallo Gabe,

viele Dank für Deine alternativen Ansätze. Da ist bestimmt was dabei, um das auf anderem Wege zu realisieren, als wie ich es ursprünglich vor hatte.

Viele Grüße

Heiko

[Gabe]

Gerne geschehen! 😉