Een aangepaste Liquid-sectie voor Shopify Email toevoegen

Als je een aangepaste Liquid-sectie toevoegt, kun je aangepaste Liquid of HTML in je Shopify Email-berichten invoeren.

Liquid is de eenvoudige, gebruiksvriendelijke programmeertaal van Shopify en is dezelfde programmeertaal als waarmee thema's uit de Shopify Theme Store zijn gebouwd.

Je kunt de aangepaste Liquid-sectie gebruiken om aangepaste elementen weer te geven, zoals naast elkaar geplaatste afbeeldingen, aangepaste knoppen, afbeeldingen en secties met aangepaste formaten.

Overwegingen

Loop de volgende aandachtspunten na voordat je aangepaste Liquid aan je Shopify Email-berichten gaat toevoegen.

  • De variabelen die je in je code opneemt, moeten worden ondersteund door de aangepaste Liquid-sectie.
  • De ingevoerde code mag niet groter zijn dan 50 KB.
  • Je kunt alleen een desktopapparaat gebruiken om een aangepaste Liquid-sectie aan te maken.

Ondersteunde Liquid-variabelen in de aangepaste Liquid-sectie

Je kunt de volgende variabelen gebruiken om je Shopify Email-berichten aan te passen in de aangepaste Liquid-sectie.

Beschrijving van door Shopify Email ondersteunde Liquid-variabelen
Variabele Beschrijving
abandoned_checkout

Deze variabele geeft toegang tot de volgende eigenschappen van een afgebroken checkout:

  • url toont de URL van de afgebroken checkout.
  • line_items toont de eerste vijf orderregels van de afgebroken checkout. Bovendien bevat elk line_items-object de volgende eigenschappen over elk product:
    • productnaam
    • variant_title
    • aantal
  • remaining_products_count geeft het aantal resterende regelitems weer als er meer dan vijf regelitems zijn bij de betaalprocedure.
  • De abandoned_checkout-variabele wordt alleen ingevuld als een e-mail onderdeel is van een marketingautomatisering voor afgebroken checkout. Anders is de variabele null.

abandoned_visit

Deze variabele geeft toegang tot de volgende eigenschappen van een verlaten winkelwagen of verlaten productpagina:

  • url toont de URL van de afgebroken checkout.
  • products_added_to_cart toont de eerste vijf productorderregels die in de verlaten winkelwagen zijn gelegd. Bovendien bevat elk products_added_to_cart-object de volgende eigenschappen over elk product:
    • titel
    • image_url
    • variant_title
    • aantal
  • products_viewed toont de eerste vijf producten die zijn bekeken tijdens het bezoek met de verlaten winkelwagen. Verder bevat elk products_viewed-object de volgende eigenschappen over elk product:
    • titel
    • beschrijving
    • image_url
    • url
  • remaining_cart_products_count geeft het aantal resterende orderregels weer als er meer dan vijf orderregels zijn bij de afgebroken checkout.
  • De abandoned_visit-variabele wordt alleen ingevuld als een e-mail onderdeel is van een marketingautomatisering voor een verlaten winkelwagen of een verlaten productpagina. Anders is de variabele null.

data.customer.*

Deze variabele biedt toegang tot de volgende eigenschappen van klantgegevens:

  • first_name
  • last_name
  • e-mail
  • stad
  • state
  • land
  • Deze eigenschappen kunnen niet worden gebruikt in Liquid-filters of Liquid-voorwaarden.

    email.*

    Deze variabele geeft toegang tot de volgende e-maileigenschappen:

  • subject toont de onderwerpregel van de e-mail.
  • preview_text toont de voorbeeldtekst van de e-mail.
  • shop.*
    Deze variabele geeft toegang tot de volgende winkeleigenschappen:
  • name toont de winkelnaam.
  • domain toont het hoofddomein van de winkel.
  • url toont de winkel-URL.
  • shopify_domain toont het Shopify-domein.
    • address toont het winkeladres, waarvoor de volgende adreseigenschappen worden weergegeven:
      • adres1
      • adres2
      • stad
      • land
      • telefoon
      • provincie
      • postcode
      • branding toont de branding van de winkel, die de volgende eigenschappen bevat:
        • 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, die direct als een img-tag wordt weergegeven.

    Voorbeeld van aangepaste Liquid-code

    Nadat je een aangepaste Liquid-sectie hebt toevoegen aan je e-mailtemplate, kun je de aangepaste Liquid of HTML toevoegen in de code-editor.

    De volgende code is een voorbeeld van hoe je Liquid-code kunt toevoegen om je winkelnaam, een aangepaste knop en een aangepaste afbeelding weer te geven in een e-mailbericht.

    <style>
      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#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>

    Klaar om te beginnen met verkopen met Shopify?

    Probeer het gratis