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

주의

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

참고 사항

Shopify 무료 테마를 사용하는 경우 Shopify 지원팀에 문의하여 이 튜토리얼에 대한 도움을 받을 수 있습니다. 디자인 시간으로 15분이 필요합니다. 자세히 알아보려면 테마에 대한 지원을 참조하십시오.

참고 사항

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

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

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

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

참고 사항

이 튜토리얼의 단계는 섹션 포함 테마인지 섹션 구분되지 않은 테마인지에 따라 다릅니다. 섹션 포함 테마에서는 끌어서 놓기 방식으로 홈페이지 레이아웃을 수정할 수 있으며, 섹션 구분되지 않은 테마에서는 해당 작업을 수행할 수 없습니다.

사용하는 테마에서 섹션을 지원하는지 확인하려면 코드 편집 페이지로 이동합니다. 섹션을 지원하는 테마를 사용하는 경우에는 섹션 디렉토리에서 파일을 찾아볼 수 있습니다. 2016년 10월 이전에 출시된 테마는 섹션을 지원하지 않으며 섹션 디렉토리에 파일이 없습니다.

섹션을 지원하는 테마를 사용하는 경우 섹션 지원 테마 버튼을 클릭한 다음 안내를 따릅니다. 섹션을 지원하지 않는 구형 테마를 사용하는 경우 섹션 미지원 테마 버튼을 클릭한 다음 안내를 따릅니다.

---

Sectioned themes

테마 선택

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

Narrative

Narrative에서 새 제품 템플릿 생성

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

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

iPhone

1. Shopify 앱에서 스토어를 탭합니다.

2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

3. 테마 관리를 탭합니다.

4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

Android

1. Shopify 앱에서 스토어를 탭합니다.

2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

3. 테마 관리를 탭합니다.

4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

1. 템플릿 디렉토리에서 새 템플릿 추가를 클릭합니다.

2. 제품 템플릿을 생성합니다.

   • 드롭다운 메뉴에서 제품을 선택합니다.
   • requires-contact 템플릿 이름을 지정합니다.
   • 템플릿 생성을 클릭합니다.

3. 다음 코드를 찾습니다.

{% section 'product-template' %}

다음으로 교체합니다.

{% section 'product-template-requires-contact' %}

이 코드는 다음 단계에서 생성할 새 제품 섹션과 새 템플릿을 연결합니다.

1. 저장을 클릭합니다.

새 제품 섹션 생성

1. 섹션 디렉토리에서 새로운 섹션 추가를 클릭합니다.

2. 섹션을 생성합니다.

   1. 새 섹션 product-template-requires-contact의 이름을 지정합니다.
   2. 섹션 생성을 클릭합니다.

3. 파일이 비어 있도록 섹션 파일에서 모든 기본 코드를 삭제합니다.

4. 섹션 디렉토리에서 product-template.liquid를 클릭합니다. 파일의 모든 콘텐츠를 클립보드에 복사합니다.

5. 새 product-template-requires-contact.liquid 섹션으로 돌아가서 파일에 코드를 붙여넣습니다.

6. 저장을 클릭합니다.

카트에 추가 버튼 숨기기

1. product-template-requires-contact.liquid 섹션 파일에서 제품 페이지의 제품 양식에 대한 HTML 코드를 찾습니다. 파일에서 form라는 단어를 검색하여 찾을 수 있습니다.

2. 코드를 찾으면 Liquid {% comment %} 및 {% endcomment %} 태그로 둘러쌉니다. 이렇게 하면 스토어에 코드가 표시되지 않지만 나중에 새 템플릿을 변경하려는 경우 쉽게 다시 넣을 수 있습니다.

Narrative의 경우 수정된 코드는 다음과 같습니다.

{% comment %}
{% include 'product-form' %}
{% endcomment %}

1. 저장을 클릭합니다.

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

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

이메일 링크

고객의 기본 이메일 프로그램을 여는 이메일 링크를 추가하고 수신자로 스토어의 고객용 이메일 주소를 입력할 수 있습니다. 이메일 링크를 추가하려면 다음을 수행하십시오.

1. 마지막 단계에서 추가한 Liquid {% endcomment %} 태그 아래의 새 행에 이메일 링크에 대한 HTML 코드를 추가합니다.

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

1. 저장을 클릭합니다.

연락처 양식

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

1. 템플릿 디렉토리에서 page.contact.liquid를 클릭합니다.
2. 파일에서 Liquid {% form 'contact' %} 태그를 찾습니다.
3. Liquid {% form 'contact' %} 태그의 모든 코드를 Liquid {% endform %} 태그에 복사합니다. 복사하는 코드에 Liquid 양식 태그를 포함합니다.
4. 템플릿 디렉토리에서 새 product.requires-contact.liquid 파일로 돌아갑니다.

추가한 Liquid {% endcomment %} 태그 아래의 새 행에 연락처 양식에 대한 코드를 붙여넣습니다.

1. 다음 단계는 방금 HTML div 태그에 붙여넣은 코드를 래핑하는 것입니다. div 태그 코드에 포함된 클래스 속성은 연락처 양식이 페이지에서 올바르게 렌더링되도록 합니다.

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

<div class="form-vertical">

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

</div>

1. 저장을 클릭합니다.

제품에 새 템플릿 할당

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

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

2. 카트에 추가 버튼을 숨기려는 제품의 이름을 클릭합니다.

3. Shopify 관리자의 제품 페이지에 있는 온라인 스토어 아래의 테마 템플릿 드롭다운 메뉴에서 새 연락처 필요 템플릿을 선택합니다.

4. 저장을 클릭합니다.

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

Other

새 제품 템플릿 생성

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

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

iPhone

1. Shopify 앱에서 스토어를 탭합니다.

2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

3. 테마 관리를 탭합니다.

4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

Android

1. Shopify 앱에서 스토어를 탭합니다.

2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

3. 테마 관리를 탭합니다.

4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

1. 템플릿 디렉토리에서 새 템플릿 추가를 클릭합니다.

2. 제품 템플릿을 생성합니다.

   • 드롭다운 메뉴에서 제품을 선택합니다.
   • requires-contact 템플릿 이름을 지정합니다.
   • 템플릿 생성을 클릭합니다.

3. 다음 코드를 찾습니다.

{% section 'product-template' %}

다음으로 교체합니다.

{% section 'product-template-requires-contact' %}

이 코드는 다음 단계에서 생성할 새 제품 섹션과 새 템플릿을 연결합니다.

1. 저장을 클릭합니다.

새 제품 섹션 생성

1. 섹션 디렉토리에서 새로운 섹션 추가를 클릭합니다.

2. 섹션을 생성합니다.

   1. 새 섹션 product-template-requires-contact의 이름을 지정합니다.
   2. 섹션 생성을 클릭합니다.

3. 파일이 비어 있도록 섹션 파일에서 모든 기본 코드를 삭제합니다.

4. 섹션 디렉토리에서 product-template.liquid를 클릭합니다. 파일의 모든 콘텐츠를 클립보드에 복사합니다.

5. 새 product-template-requires-contact.liquid 섹션으로 돌아가서 파일에 코드를 붙여넣습니다.

6. 저장을 클릭합니다.

카트에 추가 버튼 숨기기

1. 새 product-template-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-formcart-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-formcart-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 %}

주의

제품 페이지에 대한 <form> 태그를 주석 처리하지 않도록 하십시오. 주석 태그는 모든 <form> 또는 </form>을 둘러싸지 말아야 합니다. 그렇지 않으면 고객이 제품 페이지를 볼 때 오류가 발생할 수 있습니다.

1. 저장을 클릭합니다.

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

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

이메일 링크

고객의 기본 이메일 프로그램을 여는 이메일 링크를 추가하고 수신자로 스토어의 고객용 이메일 주소를 입력할 수 있습니다. 이메일 링크를 추가하려면 다음을 수행하십시오.

1. 마지막 단계에서 추가한 Liquid {% endcomment %} 태그 아래의 새 행에 이메일 링크에 대한 HTML 코드를 추가합니다.

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

1. 저장을 클릭합니다.

연락처 양식

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

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

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

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

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

</div>

1. 저장을 클릭합니다.

제품에 새 템플릿 할당

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

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

2. 카트에 추가 버튼을 숨기려는 제품의 이름을 클릭합니다.

3. Shopify 관리자의 제품 페이지에 있는 온라인 스토어 아래의 테마 템플릿 드롭다운에서 새 연락처 필요 템플릿을 선택합니다.

4. 저장을 클릭합니다.

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

Non-sectioned themes

새 제품 템플릿 생성

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

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

iPhone

1. Shopify 앱에서 스토어를 탭합니다.

2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

3. 테마 관리를 탭합니다.

4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

Android

1. Shopify 앱에서 스토어를 탭합니다.

2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

3. 테마 관리를 탭합니다.

4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

1. 템플릿 디렉토리에서 새 템플릿 추가를 클릭합니다.
2. 제품 템플릿을 생성합니다.
   • 드롭다운 메뉴에서 제품을 선택합니다.
   • 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 %}

주의

제품 페이지에 대한 <form> 태그를 주석 처리하지 않도록 하십시오. 주석 태그는 모든 <form> 또는 </form>을 둘러싸지 말아야 합니다. 그렇지 않으면 고객이 제품 페이지를 볼 때 오류가 발생할 수 있습니다.

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

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