Hinzufügen von benutzerdefiniertem Liquid zu Shopify Email-Kampagnen

Du kannst benutzerdefiniertes Codieren zu deinen Shopify Email-Nachrichten hinzufügen, indem du einen benutzerdefinierten Liquid-Abschnitt hinzufügst oder eine komplett benutzerdefinierte E-Mail erstellst. Mit diesen Optionen kannst du benutzerdefiniertes Liquid oder HTML eingeben.

Liquid ist die einfache und leicht zu verwendende Programmiersprache von Shopify, mit der auch Themes aus dem Shopify Theme Store erstellt werden.

Du kannst benutzerdefiniertes Liquid verwenden, um benutzerdefinierte Elemente wie nebeneinander liegende Bilder, benutzerdefinierte Schaltflächen, Bilder mit benutzerdefinierter Größe und benutzerdefinierte Abschnittsgrößen anzuzeigen.

Erwägungen

Beachte die folgenden Überlegungen, bevor du beginnst, benutzerdefiniertes Liquid zu deinen Shopify Email-Nachrichten hinzuzufügen:

  • Die Variablen, die du in deinen Code einfügst, müssen von benutzerdefiniertem Liquid unterstützt werden.
  • Du kannst nur ein Desktop-Gerät verwenden, um einen Abschnitt für benutzerdefiniertes Liquid zu erstellen.
  • Die Variable unsubscribe_link ist in benutzerdefinierten Liquid-E-Mails erforderlich. Wenn du die Nachverfolgung von geöffneten E-Mails aktiviert hast, ist auch die Variable open_tracking erforderlich. Erfahre mehr über das Hinzufügen von erforderlichen Variablen zu deiner E-Mail.
  • Der Code, den du eingibst, unterliegt den folgenden Einschränkungen:
    • Maximal 50 Kilobyte (KB) für benutzerdefinierte Liquid-Abschnitte.
    • Maximal 500 KB für benutzerdefinierte Liquid-E-Mails.

In benutzerdefiniertem Liquid unterstützte Liquid-Variablen

Mit den folgenden Variablen kannst du deine Shopify-E-Mail-Nachrichten mit Liquid anpassen.

Beschreibung der von Shopify Email unterstützten Liquid-Variablen
Variable Beschreibung
unsubscribe_link
Diese Variable gibt Zugriff auf den Abmeldelink. Diese Variable ist erforderlich, wenn du eine benutzerdefinierte E-Mail erstellst.
open_tracking
Diese Variable gibt Zugriff auf den vorformatierten offenen Tracking-Block . Diese Variable ist erforderlich, wenn du eine benutzerdefinierte E-Mail erstellst und die Nachverfolgung von geöffneten E-Mails aktiviert hast.
abandoned_checkout

Diese Variable gewährt Zugriff auf die folgenden Eigenschaften eines abgebrochenen Checkouts:

  • url zeigt die URL des abgebrochenen Checkouts an.
  • line_items zeigt die ersten fünf Positionen des abgebrochenen Checkouts an. Darüber hinaus enthält jedes line_items-Objekt die folgenden Eigenschaften für jedes Produkt:
    • image_url
    • product_title
    • variant_title
    • Menge
  • remaining_products_count zeigt die Anzahl der verbleibenden Positionen an, wenn sich mehr als fünf Positionen im abgebrochenen Checkout befinden.
  • Die Variable abandoned_checkout wird nur ausgefüllt, wenn eine E-Mail Teil der Marketingautomatisierung "Abgebrochener Checkout" ist. Andernfalls ist die Variable null.

abandoned_visit

Diese Variable gewährt Zugriff auf die folgenden Eigenschaften eines abgebrochenen Warenkorbs oder einer abgebrochenen Suche:

  • url zeigt die URL des abgebrochenen Checkouts an.
  • products_added_to_cart zeigt die ersten fünf Produktpositionen an, die beim abgebrochenen Besuch in den Warenkorb gelegt wurden. Darüber hinaus enthält jedes products_added_to_cart-Objekt die folgenden Eigenschaften für jedes Produkt:
    • title
    • image_url
    • variant_title
    • Menge
  • products_viewed zeigt die ersten fünf Produkte an, die während eines abgebrochenen Besuchs angezeigt wurden. Darüber hinaus enthält jedes products_viewed-Objekt die folgenden Eigenschaften für jedes Produkt:
    • title
    • Beschreibung
    • image_url
    • URL
  • remaining_cart_products_count zeigt die Anzahl der verbleibenden Positionen an, wenn sich mehr als fünf Positionen im abgebrochenen Checkout befinden.
  • Die Variable abandoned_visit wird nur ausgefüllt, wenn eine E-Mail Teil einer Marketingautomatisierung "Abgebrochener Warenkorb" oder "Abgebrochene Produktsuche" ist. Andernfalls ist die Variable null.

data.customer.*

Diese Variable gewährt Zugriff auf die folgenden Kundendateneigenschaften:

  • first_name
  • last_name
  • email
  • city
  • state
  • country
  • Diese Eigenschaften können nicht in Liquid-Filtern oder in Liquid-Bedingungen verwendet werden.

    email.*

    Diese Variable gewährt Zugriff auf die folgenden E-Mail-Eigenschaften:

  • subject zeigt die Betreffzeile der E-Mail an.
  • preview_text zeigt den Vorschautext der E-Mail an.
  • shop.*
    Diese Variable gewährt Zugriff auf die folgenden Shop-Eigenschaften:
  • name zeigt den Shop-Namen an.
  • domain zeigt die primäre Domain des Shops an.
  • url zeigt die Shop-URL an.
  • shopify_domain zeigt die Shopify-Domain des Shops an.
    • address zeigt die Shop-Adresse an, die die folgenden Adresseigenschaften anzeigt:
      • address1
      • address2
      • city
      • country
      • phone
      • province
      • zip
      • branding zeigt das Shop-Branding an, darunter die folgenden Eigenschaften:
        • accent_section_color
        • background_primary_color
        • background_border_color
        • body_text_color
        • button_background_and_link_color
        • button_label_color
        • footer_link_color
        • footer_text_color
        • footer_background_color
        • social_link_facebook
        • social_link_twitter
        • social_link_instagram
        • social_link_pinterest
        • shop_name
        • logo, was direkt als img-Tag gerendert wird.

    Erforderliche Variablen verwenden

    Wenn du eine benutzerdefinierte Liquid-E-Mail erstellst, ist die Variable unsubscribe_link erforderlich. Wenn du die Nachverfolgung von geöffneten E-Mails aktiviert hast, ist auch die Variable open_tracking erforderlich.

    Obwohl diese Variablen an einer beliebigen Stelle im Code deiner E-Mail eingefügt werden können, stellt der Fußzeilenabschnitt einer E-Mail eine häufig verwendete Stelle für das Hinzufügen der Variablen dar. Es folgt ein Beispiel:

    <div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>

    Beispiel für benutzerdefinierten Liquid-Code

    Du kannst benutzerdefiniertes Liquid und HTML in den Code-Editor eingeben. Der folgende Code ist ein Beispiel, wie du Liquid-Code hinzufügen kannst, um deinen Shop-Namen, eine benutzerdefinierte Schaltfläche und ein Bild mit benutzerdefinierter Größe in einer E-Mail-Nachricht anzuzeigen.

    <style>
      body {
        text-align: center;
      }
    
      p#welcome {
        margin: 0;
        padding: 3rem;
        color: white;
        font-weight: 700;
        font-size: 26px;
        font-family: 'Futura';
      }
    
      div#image_wrapper img {
        max-width: 70%;
        border-radius: 60px;
        box-shadow: -2px 6px 0px rgba(227, 111, 59, 0.7);
      }
    
      div#button_wrapper {
        padding: 1rem;
      }
    
      div#button_wrapper a {
        padding: 1rem 2rem;
        border-radius: 24px;
        display: inline-block;
        background: linear-gradient(120deg, #F6A179, #865CFF);
        box-shadow: -2px 4px 0px rgba(96, 54, 173, 0.9);
        font-weight: 700;
        font-size: 16px;
        font-family: 'Futura';
        color: white;
      }
    
      div#footer {
        font-weight: 700;
        font-size: 16px;
        font-family: 'Futura';
        padding: 2rem;
      }
    
      div#button_wrapper:hover a {
        box-shadow: -4px 6px 0px rgba(96, 54, 173, 0.8);
      }
    
      div#custom_section {
        background: linear-gradient(120deg, #FF9F73, #FFC7AD);
        padding:0 0 2rem 0;
        border-radius: 4rem;
      }
    </style>
    <div id="custom_section">
      <p id="welcome">
        Hello from {{shop.name}}<strong></strong>!
      </p>
      <div id="image_wrapper">
        <img src="https://burst.shopifycdn.com/photos/a-trio-of-natural-soaps.jpg" alt="" />
      </div>
      <div id="button_wrapper">
        <a href="">Shop now</a>
      </div>
      <div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>
    </div>

    Bereit, mit Shopify zu verkaufen?

    Kostenlos testen