카트에 쇼핑 계속하기 링크 추가

카트 페이지에 쇼핑 계속하기 링크를 추가하면 고객이 카트에 제품을 추가한 후 쉽게 제품 검색으로 돌아갈 수 있습니다. 고객이 카탈로그 페이지로 돌아가거나 홈페이지로 돌아가거나 마지막으로 보고 있던 컬렉션 페이지로 돌아가는 링크를 추가할 수 있습니다.

쇼핑 계속하기

카트 페이지에 쇼핑 계속하기 링크 추가

쇼핑 계속하기 링크를 카트 페이지에 추가하는 방법은 다음과 같습니다.

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

  2. name="checkout"에 대한 파일을 검색하여 결제 버튼에 대한 코드를 찾습니다. 결제 버튼에 대한 코드 행은 테마별로 다르지만 다음과 같이 표시됩니다.

<button type="submit" id="checkout" name="checkout" class="btn">
  {{ 'cart.general.checkout' | t }}
</button>
  1. 다음 단계는 쇼핑 계속하기 링크를 생성하기 위해 새 코드 행을 붙여넣는 것입니다. 붙여넣은 코드는 링크를 통해 이동하려는 페이지에 따라 다릅니다.

카탈로그 페이지로 이동하는 링크의 경우

카탈로그 페이지로 이동하는 링크를 추가하려면 결제 버튼 코드 앞이나 뒤에 다음 코드를 새 행에 붙여넣으십시오.

<a href="/collections/all" title="Continue shopping">Continue shopping</a>

홈페이지로 이동하는 링크의 경우

홈페이지로 이동하는 링크를 추가하려면 결제 버튼 코드 앞이나 뒤에 다음 코드를 새 행에 붙여 넣으십시오.

<a href="/" title="Continue shopping">Continue shopping</a>

마지막으로 본 컬렉션으로 이동하는 링크의 경우

마지막으로 본 컬렉션으로 이동하는 링크를 추가하려면 결제 버튼 코드 앞이나 뒤에 다음 코드를 새 행에 붙여넣으십시오.

<a
  id="continue-shopping"
  href=""
  title="Continue shopping">
  Continue shopping
</a>
  1. 저장을 클릭합니다. 카탈로그 페이지나 홈페이지로 이동하는 링크를 추가한 경우 완료됩니다. 마지막으로 본 컬렉션으로 이동하는 링크를 추가한 경우 테마 코드에 JavaScript를 추가해야 합니다. 다음 단계를 계속 수행합니다.

  2. 레이아웃 디렉토리에서 theme.liquid을(를) 클릭합니다.

  3. 파일 아래쪽에서 닫는 </body> 태그를 찾습니다. 그리고 닫는 </body> 태그 위에 다음 태그를 붙여 넣습니다.

<script>
  if(Storage !== undefined) {

    var defaultLink = "/collections/all";

    {% if template contains 'collection' %}
      sessionStorage.collection = "{{ collection.url }}";
    {% endif %}

    {% if template contains 'cart' %}
      if( !sessionStorage.collection ) {
        sessionStorage.collection = defaultLink;
      }
      document.getElementById("continue-shopping").href = sessionStorage.collection;
    {% endif %}

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

버튼 스타일링 추가(선택 사항)

무료 Shopify 테마를 사용하는 경우 쇼핑 계속하기 링크에 스타일링을 적용하여 버튼처럼 보이게 할 수 있습니다. 버튼 링크 코드에 클래스 속성을 추가하여 버튼이 테마의 다른 버튼의 스타일과 일치하도록 만들 수 있습니다. 모든 무료 Shopify 테마는 기본 버튼 스타일에 같은 클래스 이름을 사용하며, 대부분의 경우 보조 버튼 스타일에 같은 클래스 이름을 사용합니다.

쇼핑 계속하기 링크에 기본 버튼 스타일링을 적용하려면 다음을 수행하십시오.

붙여넣은 코드 행에 class="btn" 속성을 추가하여 쇼핑 계속하기 링크를 추가합니다. 코드는 다음과 같이 보여야 합니다.

<a href="/collections/all" title="Continue shopping" class="btn">
  Continue shopping
</a>

쇼핑 계속하기 링크에 보조 버튼 스타일링을 적용하려면 다음을 수행하십시오.

참고: 이 클래스를 추가해도 Boundless에는 영향을 주지 않습니다.

Supply가 아닌 무료 테마를 사용하는 경우 붙여넣은 코드 행에 class="btn--secondary" 속성을 추가하여 쇼핑 계속하기 링크를 추가합니다. 코드는 다음과 같이 보여야 합니다.

<a href="/collections/all" title="Continue shopping" class="btn--secondary">
  Continue shopping
</a>

Supply를 사용하는 경우 붙여 넣은 코드 행에 class="btn-secondary" 속성을 추가하여 쇼핑 계속하기 링크를 추가합니다. 코드는 다음과 같이 표시됩니다.

<a href="/collections/all" title="Continue shopping" class="btn-secondary">
  Continue shopping
</a>

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

무료 체험