Shopify/de: Difference between revisions

From SimplyBook.me
FuzzyBot (talk | contribs)
Updating to match new version of source page
Created page with ":7. Kopieren Sie den gesamten Code aus dem Popup-Fenster und fügen Sie ihn in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">das HTML-</span> Feld auf der Shopify-Seite ein. Passen Sie gegebenenfalls die Breite des Containers an. <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Speichern Sie</span> die Änderungen. border|center <br><br> :8. Als Ergebnis sehen Sie sofort, wie das Bu..."
 
(2 intermediate revisions by the same user not shown)
Line 7: Line 7:
;Einstellungen
;Einstellungen


<div class="mw-translate-fuzzy">
:1. Navigieren Sie in Ihrem <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Shopify-Konto</span> zu <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">„Online Store“</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">„Themes“</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">„Anpassen</span> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">“.</span>
:1. Navigieren Sie in Ihrem <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Shopify-Konto</span> zu <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">„Online Store“</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">„Themes“</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">„Anpassen</span> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">“.</span>
[[File:Shopify customize theme.png|border|center]]
[[File:Shopify customize theme.png|border|center]]
Line 17: Line 16:
[[File:Shopify select custom content.png|border|center]]
[[File:Shopify select custom content.png|border|center]]
<br><br>
<br><br>
:4. Klicken Sie auf <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">„Inhalt hinzufügen</span> ” und wählen Sie <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">„Benutzerdefiniertes HTML</span>[[File:Select html.png|border|center]]
:4. Klicken Sie auf <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">„Inhalt hinzufügen</span> ” und wählen Sie <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">„Benutzerdefinierter</span>[[File:Select html.png|border|center]]
[[File:Select html.png|border|center]]
[[File:Select html.png|border|center]]
<br><br>
<br><br>
:5. Navigieren Sie zu Ihrem <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">SimplyBook.me-Konto</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Einstellungen</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Einstellungen für Buchungs-Widgets</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">iFrame-Widget</span>[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]
:5. Navigieren Sie zu Ihrem <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">SimplyBook.me-Konto</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Einstellungen</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Einstellungen für Buchungs-Widgets</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">iFrame-Widget</span>
[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]
[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]
<br><br>
<br><br>
Line 26: Line 25:
[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]
[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]
<br><br>
<br><br>
:7. Kopieren Sie den gesamten Code aus dem Popup-Fenster und fügen Sie ihn in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">das HTML-Feld</span> auf der Shopify-Seite ein. Passen Sie gegebenenfalls die Breite des Containers an. <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Speichern Sie</span> die Änderungen
:7. Kopieren Sie den gesamten Code aus dem Popup-Fenster und fügen Sie ihn in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">das HTML-</span> Feld auf der Shopify-Seite ein. Passen Sie gegebenenfalls die Breite des Containers an. <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Speichern Sie</span> die Änderungen.
[[File:Insert html to shopify side.png|border|center]]
[[File:Insert html to shopify side.png|border|center]]
<br><br>
<br><br>
Line 32: Line 31:
[[File:Shopify widget result.png|border|center]]
[[File:Shopify widget result.png|border|center]]
<br><br><br><br>
<br><br><br><br>
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
:4. Click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Add content</span> and select <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Custom HTML</span>
[[File:Select html.png|border|center]]
<br><br>
:5. Navigate to your <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">SimplyBook.me account</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Booking widgets settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">iFrame widget</span>
[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]
<br><br>
:6. Adjust the design to your taste and needs, <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">get widget code.</span>
[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]
<br><br>
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
:7. Copy the whole code from the popup and insert it to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">HTML</span> field on Shopify side. Adjust container width if necessary. <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Save</span> the changes
[[File:Insert html to shopify side.png|border|center]]
<br><br>
:8. As the result you will see how the booking widget looks like right away.
[[File:Shopify widget result.png|border|center]]
<br><br><br><br>
</div>

Latest revision as of 08:10, 1 July 2025

Wenn Sie Shopify verwenden und die Möglichkeit von Buchungen auf Ihrer Website hinzufügen möchten, haben wir die richtige Lösung für Sie!


Mit unserem iFrame-Widget können Sie die Shopify-Website mit SimplyBook.com verbinden und Ihren Kunden die Buchung direkt über die Website von ihrem PC oder ihren Mobilgeräten aus ermöglichen. Diese Lösung macht Ihren Buchungsprozess bequemer und einfacher.

Einstellungen
1. Navigieren Sie in Ihrem Shopify-Konto zu „Online Store“ -> „Themes“ -> „Anpassen “.



2. Wählen Sie links den Abschnitt aus, den Sie bearbeiten möchten, oder fügen Sie einen neuen hinzu.



3. Wählen Sie „Benutzerdefinierten Inhalt hinzufügen “.



4. Klicken Sie auf „Inhalt hinzufügen ” und wählen Sie „Benutzerdefinierter



5. Navigieren Sie zu Ihrem SimplyBook.me-Konto -> Einstellungen -> Einstellungen für Buchungs-Widgets -> iFrame-Widget



6. Passen Sie das Design nach Ihren Wünschen und Anforderungen an und kopieren Sie den Widget-Code.



7. Kopieren Sie den gesamten Code aus dem Popup-Fenster und fügen Sie ihn in das HTML- Feld auf der Shopify-Seite ein. Passen Sie gegebenenfalls die Breite des Containers an. Speichern Sie die Änderungen.



8. Als Ergebnis sehen Sie sofort, wie das Buchungs-Widget aussieht.