Een aangepaste Liquid-sectie voor Shopify Email toevoegen

Je bedrijf laten groeien

Als je hulp nodig hebt bij het aanmaken van aangepaste code voor Shopify Email-berichten, kun je een Shopify Expert inhuren.

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.

Liquid-variabelen die worden ondersteund 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>