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

이 페이지는 Oct 04, 2024에 인쇄되었습니다. 최신 버전은 https://help.shopify.com/ko/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-back-link에서 확인하십시오.

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

쇼핑 계속하기

이 페이지의 정보

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

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
  2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  3. 섹션 디렉토리에서 cart-template.liquid을(를) 클릭합니다. 테마에서 이 파일을 찾을 수 없는 경우에는 템플릿 디렉토리의 cart.liquid을(를) 클릭합니다.
  4. name="checkout"에 대한 파일을 검색하여 결제 버튼에 대한 코드를 찾습니다. 결제 버튼에 대한 코드 행은 테마별로 다르지만 다음과 같이 표시됩니다. 
<button type="submit" id="checkout" name="checkout" class="btn">
   {{ 'cart.general.checkout' | t }}
</button>

 5. 다음 단계는 쇼핑 계속하기 링크를 생성하기 위해 새 코드 행을 붙여넣는 것입니다. 붙여넣은 코드는 링크를 통해 이동하려는 페이지에 따라 다릅니다. * 카탈로그 페이지로 이동하는 링크를 추가하려면 결제 버튼 코드 앞이나 뒤의 새 행에 다음 코드를 붙여넣으세요.

<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>

 6. 저장을 클릭합니다. 카탈로그 페이지나 홈페이지로 이동하는 링크를 추가한 경우 완료됩니다. 마지막으로 본 컬렉션으로 이동하는 링크를 추가한 경우 테마 코드에 JavaScript를 추가해야 합니다. 다음 단계를 계속 수행합니다.

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

 8. 파일 아래쪽에서 닫는 </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>

 9. 저장을 클릭합니다.

  1. Shopify 앱에서 … 버튼을 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  5. 섹션 디렉토리에서 cart-template.liquid을(를) 클릭합니다. 테마에서 이 파일을 찾을 수 없는 경우에는 템플릿 디렉토리의 cart.liquid을(를) 클릭합니다.
  6. 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. 저장을 클릭합니다.
  1. Shopify 앱에서 … 버튼을 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  5. 섹션 디렉토리에서 cart-template.liquid을(를) 클릭합니다. 테마에서 이 파일을 찾을 수 없는 경우에는 템플릿 디렉토리의 cart.liquid을(를) 클릭합니다.
  6. 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>

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

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와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험