Schneller Tipp: E-Commerce in 30 Sekunden mit Gumroad und Jekyll

Dieses Tutorial zeigt, wie die E-Commerce-Funktionen von Gumroad nahtlos in eine Jekyll-Website integriert werden können. Der Prozess ist schnell und vorteilhaft für Inhaltsersteller.

Schlüsselschritte:

1. Gumroad -Code erhalten: Navigieren Sie zur Widgets -Seite von Gumroad und wählen Sie entweder das "Einbett" oder das "Overlay" -Widget aus, wodurch das generierte Code -Snippet kopiert wird. In diesem Tutorial wird das "Einbett" -Widget mit aktivierter Umleitung verwendet.

2. Gumroad -Skript integrieren: Fügen Sie das <script></script> Element aus dem Gumroad -Code in die /_includes/head.html -Datei Ihrer Jekyll -Site hinzu. Wickeln Sie es in eine flüssige bedingte Anweisung ({% if page.content contains "gumroad" %}), um das Laden zu optimieren und sicherzustellen, dass das Skript nur auf Seiten mit dem Gumroad -Widget geladen wird.

3. Erstellen Sie das dynamische Widget: Erstellen Sie eine neue Datei (gumroad-embed.html) in Ihrem /_includes/ Ordner. Fügen Sie das Element <div> (oder <code><a></a> für Overlay) aus dem Gumroad -Code in diese Datei ein. Ersetzen Sie die Werte für die Produkt -Produkt -ID ("Demo") und die Werte (href) durch flüssige Tags ({{ include.id }}), um das Widget dynamisch zu gestalten. Dies ermöglicht die Wiederverwendung mit unterschiedlichen Produkt -IDs auf derselben Seite. Beispiel für einbetten:

   <div class="gumroad-product-embed" data-gumroad-product-id="{{ include.id }}" data-outbound-embed="true">
     <a href="//m.sbmmt.com/link/5f353180421dc744d4e204a6c0f330cd"></a>Loading... </div>

   Nach dem Login kopieren

   Beispiel für Overlay:

   <a class="gumroad-button" href="//m.sbmmt.com/link/8239a17531bc8edea4ad8a2ddfdbbe17" target="_blank">{{ include.button }}</a>

   Nach dem Login kopieren
   4. Einbetten Sie das Widget ein: Verwenden Sie die Flüssigkeitseinfügungsanweisung ({% include gumroad-embed.html id="YOUR_PRODUCT_ID" button="Buy Now" %}), um das Widget auf Ihre Jekyll -Seiten einzubetten. Ersetzen Sie "YOUR_PRODUCT_ID" durch Ihre tatsächliche Gumroad -Produkt -ID und passen Sie den Schaltfläche nach Bedarf an.

   

   Vorteile der Gumroad -Integration:

   • Easy E-Commerce-Setup für Inhaltsersteller.
   • detaillierte Verkaufsanalyse.
   • vereinfachte Zahlungsabwicklung.
   • Rabattfunktionen.

   Dieser optimierte Ansatz ermöglicht mühelose Einbetten von Gumroad-Produkten in Ihrer Jekyll-Website, wodurch die E-Commerce-Funktionalität verbessert wird. Die Verwendung von Flüssigvorlagen gewährleistet Flexibilität und Effizienz.