카트 페이지에 선물 포장 옵션 추가

주의

테마 스토어에서는 빈티지 테마를 사용할 수 없습니다. 빈티지 테마에는 Shopify Online Store 2.0 테마에 포함된 기능이 없으며, Shopify 무료 빈티지 테마는 보안 수정을 제외한 업데이트가 제공되지 않습니다.

참고 사항

Shopify 무료 테마를 사용하는 경우 Shopify 지원팀에 문의하여 이 튜토리얼에 대한 도움을 받을 수 있습니다. 디자인에는 15분이 소요됩니다. Shopify 디자인 정책에 대해 자세히 알아보세요.

참고 사항

이 사용자 지정은 빈티지 Shopify 테마용으로, Online Store 2.0 테마에는 적용되지 않습니다.

• 테마의 아키텍처 버전 알아보기
• Online Store 2.0 테마 사용자 지정 살펴보기

온라인 스토어의 카트 페이지에서 고객에게 선물 포장 서비스를 제공할 수 있습니다. 주문 포장을 원하는 고객에게는 균일 요금을 청구하거나 제품당 요금을 청구할 수 있습니다.

주의

이 사용자 지정은 서랍 또는 팝업 카트 스타일에는 적용되지 않으며 카트 페이지(URL: your-store.com/cart)에만 적용됩니다. 카트 서랍 또는 팝업을 사용하는 경우 테마 편집기에서 카트 스타일을 페이지로 변경해야 합니다 테마 미리 보기에서 카트에 제품을 추가한 다음 테마 편집기에서 카트 페이지 탭을 클릭하여 카트 설정을 봅니다.

선물 포장 제품 생성

먼저 선물 포장 옵션을 제품으로 생성합니다.

1. Shopify 관리자에서 제품으로 이동합니다.

2. 제품 추가를 클릭합니다.

3. 다른 제품을 생성하는 것과 같은 방법으로 선물 포장 제품을 생성합니다.

   

• 제품 설명을 사용하여 품목을 선물 포장할 때 사용할 재료에 대해 설명할 수 있습니다.
• 선물 포장 제품에 서비스에 대해 청구할 가격을 지정하십시오. 선물 포장을 무료로 사용하려는 경우 선물 포장 제품의 가격을 0으로 설정합니다.
• 상품 이미지를 업로드하여 고객에게 선물 포장 주문의 모습을 보여줄 수 있습니다.
• 선물 포장 제품에 재고가 포함되어 있는지 확인하거나 Shopify가 선물 포장 제품의 재고를 추적하지 않도록 설정을 조정하십시오. 스토어에 위치가 여러 개인 경우 수량 추적을 선택 취소하여 Shopify가 선물 포장 제품의 재고를 추적하지 못하도록 합니다.

1. 저장을 클릭합니다.

메뉴 생성

다음으로 선물 포장 제품을 가리키는 메뉴를 생성합니다.

데스크톱

1. Shopify Admin에서 온라인 스토어 > 탐색으로 이동합니다.
2. 메뉴 추가를 클릭합니다.
3. Gift wrapping 메뉴의 이름을 지정하여 메뉴에 할당된 핸들이 gift-wrapping이 되도록 합니다.

4. 선물 포장 제품을 메뉴에 추가합니다.

   1. 메뉴 항목 추가를 클릭한 다음 선물 포장 제품 링크에 대한 이름을 입력합니다.
   2. 링크필드에서 제품을 선택한 다음 드롭다운 메뉴에서 선물 포장 제품을 선택합니다.
   3. 추가를 클릭합니다.

5. 메뉴 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 탐색을 탭합니다.
4. 메뉴 추가를 클릭합니다.
5. Gift wrapping 메뉴의 이름을 지정하여 메뉴에 할당된 핸들이 gift-wrapping이 되도록 합니다.

6. 선물 포장 제품을 메뉴에 추가합니다.

   1. 메뉴 항목 추가를 클릭한 다음 선물 포장 제품 링크에 대한 이름을 입력합니다.
   2. 링크필드에서 제품을 선택한 다음 드롭다운 메뉴에서 선물 포장 제품을 선택합니다.
   3. 추가를 클릭합니다.

7. 메뉴 저장을 클릭합니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 탐색을 탭합니다.
4. 메뉴 추가를 클릭합니다.
5. Gift wrapping 메뉴의 이름을 지정하여 메뉴에 할당된 핸들이 gift-wrapping이 되도록 합니다.

6. 선물 포장 제품을 메뉴에 추가합니다.

   1. 메뉴 항목 추가를 클릭한 다음 선물 포장 제품 링크에 대한 이름을 입력합니다.
   2. 링크필드에서 제품을 선택한 다음 드롭다운 메뉴에서 선물 포장 제품을 선택합니다.
   3. 추가를 클릭합니다.

7. 메뉴 저장을 클릭합니다.

코드 조각 생성

데스크톱

1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
3. 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.
4. 코드 조각 gift-wrapping의 이름을 지정하고 코드 조각 생성을 클릭합니다. 코드 조각이 코드 편집기에서 열립니다.
5. 이 단계에서는 일부 코드를 새 gift-wrapping 코드 조각 파일에 붙여넣습니다. 붙여넣은 코드는 선물 포장 서비스에 대해 고객에게 청구하려는 방법에 따라 다릅니다.

iPhone

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.
6. 코드 조각 gift-wrapping의 이름을 지정하고 코드 조각 생성을 클릭합니다. 코드 조각이 코드 편집기에서 열립니다.
7. 이 단계에서는 일부 코드를 새 gift-wrapping 코드 조각 파일에 붙여넣습니다. 붙여넣은 코드는 선물 포장 서비스에 대해 고객에게 청구하려는 방법에 따라 다릅니다.

Android

1. Shopify 앱에서 … 버튼을 탭합니다.
2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
3. 테마 관리를 탭합니다.
4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
5. 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.
6. 코드 조각 gift-wrapping의 이름을 지정하고 코드 조각 생성을 클릭합니다. 코드 조각이 코드 편집기에서 열립니다.
7. 이 단계에서는 일부 코드를 새 gift-wrapping 코드 조각 파일에 붙여넣습니다. 붙여넣은 코드는 선물 포장 서비스에 대해 고객에게 청구하려는 방법에 따라 다릅니다.

선물 포장에 대해 균일 요금 추가

다음 코드를 붙여넣고 저장합니다.

{% if linklists.gift-wrapping.links.size > 0 and
linklists.gift-wrapping.links.first.type == 'product_link' %}

<div
  id="is-a-gift"
  style="clear: left; margin: 30px 0"
  class="clearfix rte"
>
  <p>
    <input
      id="gift-wrapping"
      type="checkbox"
      name="attributes[gift-wrapping]"
      value="yes"
      {% if cart.attributes.gift-wrapping %}
      checked="checked"
      {% endif %}
      style="float: none"
    />
    <label
      for="gift-wrapping"
      style="display:inline; padding-left: 5px; float: none;"
    >
      For {{ linklists.gift-wrapping.links.first.object.price | money }}
      please wrap the products in this order.
    </label>
  </p>
  <p>
    <label style="display:block" for="gift-note"
      >Gift message (free and optional):</label
    >
    <textarea name="attributes[gift-note]" id="gift-note">
{{ cart.attributes.gift-note }}</textarea
    >
  </p>
</div>

{% assign id = linklists.gift-wrapping.links.first.object.variants.first.id
%} {% assign gift_wraps_in_cart = 0 %} {% for item in cart.items %} {% if
item.id == id %} {% assign gift_wraps_in_cart = item.quantity %} {% endif %}
{% endfor %}

<style>
  #updates_{{ id }} { display: none; }
</style>

<script>

  Shopify.Cart = Shopify.Cart || {};

  Shopify.Cart.GiftWrap = {};

  Shopify.Cart.GiftWrap.set = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: 1 }, attributes: { 'gift-wrapping': true } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  Shopify.Cart.GiftWrap.remove = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: 0 }, attributes: { 'gift-wrapping': '', 'gift-note': '' } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  // If we have nothing but gift-wrap items in the cart.
  {% if cart.items.size == 1 and gift_wraps_in_cart > 0 %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.remove();
  });
  // If we have more than one gift-wrap item in the cart.
  {% elsif gift_wraps_in_cart > 1 %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have a gift-wrap item in the cart but our gift-wrapping cart attribute has not been set.
  {% elsif gift_wraps_in_cart > 0 and cart.attributes.gift-wrapping == blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have no gift-wrap item in the cart but our gift-wrapping cart attribute has been set.
  {% elsif gift_wraps_in_cart == 0 and cart.attributes.gift-wrapping != blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  {% endif %}

  // When the gift-wrapping checkbox is checked or unchecked.
  document.addEventListener("DOMContentLoaded", function(){
    document.querySelector('[name="attributes[gift-wrapping]"]').addEventListener("change", function(event) {
      if (event.target.checked) {
        Shopify.Cart.GiftWrap.set();
      } else {
        Shopify.Cart.GiftWrap.remove();
      }

    });

    document.querySelector('#gift-note').addEventListener("change", function(evt) {
      var note = evt.target.value;
      var headers = new Headers({ 'Content-Type': 'application/json' });

      var request = {
        method: 'POST',
        headers: headers,
        body: JSON.stringify({ attributes: { 'gift-note': note } })
      };

      fetch('/cart/update.js', request);
    });
  });
</script>

{% else %}

<p style="clear: left; margin: 30px 0" class="rte">
  You attempted to add a gift-wrapping script to your shopping cart, but it
  won't work because you don't have a link list with handle
  <code>gift-wrapping</code> which, in turn, contains a link to your
  gift-wrapping product. Please review the steps outlined
  <a
    href="https://help.shopify.com/manual/online-store/themes/os/customize/add-gift-wrap-option"
    target="_blank"
    rel="noopener noreferrer nofollow"
    >here</a
  >.
</p>

{% endif %}

주문에 제품 수를 곱한 요금을 추가

이 옵션을 사용하면 주문에 3개의 제품이 있는 경우 선물 포장 비용에 3을 곱합니다. 다음 코드를 붙여넣고 저장합니다.

{% if linklists.gift-wrapping.links.size > 0 and
linklists.gift-wrapping.links.first.type == 'product_link' %}

<div
  id="is-a-gift"
  style="clear: left; margin: 30px 0"
  class="clearfix rte"
>
  <p>
    <input
      id="gift-wrapping"
      type="checkbox"
      name="attributes[gift-wrapping]"
      value="yes"
      {% if cart.attributes.gift-wrapping %}
      checked="checked"
      {% endif %}
      style="float: none"
    />
    <label
      for="gift-wrapping"
      style="display:inline; padding-left: 5px; float: none;"
    >
      For {{ linklists.gift-wrapping.links.first.object.price | money }} per
      item, please wrap the products in this order.
    </label>
  </p>
  <p>
    <label style="display:block" for="gift-note"
      >Gift message (free and optional):</label
    >
    <textarea name="attributes[gift-note]" id="gift-note">
{{ cart.attributes.gift-note }}</textarea
    >
  </p>
</div>

{% assign id = linklists.gift-wrapping.links.first.object.variants.first.id
%} {% assign gift_wraps_in_cart = 0 %} {% for item in cart.items %} {% if
item.id == id %} {% assign gift_wraps_in_cart = item.quantity %} {% endif %}
{% endfor %} {% assign items_in_cart = cart.item_count | minus:
gift_wraps_in_cart %}

<style>
  #updates_{{ id }} { display: none; }
</style>

<script>

  Shopify.Cart = Shopify.Cart || {};

  Shopify.Cart.GiftWrap = {};

  Shopify.Cart.GiftWrap.set = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: {{ items_in_cart }} }, attributes: { 'gift-wrapping': true } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  Shopify.Cart.GiftWrap.remove = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: 0 }, attributes: { 'gift-wrapping': '', 'gift-note': '' } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  // If we have nothing but gift-wrap items in the cart.
  {% if cart.items.size == 1 and gift_wraps_in_cart > 0 %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.remove();
  });
  // If we don't have the right amount of gift-wrap items in the cart.
  {% elsif gift_wraps_in_cart > 0 and gift_wraps_in_cart != items_in_cart %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have a gift-wrap item in the cart but our gift-wrapping cart attribute has not been set.
  {% elsif gift_wraps_in_cart > 0 and cart.attributes.gift-wrapping == blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have no gift-wrap item in the cart but our gift-wrapping cart attribute has been set.
  {% elsif gift_wraps_in_cart == 0 and cart.attributes.gift-wrapping != blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  {% endif %}

  // When the gift-wrapping checkbox is checked or unchecked.
  document.addEventListener("DOMContentLoaded", function(){
    document.querySelector('[name="attributes[gift-wrapping]"]').addEventListener("change", function(event) {
      if (event.target.checked) {
        Shopify.Cart.GiftWrap.set();
      } else {
        Shopify.Cart.GiftWrap.remove();
      }

    });

    document.querySelector('#gift-note').addEventListener("change", function(evt) {
      var note = evt.target.value;
      var headers = new Headers({ 'Content-Type': 'application/json' });

      var request = {
        method: 'POST',
        headers: headers,
        body: JSON.stringify({ attributes: { 'gift-note': note } })
      };

      fetch('/cart/update.js', request);
    });
  });
</script>

{% else %}

<p style="clear: left; margin: 30px 0" class="rte">
  You attempted to add a gift-wrapping script to your shopping cart, but it
  won't work because you don't have a link list with handle
  <code>gift-wrapping</code> which, in turn, contains a link to your
  gift-wrapping product. Please review the steps outlined
  <a
    href="https://help.shopify.com/manual/online-store/themes/os/customize/add-gift-wrap-option"
    target="_blank"
    rel="noopener noreferrer nofollow"
    >here</a
  >.
</p>

{% endif %}

카트 템플릿에 코드 조각 포함

카트 템플릿에 선물 포장 코드 조각을 포함하려면 다음을 수행하십시오.

1. 섹션 디렉토리에서 cart-template.liquid을(를) 클릭합니다. 테마에서 cart-template.liquid을(를) 찾을 수 없는 경우에는 템플릿 디렉토리의 cart.liquid을(를) 클릭합니다.

2. 코드에서 닫는 </form> 태그를 찾습니다. 닫는 </form> 태그 위쪽 새 행에 다음 코드를 붙여넣습니다.

{% render 'gift-wrapping' %}

1. 저장을 클릭합니다.