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

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

此頁面上

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

電腦版

在 Shopify 管理介面中，前往「網路商店」>「佈景主題」。
找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
在「區段」目錄中，點擊「cart-template.liquid」。如果您的佈景主題沒有此檔案，則可以在「範本」目錄中，點擊「cart.liquid」。
在檔案中搜尋「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 = &#x22;/collections/all&#x22;;

{% if template contains &#x27;collection&#x27; %}
  sessionStorage.collection = &#x22;{{ collection.url }}&#x22;;
{% endif %}

{% if template contains &#x27;cart&#x27; %}
  if( !sessionStorage.collection ) {
    sessionStorage.collection = defaultLink;
  }
  document.getElementById(&#x22;continue-shopping&#x22;).href = sessionStorage.collection;
{% endif %}

}
</script>

9. 點擊「儲存」。

iPhone

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

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

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

var defaultLink = &#x22;/collections/all&#x22;;

{% if template contains &#x27;collection&#x27; %}
  sessionStorage.collection = &#x22;{{ collection.url }}&#x22;;
{% endif %}

{% if template contains &#x27;cart&#x27; %}
  if( !sessionStorage.collection ) {
    sessionStorage.collection = defaultLink;
  }
  document.getElementById(&#x22;continue-shopping&#x22;).href = sessionStorage.collection;
{% endif %}

}
</script>

按一下「儲存」。

Android

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

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

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

var defaultLink = &#x22;/collections/all&#x22;;

{% if template contains &#x27;collection&#x27; %}
  sessionStorage.collection = &#x22;{{ collection.url }}&#x22;;
{% endif %}

{% if template contains &#x27;cart&#x27; %}
  if( !sessionStorage.collection ) {
    sessionStorage.collection = defaultLink;
  }
  document.getElementById(&#x22;continue-shopping&#x22;).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>