구매 버튼 또는 임베디드 카트 편집 또는 삭제

이 페이지는 Apr 20, 2024에 인쇄되었습니다. 최신 버전은 https://help.shopify.com/ko/manual/online-sales-channels/buy-button/legacy-edit-delete에서 확인하십시오.

웹페이지의 소스 HTML에 추가하는 임베드 코드에서 구매 버튼과 카트가 생성됩니다. 웹페이지에서 단추나 카트의 모양 또는 동작을 변경하려면 관련 임베드 코드를 변경해야 합니다.

이 페이지의 정보

구매 버튼, 임베디드 컬렉션, 임베디드 카트 삭제

기존 구매 버튼, 컬렉션, 임베디드 카트를 삭제하려면,

  1. 구매 버튼, 임베디드 컬렉션 또는 임베디드 카트가 포함된 웹 페이지의 소스 HTML을 엽니다.

  2. 소스 HTML에서 전체 임베드 코드를 삭제합니다. 임베드 코드는 구매 버튼의 다음 코드와 같이 표시됩니다.

 

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>

<script type="text/javascript">
document.getElementById(&#39;ShopifyEmbedScript&#39;) || document.write(&#39;<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript">&lt;\/script&gt;&#39;);
</script><noscript><a href="https://yourstorename.myshopify.com/cart/1590898625:1" target="_blank">제품 구매</a></noscript>
  1. 변경 사항을 저장합니다.

구매 버튼 편집

기존 구매 버튼의 모양이나 설정을 변경하려면 소스 HTML에 있는 임베드 코드에서 주 div 태그의 콘텐츠를 편집해야 합니다.

 

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>

임베디드 구매 버튼의 각 기능은 주 div 태그에서 별도의 속성을 통해 제어됩니다. 소스 HTML에서 이러한 특성을 직접 추가, 삭제, 업데이트할 수 있습니다.

예를 들어 기존 구매 버튼을 사용하여 결제 페이지 대신 제품 페이지로 이동하려면,

  1. 변경하려는 구매 버튼이 있는 페이지의 HTML을 엽니다.

  2. 구매 버튼 임베드 코드의 주 div 태그 안에 있는 data-redirect_to를 찾습니다: 

    data-redirect_to="결제"

  3. 속성 값을 product로 변경합니다: 

    data-redirect_to="제품"

  4. 변경 사항을 저장합니다.

구매 버튼의 주 div 태그에는 편집할 수 있는 다양한 특성이 있습니다.

편집 가능한 구매 버튼 태그 속성
특성 값 기본값
data-shop 버튼에 연결된 storename.myshopify.com와 같은 도메인입니다. 판매자의 Shopify 도메인
data-product_handle 제품 제목에 기반한 추천 제품의 핸들입니다. Shopify에서는 각 제품에 고유한 핸들이 있습니다. 추천 제품의 핸들
data-embed_type 구매 버튼, 임베디드 컬렉션, 임베디드 카트의 임베드 코드를 구분합니다. 가능한 값은 제품, 카트 및 컬렉션입니다. 제품
data-display_size 전체 임베드의 최대 폭(버튼의 최대 폭이 아님)입니다. 콤팩트(230px) 또는 일반(450px)이면 됩니다. 단일 제품 구매 버튼에만 적용됩니다. 콤팩트
data-has_image 전체 제품 임베드(참) 또는 구매 버튼 한정(거짓) 두 가지 중 하나입니다. 참
data-redirect_to 구매 버튼이 연결되는 위치입니다. 결제, 제품 또는 카트로 연결될 수 있습니다. 같은 페이지에 있는 카트에 구매 버튼을 연결하려면 data-redirect_to가 카트여야 합니다. 결제
data-product_modal 제품을 클릭하면 표시할 제품 모달을 트리거합니다. data-redirect_to가 모달이면 이 속성은 참이어야 하고 그렇지 않으면 거짓이어야 합니다. 거짓
data-buy_button_text 구매 버튼에 표시되는 텍스트입니다. 지금 구입
data-button_background_color #이 없는 구매 버튼 색상의 16진수 코드입니다. 3자리 또는 6자리 16진수를 사용할 수 있습니다. 7db461
data-button_text_color #이 없는 구매 버튼 텍스트 색상의 16진수 코드입니다. 3자리 또는 6자리 16진수를 사용할 수 있습니다. ffffff
data-background_color 구매 버튼 주위의 배경 색상입니다. 16진수 코드 또는 배경색 없음을 사용할 수 있습니다. 배경색 없음이면 임베드 콘텐츠에 패딩이 적용되지 않습니다. 배경색 없음
data-show_product_price 제품 가격 표시 여부를 재정의합니다. 참 또는 거짓 중 하나입니다. data -has_image의 현재 값
data-show_product_title 제품명 표시 여부를 재정의합니다. 참 또는 거짓 중 하나입니다. data -has_image의 현재 값
data-buy_button_out_of_stock_text 제품 재고가 없을 때 표시되는 텍스트입니다. 품절
data-buy_button_product_unavailable_text 제품을 구입할 수 없을 때 표시되는 텍스트입니다. 구매 불가
data-product_title_color #이 없는 제품 이름 텍스트 색상의 16진수 코드입니다. 3자리 또는 6자리 16진수를 사용할 수 있습니다. 000000

웹사이트 카트 편집

웹사이트 카트의 모양이나 동작을 변경하려면 별도의 HTML 코드 조각을 추가한 다음 해당 특성을 편집해야 합니다. 각 속성은 카트의 형태와 작동 방식의 각기 다른 부분을 제어합니다.

웹사이트의 카트를 편집하려면,

  1. 편집하려는 카트가 포함된 페이지의 HTML을 엽니다.

  2. 다음 코드를 붙여넣습니다.

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com"></div>
<script type="text/javascript">document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');</script>

  1. your-shop-name.myshopify.com를 스토어의 myshopify.com 주소로 교체합니다.

  2. 관련 특성을 카트의 주 div 태그에 추가하고 원하는 값이 들어가도록 변경합니다. 예를 들어 카트의 맨 위에 표시되는 텍스트를 변경하려면 코드 조각의 주 div 태그에 data-cart_title="your text"를 추가해야 합니다. 결과는 다음과 같습니다.

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com" data-cart_title="your text">
  1. 작업을 마치면 변경 사항을 저장합니다.

카트 특성

웹사이트의 카트 사용자 지정에 쓸 수 있는 특성은 다양합니다.

카트 사용자 지정 특성
특성 값 기본값
data-shop storename.myshopify.com과 같은 관련 myshopify 도메인. 판매자의 Shopify 도메인
data-embed_type 구매 버튼, 임베디드 컬렉션, 임베디드 카트의 임베드 코드를 구분합니다. 가능한 값은 제품, 카트 및 컬렉션입니다. 카트
data-checkout_button_text 카트 버튼 대신 카트 내에서 결제 페이지로 이어지는 버튼에 표시되는 텍스트입니다. 결제
data-button_text_color #이 없는 카트 버튼 텍스트 색상의 16진수 코드입니다. 3자리 또는 6자리 16진수를 사용할 수 있습니다. ffffff
data-button_background_color #이 없는 카트 버튼 색상의 16진수 코드입니다. 3자리 또는 6자리 16진수를 사용할 수 있습니다. 7db461
data-background_color 임베디드 카트 주위의 배경 색상입니다. 16진수 코드 또는 배경색 없음을 사용할 수 있습니다. 배경색 없음이면 임베드 콘텐츠에 패딩이 적용되지 않습니다. 배경색 없음
data-text_color #이 없는 카트 버튼 텍스트 색상의 16진수 코드입니다. 3자리 또는 6자리 16진수를 사용할 수 있습니다. 000000
data-accent_color #이 없는 카트 주위 테두리 색상 16진수 코드입니다. 3자리 또는 6자리 16진수를 사용할 수 있습니다. 000000
data-cart_title 페이지에서 열 때 카트의 맨 위에 표시되는 텍스트입니다. 장바구니
data-cart_total_text 카트에서 합계 금액 옆에 표시되는 텍스트입니다. 총계
data-discount_notice_text 카트에 표시되는 할인 공지입니다. 배송 및 할인 코드는 결제 시에 추가됩니다.
data-sticky 해당 버튼이 마크업에서 배치된 위치에 표시되는지 아니면 페이지 옆으로 붙어 있는지를 나타냅니다. 최근에 제작된 임베디드 카트는 임베드 코드 출력에서 참으로 설정됩니다. 거짓
data-empty_cart_text 카트가 비어 있으면 표시되는 텍스트입니다. 카트가 비어 있습니다
data-next_page_button_text 컬렉션 내 다음 페이지 버튼에 표시되는 텍스트입니다. 다음 페이지

임베디드 컬렉션 편집

임베디드 컬렉션의 임베드 코드에는 두 가지 div 요소가 있습니다. 첫 번째 div에는 임베디드 카트의 코드가 들어있고 두 번째 div에는 컬렉션의 각 제품에 대해 모달 창 버튼 형태의 임베디드 구매 버튼의 코드가 들어있습니다.

두 번째 div 요소에는 다음과 같은 특성도 포함되어 있습니다.

구매 버튼 코드의 속성 정의
특성 값 기본값
data-collection_handle 컬렉션 제목을 기반으로 하는 추천 컬렉션의 핸들입니다. Shopify에서는 각 컬렉션에 고유한 핸들이 있습니다. 추천 컬렉션의 핸들
data-embed_type 구매 버튼, 임베디드 컬렉션, 임베디드 카트의 임베드 코드를 구분합니다. 가능한 값은 제품, 카트 및 컬렉션입니다. 컬렉션

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

무료 체험