Shopify Email 사용자 지정 Liquid 섹션 추가

이 페이지는 Jun 05, 2023에 인쇄되었습니다. 최신 버전은 https://help.shopify.com/ko/manual/promoting-marketing/create-marketing/shopify-email/create-email/custom-liquid에서 확인하십시오.

사용자 지정 Liquid 섹션을 추가하면 Shopify Email 메시지에 사용자 지정 Liquid 또는 HTML을 입력할 수 있습니다.

Liquid는 Shopify의 간단하고 사용하기 쉬운 프로그래밍 언어이며 Shopify 테마 스토어에서 테마 구축에 사용된 것과 동일한 프로그래밍 언어입니다.

사용자 지정 Liquid 섹션을 통해 병렬 이미지, 사용자 지정 버튼, 사용자 지정 크기 이미지, 사용자 지정 섹션 크기 등의 맞춤형 자산을 표시할 수 있습니다.

이 페이지의 정보

고려 사항

Shopify Email 메시지에 사용자 지정 Liquid를 추가하기 전에 다음 고려 사항을 검토하십시오.

  • 코드에 포함되는 변수는 사용자 지정 Liquid 섹션에서 지원해야 합니다.
  • 입력하는 코드의 크기는 50KB를 초과할 수 없습니다.
  • 데스크톱 장치에서만 사용자 지정 Liquid 섹션을 생성할 수 있습니다.

사용자 지정 Liquid 섹션에서 지원되는 Liquid 변수

다음 변수로 사용자 지정 Liquid 섹션에서 Shopify 이메일 메시지를 맞춤 설정할 수 있습니다.

Shopify Email 지원 Liquid 변수에 대한 설명
변수 설명 
abandoned_checkout

이 변수를 통해 다음과 같은 중단된 결제의 속성을 사용할 수 있습니다.

  • url은 중단된 결제의 URL을 표시합니다.
  • line_items는 중단된 결제의 처음 5개 품목을 표시합니다. 또한 line_items 개체마다 각 제품에 대한 다음 속성이 포함되어 있습니다.
    • product_title
    • variant_title
    • quantity
  • remaining_products_count는 중단된 결제의 품목이 5개를 초과하는 경우 남은 품목 수를 표시합니다.

    • abandoned_checkout 변수는 중단된 결제 마케팅 자동화의 일부인 이메일에만 입력됩니다. 그렇지 않으면 변수는 null이 됩니다.

 
abandoned_visit

이 변수를 통해 중단된 카트 또는 검색의 다음과 같은 속성을 사용할 수 있습니다.

  • url은 중단된 결제의 URL을 표시합니다.
  • products_added_to_cart는 중단된 방문 카트에 추가한 처음 5개의 제품 품목을 표시합니다. 또한 products_added_to_cart 개체마다 각 제품에 대한 다음 속성이 포함되어 있습니다.
    • 제목
    • image_url
    • variant_title
    • quantity
  • products_viewed는 중단된 방문 중에 조회한 처음 5개 제품을 표시합니다. 또한 products_viewed 개체마다 각 제품에 대한 다음 속성이 포함되어 있습니다.
    • 제목
    • 설명
    • image_url
    • URL
  • remaining_cart_products_count는 중단된 결제의 품목이 5개를 초과하는 경우 남은 품목 수를 표시합니다.

    • abandoned_visit 변수는 중단된 카트 또는 중단된 제품 검색 마케팅 자동화의 일부인 이메일에만 입력됩니다. 그렇지 않으면 변수는 null이 됩니다. 

data.customer.*

이 변수를 통해 다음과 같은 고객 데이터 속성을 사용할 수 있습니다.

  • first_name(이름)
  • last_name(성)
  • 이메일
  • city
  • 상태
  • 국가

    • 이러한 속성은 Liquid 필터 또는 Liquid 조건 내에서 사용할 수 없습니다. 

    email.*

    이 변수를 통해 다음과 같은 이메일 속성을 사용할 수 있습니다.

  • subject는 이메일 제목 줄을 표시합니다.
  • preview_text는 이메일의 미리 보기 텍스트를 표시합니다.
    		•  
    shop.*
    		 이 변수를 통해 다음과 같은 상점 속성을 사용할 수 있습니다.
  • name은 상점 이름을 표시합니다.
  • domain은 상점 기본 도메인을 표시합니다.
  • url은 상점 URL을 표시합니다.
  • shopify_domain은 상점 Shopify 도메인을 표시합니다.
    • address는 다음 주소 속성을 노출하는 상점 주소를 표시합니다.
      • address1
      • address2
      • city
      • 국가
      • 휴대폰
      • province
      • 우편 번호
      • branding은 다음 속성이 포함된 상점 브랜딩을 표시합니다.
        • 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는 img 태그로 직접 렌더링됩니다.

    사용자 지정 Liquid 코드 예

    이메일 템플릿에 사용자 지정 Liquid 섹션을 추가한 후 코드 편집기에서 사용자 지정 Liquid 또는 HTML을 추가할 수 있습니다.

    다음 코드는 이메일 메시지에 스토어 이름, 사용자 지정 버튼 및 사용자 지정 크기 이미지를 표시할 수 있도록 Liquid 코드를 추가하는 방법의 예입니다.

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

    Shopify와 함께 사업을 시작할 준비가 되셨습니까?

    무료 체험