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 佈景主題 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 佈景主題 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
這一行,並將它取代為:
該程式碼區塊應如下所示:
- 找出此程式碼:
- 在其下方新增此程式碼:
結果應如下所示:
- 使用「查詢鍵盤快捷鍵」功能,找出此程式碼:
- 在上個步驟中找到的程式碼片段下方插入以下程式碼區塊:
結果應如下所示:
- 按一下「儲存」來確認變更內容。
更新購物車範本
找出並展開的「區段」資料夾。
編輯檔案 cart-template.liquid
。
使用查詢鍵盤快捷鍵功能找出程式碼 <span class="order-discount h5">{{ item.final_price | money }}</span>
。
用此程式碼取代這一行:
- 找到程式碼的第一項目
{%- if item.line_level_discount_allocations != blank -%}
:
- 在步驟 5 的程式碼上方新增此程式碼區塊:
編輯完成後,cart-template.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
更新精選產品
找出並展開的「區段」資料夾。
編輯檔案 featured-product.liquid
。
使用「查詢鍵盤快捷鍵」功能,找出 itemprop="name"
這一行,並將它取代為:
- 找出包含
id="PriceA11y"
的程式碼:
- 在上個步驟中找到的程式碼片段下方插入以下程式碼區塊:
編輯完成後,featured-product.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
更新產品範本
找出並展開的「區段」資料夾。
編輯檔案 product-template.liquid
。
使用「查詢鍵盤快捷鍵」功能,找出 itemprop="name"
這一行,並將它取代為:
- 使用「查詢鍵盤快捷鍵」功能,找出此程式碼:
- 新增以下這行:
編輯完成後,product-template.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
更新語言代碼
找出並展開「語言代碼」資料夾。
開啟並編輯 en.default.json
檔案。
使用「查詢鍵盤快捷鍵」功能,找出 refresh_page
這一行,並將它取代為:
結果應如下所示:
- 找出包含
full_details
的這一行,並將它取代為:
結果應如下所示:
- 按一下「儲存」來確認變更內容。
(選用) 為其他語言新增翻譯
在 Shopify 管理介面 中,前往「佈景主題」頁面。
點擊「...」按鈕 >「編輯預設佈景主題內容」。
點擊「變更佈景主題語言」,然後選取您要編輯的語言。此操作僅能在您已發佈的佈景主題上進行。
在搜尋欄輸入 Unit Price
。
在「一般 / 無障礙功能」下方更新單價分隔符號。
在「產品 (複數) / 產品」下方更新單價標籤。
按一下「儲存」。
Venture 的步驟
單價功能已新增至 Venture 佈景主題 9.4.0 和以上的版本。如果您無法將佈景主題更新為最新版本,請依照這些步驟將單價自訂內容套用至舊版的 Venture。
編輯佈景主題語言檔案
在「語言代碼」目錄中,按一下「en.default.json
」。
使用「查詢鍵盤快捷鍵」,找出包含 refresh_page
的這一行:
- 在步驟 2 的的這一行上方新增以下程式碼:
編輯完成後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」,找出包含
stock_unavailable
的這一行:
- 在步驟 4 的的這一行上方新增以下程式碼:
編輯完成後,結果應如下所示:
- 按一下「儲存」來確認變更內容。
編輯佈景主題樣式表
在「資產」目錄中,按一下 theme.scss.liquid
。
使用「查詢鍵盤快捷鍵」功能,找出這一行 .product-single__policies {
:
- 在步驟 2 的程式碼區塊
}
結束標籤下方新增以下程式碼:
編輯完成後,theme.scss.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
新增產品單價程式碼片段
在「程式碼片段」目錄中,按一下「新增程式碼片段」。
輸入名稱 product-unit-price
。
將以下程式碼新增到 product-unit-price.liquid
:
- 按一下「儲存」來確認變更內容。
編輯產品卡程式碼片段
在「程式碼片段」目錄中,按一下「product-card.liquid
」。
使用「查詢鍵盤快捷鍵」功能,找出這一行 <a href="{{ product.url | within: collection }}"
。
在步驟 2 的的這一行上方新增以下程式碼:
編輯完成後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」功能,找出這一行
<div class="product-card__price">
:
- 在步驟 5 的
</div>
結尾標籤上方新增以下程式碼:
編輯完成後,結果應如下所示:
- 按一下「儲存」來確認變更內容。
編輯購物車頁面範本
在「區段」目錄中,按一下 cart-template.liquid
。
使用「查詢鍵盤快捷鍵」,找出 <td class="cart__cell--total">
第一次出現的地方:
- 在步驟 2 的
endif
結尾標籤下方新增以下程式碼:
編輯完成後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」,找出
<td class="cart__cell--total">
第二次出現的地方:
- 在步驟 4 的
{{/if}}
結尾標籤下方新增以下程式碼:
編輯完成後,結果應如下所示:
- 按一下「儲存」來確認變更內容。
編輯精選產品頁面範本
在「區段」目錄中,按一下 featured-product.liquid
。
使用「查詢鍵盤快捷鍵」功能,找出這一行 {% assign current_variant = product.selected_or_first_available_variant %}
。
在步驟 2 的這一行下方新增以下程式碼:
編輯完成後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」,找出包含
<ul class="product-single__meta-list
的這一行:
在此 ul
標籤下方,找出程式碼 {% if section.settings.stock_enable %}
。
在步驟 6 的 if
區塊上方新增以下程式碼:
編輯完成後,結果應如下所示:
- 按一下「儲存」來確認變更內容。
編輯產品頁面範本
在「區段」目錄中,按一下 product-template.liquid
。
使用「查詢鍵盤快捷鍵」功能,找出這一行 {% assign current_variant = product.selected_or_first_available_variant %}
。
在步驟 2 的這一行下方新增以下程式碼:
編輯完成後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」,找出包含
<ul class="product-single__meta-list
的這一行:
在此 ul
標籤下方,找出程式碼 {% if section.settings.stock_enable %}
。
在步驟 5 的 if
區塊上方新增以下程式碼:
編輯完成後,結果應如下所示:
- 按一下「儲存」來確認變更內容。
編輯客戶的訂單範本
在「範本」目錄中,按一下「customers/order.liquid
」。
使用「查詢鍵盤快捷鍵」功能,找出這一行 <td class="text-right" data-label="{{ 'customer.order.price' | t }}">
:
- 將步驟 2 中的程式碼取代為以下程式碼:
編輯完成後,customers/order.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯您佈景主題的 JavaScipt 檔案
在「資產」目錄中,按一下 theme.js
。
使用「查詢鍵盤快捷鍵」功能,找出這一行 // Create item's data object and add to 'items' array
。
在步驟 2 的的這一行上方新增以下程式碼:
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵」功能,找出這一行 vendor: cartItem.vendor,
在步驟 4 的這一行下方新增以下程式碼:
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵」功能,找出這一行 shopifyPaymentButton: '.shopify-payment-button'
。
將步驟 6 中的這一行取代為以下程式碼:
編輯完成後,結果應如下所示:
使用「查詢鍵盤快捷鍵」功能,找出這一行 _updateSKU: function(evt) {
。
在步驟 8 的這一行上方新增以下程式碼:
編輯完成後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」功能,找出這一行
this._updateIncomingInfo(variant);
:
- 在步驟 10 的
}
結尾標籤下方新增以下程式碼:
編輯完成後,結果應如下所示:
- 按一下「儲存」來確認變更內容。
(選用) 為其他語言新增翻譯
在 Shopify 管理介面 中,前往「佈景主題」頁面。
點擊「...」按鈕 >「編輯預設佈景主題內容」。
點擊「變更佈景主題語言」,然後選取您要編輯的語言。此操作僅能在您已發佈的佈景主題上進行。
在搜尋欄輸入 Unit Price
。
在「一般 / 無障礙功能」下方更新單價分隔符號。
在「產品 (複數) / 產品」下方更新單價標籤。
按一下「儲存」。
Supply 的步驟
單價功能已新增至 Supply 佈景主題 8.3.0 和以上的版本。如果您無法將佈景主題更新為最新版本,請依照這些步驟將單價自訂內容套用至舊版的 Supply。
新增產品單價程式碼片段
找出並展開程式碼片段資料夾。
選取「新增程式碼片段」。
輸入名稱 product-unit-price
。
複製貼上以下程式碼至檔案中,並選取「儲存」。
編輯完成後,product-unit-price.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯精選產品範本
找出並展開的「區段」資料夾,然後選取「featured-product.liquid
」檔案。
使用「查詢鍵盤快捷鍵」功能,找出檔案中的這一行 {% include 'price' with price %}
。
- 在步驟 2 的
</span>
程式碼片段結尾下方新增以下程式碼:
編輯完成後,featured-product.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯產品範本
找出並展開的「區段」資料夾,然後選取「product-template.liquid
」檔案。
使用「查詢鍵盤快捷鍵」功能,找出檔案中的這一行 {% include 'price' with variant.price %}
。
- 在步驟 2 的
</span>
結尾下方新增以下程式碼:
編輯完成後,product-template.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯產品格狀項目程式碼片段
找出並展開「程式碼片段」資料夾,然後選取 product-grid-item.liquid
檔案。
使用「查詢鍵盤快捷鍵」功能,找出檔案中的這一行 {% if on_sale and section.settings.product_show_saved_amount %}
。
- 用以下程式碼片段取代該程式碼:
編輯完成後,product-grid-item.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯產品清單項目程式碼片段
找出並展開「程式碼片段」資料夾,然後選取 product-list-item.liquid
檔案。
使用「查詢鍵盤快捷鍵」功能,找出檔案中的這一行 <div class="product-item--price text-center">
:
- 用以下程式碼片段取代該程式碼:
編輯完成後,product-list-item.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯搜尋結果方格程式碼片段
找出並展開「程式碼片段」資料夾,然後選取 search-result-grid.liquid
檔案。
使用「查詢鍵盤快捷鍵」功能,找出檔案中的這一行 {% if on_sale and section.settings.product_show_saved_amount %}
。
- 用以下程式碼片段取代該程式碼:
編輯完成後,search-result-grid.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯購物車範本
找出並展開「範本」資料夾,然後選取 cart.liquid
檔案。
使用「查詢鍵盤快捷鍵」功能,找出檔案中的這一行 <del class="cart-original-price order-discount--cart-price">
:
- 用以下程式碼片段取代該程式碼:
編輯完成後,cart.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯訂單範本
找出並展開「範本」資料夾,然後選取 customers/order.liquid
檔案。
使用「查詢鍵盤快捷鍵」功能,找出檔案中的這一行 <td class="text-right" data-label="customer.order.price">
:
- 在步驟 2 的
</td>
結尾上方新增以下程式碼:
編輯完成後,customers/order.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯佈景主題版面配置
找出並展開「版面配置」資料夾,然後選取 theme.liquid
檔案。
使用「查詢鍵盤快捷鍵」功能,找出檔案中包含 only_left:
的這一行:
- 在步驟 2 的
only_left:{{ 'products.product.only_left' | t: count: '1' | json }}
上方新增以下程式碼:
編輯完成後,theme.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯佈景主題樣式
找出並展開的「區段」資料夾,然後選取「theme.scss.liquid
」檔案。
使用「查詢鍵盤快捷鍵」功能,找出檔案中的這一行 .product-item--price {
:
- 用以下程式碼片段取代該程式碼:
編輯完成後,theme.scss.liquid
檔案應如下所示:
- 按一下「儲存」來確認變更內容。
編輯 JavaScript 佈景主題程式碼
找出並展開「資產」資料夾中,然後選取 theme.js.liquid
檔案。
使用「查詢鍵盤快捷鍵」功能,找出檔案中的這一行 originalSelectorId: 'productSelect-' + sectionId,
:
- 在步驟 2 的
originalSelectorId: 'productSelect-' + sectionId,
上方新增以下程式碼:
編輯完成後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」功能,找出檔案中的這一行
productVariantCallback: function(variant) {
:
- 在步驟 2 的
if (variant) {
下方新增以下程式碼:
編輯完成後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」功能,找出檔案中的這一行
customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
:
- 用以下程式碼片段取代這一行
customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
:
編輯完成後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」功能,找出檔案中的這一行
$(this.settings.selectors.$shopifyPaymentButton, this.$container).hide();
:
- 在步驟 11 的程式碼片段下方新增以下程式碼:
編輯完成後,結果應如下所示:
- 按一下「儲存」來確認變更內容。
編輯佈景主題語言檔案
找出並展開「語言代碼」資料夾,然後選取 en.default.json
檔案。
使用「查詢鍵盤快捷鍵」功能,找出檔案中包含 "refresh_page"
的這一行:
- 在步驟 2 的
"refresh_page"
上方新增以下程式碼:
編輯完成後,結果應如下所示:
- 使用「查詢鍵盤快捷鍵」功能,找出檔案中包含
"will_be_in_stock_after"
的這一行:
- 在步驟 5 的
"will_be_in_stock_after"
下方新增以下程式碼:
編輯完成後,結果應如下所示:
- 按一下「儲存」來確認變更內容。
(選用) 為其他語言新增翻譯
在 Shopify 管理介面 中,前往「佈景主題」頁面。
點擊「...」按鈕 >「編輯預設佈景主題內容」。
點擊「變更佈景主題語言」,然後選取您要編輯的語言。此操作僅能在您已發佈的佈景主題上進行。
在搜尋列中輸入 Unit Price
。
在「一般 / 無障礙功能」下方更新單價分隔符號。
在「產品 (複數) / 產品」下方更新單價標籤。
按一下「儲存」。