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

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

繼續購物

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

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

  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>

將次要按鈕樣式套用至「繼續購物」連結:

若您使用非 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 銷售商品了嗎?

免費試用