Debut
Debut 的步驟
Debut 佈景主題 12.1.0 和以上的版本可以使用單價功能。如果您無法將佈景主題更新為最新版本,則可以新增單價自訂內容至舊版的 Debut。
編輯商品價格程式碼片段
在「程式碼片段」目錄中,按一下「product-price.liquid
」檔案。
使用「查詢鍵盤快捷鍵」功能,搜尋「data-price
」並找出以下程式碼:
- 用以下程式碼片段取代該程式碼:
編輯後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」功能,搜尋「
price__sale
」並找出以下程式碼:
- 在
</div>
結束標籤下方新增以下程式碼:
- 按一下「儲 存」來確認變更內容。
編輯購物車頁面
在「區段」目錄中,按一下 cart-template.liquid
檔案。
使用「查詢鍵盤快捷鍵」功能,搜尋「cart__price-wrapper
」並找出以下程式碼:
- 用以下程式碼片段取代該程式碼:
編輯完成後,cart-template.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯商品系列頁面
在「區段」目錄中,按一下 collection.liquid
檔案。
使用「查詢鍵盤快捷鍵」功能,搜尋「grid-view-item__title
」並找出以下程式碼:
- 用以下程式碼片段取代該程式碼:
編輯完成後,collection.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯產品卡方格項目
在「程式碼片段」目錄中,按一下「product-card-grid.liquid
」檔案。
使用「查詢鍵盤快捷鍵」功能,搜尋「grid-view-item__title
」並找出以下程式碼:
- 用以下程式碼片段取代該程式碼:
編輯完成後,product-card-grid.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯產品卡清單
在「程式碼片段」目錄中,按一下「product-card-list.liquid
」檔案。
使用「查詢鍵盤快捷鍵」功能,搜尋「{% if product.available %}
」並找出以下程式碼:
- 用以下程式碼片段取代該程式碼:
編輯完成後,product-card-list.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯訂單頁面
在「範本」目錄中,按一下「customers/order.liquid
」檔案。
使用「查詢鍵盤快捷鍵」功能,搜尋「data-label="{{ 'customer.order.price' | t }}"
」並找出以下程式碼:
- 用以下程式碼片段取代該程式碼:
編輯完成後,customers/order.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯佈景主題樣式
在「資產」目錄中,按一下「theme.scss.liquid
」檔案。
使用「查詢鍵盤快捷鍵」功能,搜尋「.price__vendor {
」並找出以下程式碼:
- 在步驟 2 的程式碼下方新增以下程式碼片段:
編輯完成後,theme.scss.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯 JavaScript 佈景主題程式碼
在「資產」目錄中,按一下「theme.js
」檔案。
使用「查詢鍵盤快捷鍵」功能,找出以下程式碼:
- 在步驟 2 的程式碼上新增以下程式碼片段:
編輯後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」功能,找出以下程式碼:
- 在步驟 4 的程式碼後方新增以下程式碼片段:
編輯後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」功能,找出以下程式碼:
- 用以下程式碼片段取代該程式碼:
- 使用「查詢鍵盤快捷鍵」功能,找出以下程式碼:
- 在步驟 8 的程式碼下方新增以下程式碼片段:
- 使用「查詢鍵盤快捷鍵」功能,找出以下程式碼:
- 在步驟 10 的程式碼下方新增以下程式碼片段:
編輯後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」功能,找出以下程式碼:
- 在步驟 12 的程式碼前方新增以下程式碼片段:
- 使用「查詢鍵盤快捷鍵」功能,找出以下程式碼:
- 在步驟 14 的程式碼下方新增以下程式碼片段:
- 使用「查詢鍵盤快捷鍵」功能,找出以下程式碼:
- 在步驟 16 的程式碼下方新增以下程式碼片段:
- 使用「查詢鍵盤快捷鍵」功能,找出以下程式碼:
- 在步驟 18 的程式碼下方新增以下程式碼片段:
編輯後,結果應如下所示:
- 按一下「儲存」來確認變更內容。
編輯英文翻譯
在「語言代碼」目錄中,按一下「en.default.json
」檔案。
使用「查詢鍵盤快捷鍵」功能,找出以下程式碼:
- 在步驟 2 的程式碼上新增以下程式碼片段:
編輯後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」功能,找出以下程式碼:
- 在步驟 4 的程式碼下方新增以下程式碼片段:
編輯後,結果應如下所示:
- 按一下「儲存」來確認變更內容。
編輯佈景主題版面配置
在版面配置目錄中,按一下 「theme.liquid
」 檔案。
使用「查詢鍵盤快捷鍵」功能,找出以下程式碼:
- 在步驟 2 的程式碼下方新增以下程式碼片段:
編輯完成後,theme.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
(選用) 為其他語言新增翻譯
在 Shopify 管理介面 中,前往「佈景主題」頁面。
點擊「...」按鈕 >「編輯預設佈景主題內容」。
點擊「變更佈景主題語言」,然後選取您要編輯的語言。此操作僅能在您已發佈的佈景主題上進行。
在搜尋欄輸入 Unit Price
。
在「一般 / 無障礙功能」下方更新單價分隔符號。
在「產品 (複數) / 產品」下方更新單價標籤。
按一下「儲存」。
Brooklyn
Brooklyn 的步驟
Brooklyn 佈景主題 13.1.0 和以上的版本可以使用單價功能。如果您無法將佈景主題更新為最新版本,則可以新增單價自訂內容至舊版的 Brooklyn。
新增商品價格程式碼片段
在「程式碼片段」目錄中,按一下「新增程式碼片段」。
在名稱欄位中輸入 product-price
。
複製貼上以下程式碼至檔案中。
- 按一下「儲存」來確認變更內容。
編輯精選產品頁面
在「區段」目錄中,按一下 featured-product.liquid
檔案。
使用「查詢鍵盤快捷鍵」功能,搜尋「itemprop="offers"
」並找出以下程式碼:
- 用以下程式碼片段取代該程式碼:
編輯完成後,featured-product.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯產品頁面
在「區段」目錄中,按一下 product-template.liquid
檔案。
使用「查詢鍵盤快捷鍵」功能,搜尋「itemprop="offers"
」並找出以下程式碼:
- 用以下程式碼片段取代該程式碼:
編輯完成後,product-template.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯 ajax 購物車
在「程式碼片段」目錄中,按一下「ajax-cart-template.liquid
」檔案。
使用「查詢鍵盤快捷鍵」功能,搜尋 「<span class="ajaxcart__price">{{{price}}}</span>
」並找出以下程式碼:
- 在步驟 2 的
{{/if}}
下方新增以下程式碼:
編輯完成後,ajax-cart-template.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯產品方格項目
在「程式碼片段」目錄中,按一下「product-grid-template.liquid
」檔案。
使用「查詢鍵盤快捷鍵」功能,搜尋「capture img_id_class
」並找出以下程式碼:
- 在步驟 2 中的程式碼前方新增以下程式碼片段:
編輯後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」功能,搜尋「
{{ product.price | money_without_trailing_zeros }}
」並找出以下程式碼:
- 在
</span>
下方新增以下程式碼:
編輯後,結果應如下所示:
- 按一下「儲存」來確認變更內容。
編輯購物車頁面
在「範本」目錄中,按一下「cart.liquid
」檔案。
使用「查詢鍵盤快捷鍵」功能,搜尋「<span class="cart__price">
」並找出以下程式碼:
- 在步驟 2 的程式碼下方新增以下程式碼片段:
編輯完成後,cart.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯訂單頁面
在「範本」目錄中,按一下「customers/order.liquid
」檔案。
使用「查詢鍵盤快捷鍵」功能,搜尋「{{ line_item.original_price | money }}
」並找出以下程式碼:
- 在步驟 2 的
</td>
之前新增以下程式碼片段:
編輯完成後,customers/order.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯佈景主題樣式 - 第 1 部分
在「資產」目錄中,按一下「theme.scss.liquid
」檔案。
使用「查詢鍵盤快捷鍵」功能,搜尋「.ajaxcart__price {
」並找出以下程式碼:
- 在步驟 2 的程式碼下方新增以下程式碼片段:
編輯完成後,theme.scss.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯佈景主題樣式 - 第 2 部分
在「資產」目錄中,按一下「timber.scss.liquid
」檔案。
使用「查詢鍵盤快捷鍵」功能,搜尋「.product-single__policies {
」並找出以下程式碼:
- 在步驟 2 的程式碼上新增以下程式碼片段:
編輯後,結果應如下所示:
- 前往檔案最下方,並新增以下程式碼:
編輯後,結果應如下所示:
- 按一下「儲存」來確認變更內容。
編輯 JavaScript 佈景主題程式碼
在「資產」目錄中,按一下「theme.js.liquid
」檔案。
使用「查詢鍵盤快捷鍵」功能,找出以下程式碼:
- 在步驟 2 的程式碼下方新增以下程式碼片段:
編輯後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」功能,找出以下程式碼:
- 在步驟 4 的程式碼上新增以下程式碼片段:
編輯後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」功能,找出以下程式碼:
- 在步驟 6 的程式碼上新增以下程式碼片段:
編輯後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」功能,找出以下程式碼:
- 在步驟 8 的程式碼下方新增以下程式碼片段:
編輯後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」功能,搜尋「
$(this.selectors.priceContainer, this.$container).removeClass(
」並找出以下程式碼:
- 用以下程式碼片段取代該程式碼:
編輯後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」功能,找出以下程式碼:
- 在步驟 12 的程式碼上新增以下程式碼片段:
編輯後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」功能,搜尋「
this.destroyImageCarousel();
」並找出以下程式碼:
- 在步驟 14 的程式碼上新增以下程式碼片段:
編輯後,結果應如下所示:
- 按一下「儲存」來確認變更內容。
編輯英文翻譯
在「語言代碼」目錄中,按一下「en.default.json
」檔案。
使用「查詢鍵盤快捷鍵」功能,找出以下程式碼:
- 在步驟 2 的程式碼上新增以下程式碼片段:
編輯後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」功能,找出以下程式碼:
- 在步驟 4 的程式碼下方新增以下程式碼片段:
編輯後,結果應如下所示:
- 按一下「儲存」來確認變更內容。
(選用) 為其他語言新增翻譯
在 Shopify 管理介面 中,前往「佈景主題」頁面。
點擊「...」按鈕 >「編輯預設佈景主題內容」
點擊「變更佈景主題語言」,然後選取您要編輯的語言。此操作僅能在您已發佈的佈景主題上進行。
在搜尋欄輸入 Unit Price
。
在「一般 / 無障礙功能」下方更新單價分隔符號。
在「產品 / 一般」下方更新單價標籤。
按一下「儲存」。
Minimal
Minimal 的步驟
Minimal 佈景主題 11.1.0 和以上的版本可以使用單價功能。如果您無法將佈景主題更新為最新版本,則可以新增單價自訂內容至舊版的 Minimal。
更新程式碼片段
找出並展開「程式碼片段」資料夾。
選取「新增程式碼片段」。
輸入名稱 product-unit-price
。
在 product-unit-price.liquid
複製並貼上以下程式碼。
按一下「儲存」。
找出並編輯檔案 product-grid-item.liquid
。
請取代這行:
取代為這行:
- 使用「查詢鍵盤快捷鍵」功能,找出
{{ price }}
,並新增下方程式碼:
編輯完成後,product-grid-item.liquid
檔案應如下所示:
按一下「儲存」來確認變更內容。
找出並編輯檔案 search-result.liquid
使用「查詢鍵盤快捷鍵」功能,找出 {% if item.object_type == 'product' %}
,並在該行下方新增以下程式碼:
- 現在使用「查詢鍵盤快捷鍵」功能,找出下列兩個程式碼片段:
和
- 在前一步驟列出的兩個程式碼下方 皆 新增以下程式碼區段:
編輯完成後,search-result.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
更新樣式
找出並展開「資產」資料夾。
編輯檔案 theme.scss.liquid
。
使用查詢鍵盤快捷鍵功能找出此程式碼區塊:
- 在上個步驟中找到的程式碼片段下方插入以下程式碼區塊:
- 使用「查詢鍵盤快捷鍵」功能,找出以下程式碼片段:
- 在上個步驟中找到的程式碼片段下方插入以下程式碼區塊:
- 使用「查詢鍵盤快捷鍵」功能,找出以下程式碼片段:
- 在上個步驟中找到的程式碼片段下方插入以下程式碼區塊:
- 使用「查詢鍵盤快捷鍵」功能,找出以下程式碼片段:
- 在上個步驟中找到的程式碼片段下方插入以下程式碼區塊:
編輯完成後,theme.scss.liquid
檔案應如下所示:
按一下「儲存」來確認變更內容。
找出並編輯檔案 timber.scss.liquid
。
使用「查詢鍵盤快捷鍵」功能,找出此程式碼:
- 在上個步驟中找到的程式碼片段下方插入以下程式碼區塊:
- 在檔案最下方插入此程式碼:
編輯完成後,timber.scss.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
更新範本
找出並展開「範本」資料夾。
找出並編輯檔案 customers/order.liquid
。
使用「查詢鍵盤快捷鍵」功能,找出此程式碼:
- 在步驟 3 的程式碼下方新增此程式碼:
編輯完成後,customers/order.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
更新 JavaScript
在「資產」中找出並編輯 theme.js
。
使用「查詢鍵盤快捷鍵」功能,找出 .shopify-payment-button
這一行,並將它取代為:
該程式碼區塊應如下所示:
- 找出此程式碼:
- 在其下方新增此程式碼:
結果應如下所示:
- 使用「