客製化語法｜SHOP Builder

Avatar
SHOPLINE TW Copywriters
追蹤

4. EC + SC.png

透過 SHOP Builder 編輯進階分頁時，您可以使用「客製化語法」元件輸入自訂文字，也可以自行安插 HTML 腳本。SHOPLINE 也提供一些語法供您使用。

本文將介紹：

⚠️ 開始前請注意：

  • SHOP Builder 目前僅支援 Ultra Chic、Kingsman、Varm、Philia 版型使用。
  • 使用 SHOP Builder 建立分頁後，若切換其他店面版型，該分頁仍然可以顯示，但無法編輯且可能發生跑版情形，在確認發佈分頁前請多加留意。

 

一、 新增「客製化語法」元件

步驟一

前往「商店後台 > 網店設計 > 網店分頁」點按「進階分頁／編輯」按鈕，開啟「進階分頁」設定頁面。Custom_liquid_CN_1.png

步驟二

點按「元件」按鈕。Custom_liquid_CN_2.png

 

步驟三

點選擴充功能下的「客製化語法」元件。
Custom_liquid_CN_3.png

 

步驟四

在「語法」處輸入自訂文字，您可輸入一般文字、HTML 、CSS、Java Script、Liquid 語法。Custom_liquid_CN_4.png

如果您有使用語法的經驗，您也可以再插入以下四種類型的語法：

Ａ. 商店相關語法

語法

說明

{{shop.currency}}

商店貨幣（以縮寫顯示，例：TWD）

{{shop.domain}}

商店網域

{{shop.email}}

商店電郵地址

{{shop.name}}

商店名稱

{{shop.permanent_domain}}

商店網域。此為您的商店.shoplineapp.com 的網域，若您另有自訂網域，這個語法則不適用

{{shop.url}}

商店 URL

{{shop.secure_url}}

依據超文本傳輸安全協定（https protocol）加密的網站 URL。

{{shop.current_locale.code}}

商店目前地區設定，以下為各語言數值及撰寫方式範例

各語言數值：

English / en
中文 / zh-hant
简中/ zh-cn
ไทย / th
Tiếng Việt / vn
日本 / jp
Melayu / my
bahasa Indonesia / id
Deutsch / de
Français / fr

撰寫方式範例（以中英文為例）： 
{% if shop.current_locale.code == "en" %}
內容 1
{% elsif shop.current_locale.code == "zh-hant" %}
  內容 2
{% else %}
  內容 3（中英以外語系）
{% endif %}

{{shop.enabled_payment_types}}

商店接受的信用卡付款，例如：visa、master、amex、paypal、prizm、tw_711_pay、tw_fm_pay、allpay、linepay、ecpay、esun、taishin、sinopac

{{shop.money_with_currency_format}}

商店價錢與貨幣字串（例：HK$）

{{shop.supported_locales}}

商店支援的地區設定（除目前地區設定外）格式與 {{shop.current_locale.code}} 相同

{{shop.logo}}

商店 Logo URL

{{shop.messages_enabled}}

商店訊息，若開通商店訊息功能即會執行語法

{{shop.multicurrency_enabled}}

商店多幣值，若開通多幣值功能即會執行語法

{{shop.supported_currencies}}

商店支援貨幣，包括貨幣名稱、符號、字母代碼。

{{shop.features}}

商店功能

{{shop.custom_footer}}

商店頁尾的 HTML 字串

 

B. 分頁相關語法

語法

說明

{{page.url}}

分頁 URL

{{page.identifier}}

分頁辨識，辨識顧客所在的分頁

{{page.is_checkout_page}}

結帳分頁，顧客於結帳頁時即執行語法

{{page.query_params}}

查詢語法（query parameters）

 

C.  版型相關語法

語法

說明

{{theme.key}}

商店版型

{{theme.settings}}

商店版型設定

 

步驟五

在設定過程中可點按下方「儲存」按鈕，於右側預覽畫面查看新增的客製化語法，或是切換手機版預覽畫面查看。Custom_liquid_CN_5-1.png

Custom_liquid_CN_5-2.png


您也可以點按右上方「預覽商店」，查看完整的前台預覽畫面。Custom_liquid_CN_5-3.png

 

步驟六

確認完成上述設定後，請點按右上角「發佈」按鈕，讓顧客在商店前台可查看此分頁所有新增的內容。Custom_liquid_CN_6.png

二、注意事項

  • 系統為避免受到部分 HTML 語法影響，造成安全性或是網店架構問題，會過濾或阻擋部分語法。
  • 語法建議需要由資訊專業人員撰寫，以免造成顯示異常。
  • SHOPLINE 不會給予店家語法的建議及教學。

編輯前請注意：

基於 SHOPLINE 作為網路平台，需經常更新網站設計及系統的本質，如果您的客製腳本因網站更新出現問題，本站概不負責。SHOPLINE 建議您經常查看網站狀況及更新，以確保網店及版面運作正常。

 

延伸閱讀



 

 

 

還有其他問題？提交請求

評論