將「繼續購物」連結新增至購物車
此頁面列印時間為 Mar 19, 2024。如須最新版本,請至 https://help.shopify.com/zh-TW/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-back-link。
您可以將「繼續購物」連結新增至購物車頁面,讓顧客在將商品加入購物車後,快速返回並繼續瀏覽產品。您可以選擇新增連結,讓顧客返回目錄頁面、返回首頁,或返回他們最後查看的商品系列頁面。
將「繼續購物」連結新增至購物車頁面
- 在 Shopify 管理介面 中,前往「線上商店」>「佈景主題」。
- 找到要編輯的佈景主題,按一下「...」按鈕以開啟動作選單,然後點擊「編輯程式碼」。
- 在「區段」目錄中,點擊「
cart-template.liquid
」。如果您的佈景主題沒有此檔案,則可以在「範本」目錄中,點擊「cart.liquid
」。 - 在檔案中搜尋「
name="checkout"
」,以找到結帳頁面按鈕的程式碼。結帳頁面按鈕的程式碼行因佈景主題而異,但應類似下列所示:
5. 下一步是貼上新的程式碼行以建立「繼續購物」連結。您貼上的程式碼視連結欲導向至的頁面而定:* 若要新增連結導向至目錄頁面,請在結帳按鈕程式碼前方或後方新的一行,貼上下列程式碼:
- 若要新增導向至首頁的連結,請在「結帳」按鈕程式碼前後新的一行,貼上下列程式碼:
- 若要新增導向至最後檢視之商品系列的連結,請在「結帳」按鈕程式碼前後新的一行,貼上下列程式碼:
6. 點擊「儲存」。如果您新增導向至目錄頁面或首頁的連結,即表示已完成。如果您新增連結導向至最後檢視的商品系列,則需要將一些 JavaScript 新增至佈景主題程式碼。請繼續按照後續步驟操作。
7. 在「版面配置」目錄中,點擊「theme.liquid
」。
8. 在靠近檔案最下方,找到結束標籤 </body>
。在結束標籤 </body>
上方,貼上下列程式碼:
9. 點擊「儲存」。
- 在 Shopify 應用程式中,點選「…」按鈕。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「管理佈景主題」。
- 找到要編輯的佈景主題,按一下「...」按鈕以開啟動作選單,然後點擊「編輯程式碼」。
- 在「區段」目錄中,點擊「
cart-template.liquid
」。如果您的佈景主題沒有此檔案,則可以在「範本」目錄中,點擊「cart.liquid
」。 - 在檔案中搜尋「
name="checkout"
」,以找到結帳頁面按鈕的程式碼。結帳頁面按鈕的程式碼行因佈景主題而異,但應類似下列所示:
- 下一步是貼上新的程式碼行,以建立「繼續購物」連結。您貼上的程式碼視連結欲導向至的頁面而定:
- 若要新增導向至目錄頁面的連結,請在 **結帳** 按鈕程式碼前/後新的一行,貼上下列程式碼:
- 若要新增導向至首頁的連結,請在「結帳」按鈕程式碼前後新的一行,貼上下列程式碼:
- 若要新增導向至最後檢視之商品系列的連結,請在「結帳」按鈕程式碼前後新的一行,貼上下列程式碼:
- 點擊「儲存」。如果您新增導向至目錄頁面或首頁的連結,即表示已完成。如果您新增連結導向至最後檢視的商品系列,則需要將一些 JavaScript 新增至佈景主題程式碼。請繼續按照後續步驟操作。
- 在「版面配置」目錄中,按一下
theme.liquid
。 - 在靠近檔案最下方,找到結束標籤
</body>
。在結束標籤</body>
上方,貼上下列程式碼:
- 點擊「儲存」。
- 在 Shopify 應用程式中,點選「…」按鈕。
- 在銷售管道畫面上,點一下「線上商店」。
- 點一下「管理佈景主題」。
- 找到要編輯的佈景主題,按一下「...」按鈕以開啟動作選單,然後點擊「編輯程式碼」。
- 在「區段」目錄中,點擊「
cart-template.liquid
」。如果您的佈景主題沒有此檔案,則可以在「範本」目錄中,點擊「cart.liquid
」。 - 在檔案中搜尋「
name="checkout"
」,以找到結帳頁面按鈕的程式碼。結帳頁面按鈕的程式碼行因佈景主題而異,但應類似下列所示:
- 下一步是貼上新的程式碼行,以建立「繼續購物」連結。您貼上的程式碼視連結欲導向至的頁面而定:
- 若要新增導向至目錄頁面的連結,請在 **結帳** 按鈕程式碼前/後新的一行,貼上下列程式碼:
- 若要新增導向至首頁的連結,請在「結帳」按鈕程式碼前後新的一行,貼上下列程式碼:
- 若要新增導向至最後檢視之商品系列的連結,請在「結帳」按鈕程式碼前後新的一行,貼上下列程式碼:
- 點擊「儲存」。如果您新增導向至目錄頁面或首頁的連結,即表示已完成。如果您新增連結導向至最後檢視的商品系列,則需要將一些 JavaScript 新增至佈景主題程式碼。請繼續按照後續步驟操作。
- 在「版面配置」目錄中,按一下
theme.liquid
。 - 在靠近檔案最下方,找到結束標籤
</body>
。在結束標籤</body>
上方,貼上下列程式碼:
- 點擊「儲存」。
新增按鈕樣式 (選用)
如果您使用免費的 Shopify 佈景主題,則可以將樣式套用至「繼續購物」連結,使其看起來像一個按鈕。將類別屬性新增至按鈕連結的程式碼中,即可讓按鈕符合佈景主題中其他按鈕的樣式。所有免費的 Shopify 佈景主題之主要按鈕樣式皆使用相同的類別名稱,多數也使用相同類別名稱作為次要按鈕樣式。
若要將主要按鈕樣式套用至「繼續購物」連結:
新增屬性 class="btn"
至您貼上的程式碼行,以新增「繼續購物」的連結。您的程式碼應如下所示:
將次要按鈕樣式套用至「繼續購物」連結:
若您使用非 Supply 的免費佈景主題,請新增 class="btn--secondary"
屬性至您貼上的程式碼行,以新增「繼續購物」的連結。您的程式碼應如下所示:
若您使用 Supply,請新增 class="btn-secondary"
屬性至您貼上的程式碼行,以新增「繼續購物」的連結。您的程式碼應如下所示: