Shopify Emailin mukautetun Liquid-osion lisääminen

Mukautetun Liquid-osion lisääminen mahdollistaa mukautetun Liquid- tai HTML-koodin lisäämisen Shopify Email -viesteihin.

Liquid on Shopifyn yksinkertainen ja helppokäyttöinen ohjelmointikieli, ja se on sama ohjelmointikieli, jolla Shopify Theme Storen teemat on luotu.

Mukautetun Liquid-osion avulla voit näyttää mukautettuja resursseja, kuten vierekkäisiä kuvia, mukautettuja painikkeita, mukautetun kokoisia kuvia ja mukautettuja osion kokoja.

Huomioitavaa

Tarkista seuraavat seikat, ennen kuin aloitat mukautetun Liquid-koodin lisäämisen Shopify Email -viesteihin.

Mukautetun Liquid-koodin osiossa tuetut Liquid-muuttujat

Voit mukauttaa Shopify-sähköpostiviestejä mukautetussa Liquid-osiossa seuraavien muuttujien avulla.

Shopify Emailin tukemien Liquid-muuttujien kuvaus
Muuttuja Oikeuksien kuvaus
abandoned_checkout

Tämä muuttuja mahdollistaa seuraavat hylätyn kassavaiheen ominaisuudet:

  • url näyttää hylätyn kassavaiheen URL-osoitteen.
  • line_items näyttää hylätyn kassavaiheen viisi ensimmäistä rivikohtaa.Lisäksi jokainen line_items-objekti sisältää seuraavat kunkin tuotteen ominaisuudet:
    • product_title
    • variant_title
    • quantity
  • remaining_products_count näyttää jäljellä olevien rivikohtien määrän, jos hylätyssä kassavaiheessa on enemmän kuin viisi riviä.
  • Muuttuja abandoned_checkout täyttää vain, jos sähköposti kuuluu hylätyn kassavaiheen markkinointiautomaatioon. Muussa tapauksessa muuttuja on null.

abandoned_visit

Tämä muuttuja mahdollistaa seuraavat hylätyn ostoskorin tai selauksen ominaisuudet:

  • url näyttää hylätyn kassavaiheen URL-osoitteen.
  • products_added_to_cart näyttää viisin ensimmäistä hylätyn käynnin ostoskoriin lisättyä tuoterivikohtaa.Lisäksi jokainen products_added_to_cart-objekti sisältää seuraavat kunkin tuotteen ominaisuudet:
    • otsikko
    • image_url
    • variant_title
    • quantity
  • products_viewed näyttää viisi ensimmäistä tuotetta, jotka on katsottu hylätyn käynnin aikana.Lisäksi jokainen products_viewed-objekti sisältää seuraavat kunkin tuotteen ominaisuudet:
    • otsikko
    • kuvaus
    • image_url
    • url
  • remaining_cart_products_count näyttää jäljellä olevien rivikohtien määrän, jos hylätyssä kassavaiheessa on enemmän kuin viisi rivikohtaa.
  • Muuttuja abandoned_visit täyttää vain, jos sähköposti kuuluu hylätyn ostoskorin tai hylätyn tuoteselauksen markkinointiautomaatioon. Muussa tapauksessa muuttuja on null.

data.customer.*

Tämä muuttuja mahdollistaa seuraavat asiakastietojen ominaisuudet:

  • first_name (etunimi)
  • last_name (sukunimi)
  • sähköposti
  • city
  • Valtion
  • maa
  • Näitä ominaisuuksia ei voi käyttää Liquid-suodattimissa tai Liquid-ehdoissa.

    email.*

    Tämä muuttuja mahdollistaa seuraavat sähköpostin ominaisuudet:

  • subject näyttää sähköpostiviestin aiherivin.
  • preview_text näyttää sähköpostiviestin esikatselutekstin.
  • shop.*
    Tämä muuttuja mahdollistaa seuraavat kaupan ominaisuudet:
  • name näyttää kaupan nimen.
  • domain näyttää kaupan ensisijaisen verkkotunnuksen.
  • url näyttää kaupan URL-osoitteen.
  • shopify_domain näyttää kaupan Shopify-verkkotunnuksen.
    • address näyttää kaupan osoitteen, joka asettaa näkyviin seuraavat osoitteen ominaisuudet:
      • address1
      • address2
      • city
      • maa
      • puhelin
      • province
      • postinumero
      • branding näyttää kaupan brändäyksen, joka sisältää seuraavat ominaisuudet:
        • 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, joka renderöidään suoraan img-tunnisteena.

    Esimerkki mukautetusta Liquid-koodista

    Kun olet lisännyt sähköpostimalliin mukautetun Liquid-osion, voit lisätä mukautetun Liquid- tai HTML-koodin koodieditorissa.

    Seuraava koodi on esimerkki siitä, miten voit lisätä Liquid-koodin, joka näyttää kauppasi nimen, mukautetun painikkeen ja mukautetun kokoisen kuvan sähköpostiviestissä.

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

    Valmiina aloittamaan Shopifyssa?

    Kokeile ilmaiseksi