카트에 추가 버튼 숨기기
이 페이지는 Oct 03, 2024에 인쇄되었습니다. 최신 버전은 https://help.shopify.com/ko/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/hide-add-to-cart-buttons에서 확인하십시오.
상점에서 카트에 추가 버튼을 숨기고 향후 다시 표시할 수 있습니다.
주의
이것은 고급 튜토리얼이며 Shopify에서 지원하지 않습니다. HTML, CSS, JavaScript, Liquid와 같은 웹 디자인 언어 관련 지식이 필요합니다. 튜토리얼의 단계를 따르기 어려운 경우 Shopify 파트너를 고용 하는 것이 좋습니다.
주의
테마 스토어에서는 빈티지 테마를 사용할 수 없습니다. 빈티지 테마에는 Shopify Online Store 2.0 테마 에 포함된 기능이 없으며, Shopify 무료 빈티지 테마는 보안 수정을 제외한 업데이트가 제공되지 않습니다.
참고 사항
이 사용자 지정은 빈티지 Shopify 테마용으로, Online Store 2.0 테마에는 적용되지 않습니다.
섹션 지원 및 섹션 미지원 테마
참고 사항
이 튜토리얼의 단계는 섹션 포함 테마인지 섹션 구분되지 않은 테마인지에 따라 다릅니다. 섹션 포함 테마에서는 끌어서 놓기 방식으로 홈페이지 레이아웃을 수정할 수 있으며, 섹션 구분되지 않은 테마에서는 해당 작업을 수행할 수 없습니다.
사용하는 테마에서 섹션을 지원하는지 확인하려면 코드 편집 페이지로 이동합니다. 섹션을 지원하는 테마를 사용하는 경우에는 섹션 디렉토리에서 파일을 찾아볼 수 있습니다. 2016년 10월 이전에 출시된 테마는 섹션을 지원하지 않으며 섹션 디렉토리에 파일이 없습니다.
섹션을 지원하는 테마를 사용하는 경우 섹션 지원 테마 버튼을 클릭한 다음 안내를 따릅니다. 섹션을 지원하지 않는 구형 테마를 사용하는 경우 섹션 미지원 테마 버튼을 클릭한 다음 안내를 따릅니다.
Shopify Admin에서 온라인 스토어 > 테마 로 이동합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집 을 클릭합니다.
섹션 디렉토리에서 product-template.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>
코드를 찾으면 Liquid {% comment %}
및 {% endcomment %}
태그로 둘러쌉니다. 이렇게 하면 스토어에 코드가 표시되지 않지만 나중에 새 템플릿을 변경하려는 경우 코드를 보다 쉽게 다시 넣을 수 있습니다.
위의 예제를 사용한 새 코드는 다음과 같습니다.
{% 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>
을 둘러싸지 말아야 합니다. 그렇지 않으면 고객이 제품 페이지를 볼 때 오류가 발생할 수 있습니다.
저장 을 클릭하여 변경 사항을 확인합니다.
카트에 추가 버튼을 다시 표시할 준비가 되면 HTML/CSS 페이지 편집 의 product-template.liquid
파일로 돌아가서 {% comment %}
및 {% endcomment %}
태그를 제거하고 저장 을 클릭합니다.
Shopify Admin에서 온라인 스토어 > 테마 로 이동합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집 을 클릭합니다.
템플릿 디렉토리에서 product.liquid
파일을 클릭하여 엽니다. 카트에 추가 버튼에 해당하는 HTML 코드를 찾습니다 . 카트(cart) 라는 단어를 사용하여 검색을 시작할 수 있습니다.
카트에 추가 버튼의 코드는 테마별로 다릅니다. Add to cart
, AddToCart
또는 add-to-cart
같은 텍스트가 있는 <input>
또는 <button>
태그를 찾습니다.
Minimal 테마에서 카트에 추가 버튼 코드는 다음과 같이 표시됩니다.
<button type="submit" name="add" id="AddToCart" class="btn">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }} </span>
</button>
코드를 찾으면 Liquid {% comment %}
및 {% endcomment %}
태그로 둘러쌉니다. 이렇게 하면 스토어에 코드가 표시되지 않지만 나중에 새 템플릿을 변경하려는 경우 코드를 보다 쉽게 다시 넣을 수 있습니다.
위의 예제를 사용한 새 코드는 다음과 같습니다.
{% comment %}
<button type="submit" name="add" id="AddToCart" class="btn">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% endcomment %}
주의
제품 페이지에 대한 <form>
태그를 주석 처리하지 않도록 하십시오. 주석 태그는 모든 <form>
또는 </form>
을 둘러싸지 말아야 합니다. 그렇지 않으면 고객이 제품 페이지를 볼 때 오류가 발생할 수 있습니다.
저장 을 클릭하여 변경 사항을 확인합니다.
카트에 추가 버튼을 다시 표시할 준비가 되면 HTML/CSS 페이지 편집 의 product.liquid
템플릿으로 돌아가서 {% comment %}
및 {% endcomment %}
태그를 제거하고 저장 을 클릭합니다.