"카트에 추가"를 연락처 링크로 교체

카트에 추가 버튼을 이메일 링크나 연락처 양식으로 교체할 수 있습니다. 예를 들어 현재 판매되지 않는 제품이나 주문에 따라 제조된 제품의 경우 카트에 추가 버튼을 교체할 수 있습니다.

섹션 지원 및 섹션 미지원 테마

섹션 구분된 테마의 단계

테마 선택

이 사용자 지정 단계는 Narrative 테마 또는 Shopify에서 제작한 다른 무료 테마를 사용하는지 여부에 따라 다릅니다. 테마 버튼을 먼저 클릭하고 아래 지침을 따릅니다.

섹션 구분되지 않은 테마의 단계

새 제품 템플릿 생성

제품의 카트에 추가 버튼을 교체하려면 해당 제품에 대한 사용자 지정 제품 템플릿을 생성해야 합니다.

단계:

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
  2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  3. 템플릿 디렉토리에서 새 템플릿 추가를 클릭합니다.
  4. 제품 템플릿을 생성합니다.
    • 드롭다운 메뉴에서 제품을 선택합니다.
    • requires-contact 템플릿 이름을 지정합니다.
    • 템플릿 생성을 클릭합니다.

카트에 추가 버튼 숨기기

  1. product.requires-contact.liquid 파일에서 카트에 추가 버튼에 대한 HTML 코드를 찾습니다. cart라는 단어로 검색할 수 있습니다.

카트에 추가 버튼의 코드는 테마별로 다릅니다. Add to cart, AddToCart 또는 add-to-cart 같은 텍스트가 있는 <input> 또는 <button> 태그를 찾습니다.

Debut의 경우 카트에 추가 버튼 코드는 다음과 같이 표시됩니다.

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
  1. 코드를 찾으면 Liquid {% comment %}{% endcomment %} 태그로 둘러쌉니다. 이렇게 하면 스토어에 코드가 표시되지 않지만 나중에 새 템플릿을 변경하려는 경우 코드를 보다 쉽게 다시 넣을 수 있습니다.

Debut의 경우 수정된 코드는 다음과 같이 표시됩니다.

{% comment %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
{% endcomment %}
  1. 저장을 클릭합니다.

이메일 링크 또는 연락처 양식 추가

카트에 추가 버튼을 숨겼으므로 대신 표시하려는 콘텐츠를 추가할 수 있습니다.

이메일 링크

  1. 마지막 단계에서 추가한 Liquid {% endcomment %} 태그 아래의 새 행에 이메일 링크에 대한 HTML 코드를 추가합니다.
Please <a href="mailto:{{ shop.email }}">contact us</a> if you are
interested in this product.
  1. 저장을 클릭합니다.

연락처 양식

테마의 연락처 페이지 템플릿에서 코드를 복사하여 새 제품 템플릿에 연락처 양식을 추가할 수 있습니다. 연락처 양식을 추가하려면 다음을 수행하십시오.

  1. 템플릿 디렉토리에서 page.contact.liquid를 클릭합니다.
  2. 파일에서 Liquid {% form 'contact' %} 태그를 찾습니다.
  3. Liquid {% form 'contact' %} 태그의 모든 코드를 Liquid {% endform %} 태그에 복사합니다. 복사하는 코드에 Liquid 양식 태그를 포함합니다.
  4. 템플릿 디렉토리에서 새 product.requires-contact.liquid 파일로 돌아갑니다.
  5. 파일에서 닫는 </form> 태그를 찾습니다. 닫는 </form> 태그 아래쪽 새 행에 연락처 양식에 대한 코드를 붙여넣습니다.
  6. 다음 단계는 방금 HTML div 태그에 붙여넣은 코드를 래핑하는 것입니다. div 태그 코드에 포함된 클래스 속성은 연락처 양식이 페이지에서 올바르게 렌더링되도록 합니다.

{% form 'contact' %} 위쪽 새 행에 다음 코드를 붙여넣습니다.

<div class="form-vertical"></div>

{% endform %} 아래쪽 새 행에 다음 코드를 붙여넣습니다.

</div>
  1. 저장을 클릭합니다.

제품에 새 템플릿 할당

이제 템플릿이 완성되어 카트에 추가 버튼을 숨기고 싶은 모든 제품에 해당 템플릿을 할당할 수 있습니다.

  1. Shopify Admin에서 제품으로 이동합니다.
  2. 카트에 추가 버튼을 숨기려는 제품의 이름을 클릭합니다.
  3. Shopify Admin의 제품 페이지에 있는 온라인 스토어 아래의 테마 템플릿 드롭다운에서 새 연락처 필요 템플릿을 선택합니다.
  4. 저장을 클릭합니다.

새 템플릿을 추가하려는 각 제품에 대해 이 단계를 반복합니다.

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

무료 체험