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

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

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

此頁面上

將「繼續購物」連結新增至購物車頁面
新增按鈕樣式 (選用)

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

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

在 Shopify 管理介面，前往「線上商店」>「佈景主題」。
找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

在 Shopify 應用程式中，點一下「商店」。
在銷售管道畫面上，點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

在 Shopify 應用程式中，點一下「商店」。
在銷售管道畫面上，點一下「線上商店」。
點一下「管理佈景主題」。
找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

在「區段」目錄中，點擊「cart-template.liquid」。如果您的佈景主題沒有此檔案，則可以在「範本」目錄中，點擊「cart.liquid」。
在檔案中搜尋「name="checkout"」，以找到結帳頁面按鈕的程式碼。結帳頁面按鈕的程式碼行因佈景主題而異，但應類似下列所示：

<button type="submit" id="checkout" name="checkout" class="btn">
  {{ 'cart.general.checkout' | t }}
</button>

下一步是貼上新的程式碼行，以建立「繼續購物」連結。您貼上的程式碼視連結欲導向至的頁面而定：

若要新增導向至目錄頁面的連結，請在「結帳」按鈕程式碼前後新的一行，貼上下列程式碼：

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

點擊「儲存」。如果您新增導向至目錄頁面或首頁的連結，即表示已完成。如果您新增連結導向至最後檢視的商品系列，則需要將一些 JavaScript 新增至佈景主題程式碼。請繼續按照後續步驟操作。
在「版面配置」目錄中，按一下 theme.liquid。
在靠近檔案最下方，找到結束標籤 </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>

點擊「儲存」。

新增按鈕樣式 (選用)

如果您使用免費的 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 銷售商品了嗎？