將「繼續購物」連結新增至購物車

此頁面列印時間為 Apr 19, 2024。如須最新版本，請至 https://help.shopify.com/zh-TW/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-back-link。

您可以將「繼續購物」連結新增至購物車頁面，讓顧客在將商品加入購物車後，快速返回並繼續瀏覽產品。您可以選擇新增連結，讓顧客返回目錄頁面、返回首頁，或返回他們最後查看的商品系列頁面。

繼續購物

此頁面上

將「繼續購物」連結新增至購物車頁面

  1. 在 Shopify 管理介面 中，前往「線上商店」>「佈景主題」。
  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 銷售商品了嗎？

免費試用