在創建主題時,可以爲客戶預留一些自定義的配置,是Shopify主題模板常用的做法。Shopify使用settings_schema.json文件提供了這個自定義配置的方式。
在Shopify主題的config目錄中,在此文件中定義一些對象屬性,就可以實現自定義的配置選項。當你選擇在線商店 》 模板 》自定義按鈕,就可以看到控制面板中這些選項。
配置文件的文件格式
settings_schema.json文件,本身是個JSON文件,那麼他需要遵守JSON文件規範,這裏所有的數據都用[]括起來。在此範圍內,你可以將相關選項組合在一起。每個分組都有一個名稱,然後是定義這個組的配置。比如:
[
{
"name" : "顏色",
"settings" : [ ]
}
]
然後,每個選項都是設置數組中的一個對象。 像這樣的東西:
[
{
"name": "Shopify119",
"theme_name": "Shopify119 theme",
"theme_version": "1.0.0",
"theme_author": "Leo",
"theme_documentation_url": "https://shopify119.blog.csdn.net",
"theme_support_url": "https://shopify119.blog.csdn.net"
},
{
"name" : "顏色",
"settings" : [
{
"type": "color",
"id": "color_background",
"label": "背景顏色",
"default": "#e5e5e5",
"info" : "這個將調整背景顏色"
},
{
"type": "color",
"id": "color_body_text",
"label": "內容文字顏色",
"default": "#2980b9",
"info" : "這個將調整內容文字顏色"
}
]
},
{
"name": "Logo",
"settings": [
{
"type": "image",
"id": "logo.png",
"label": "Logo",
"info": "這裏可以改變店鋪的Logo"
}
]
}
]
上面的例子中,在自定義設置的側欄上,你可以看到標籤“顏色”,當你單擊他時,可以選擇設置背景顏色和內容文字顏色;選擇Logo可以更改店鋪的Logo。
配置文件的屬性
每個設置都有5個屬性:type、id、label、default、info
類型 是否必填 描述
type 必填 定義選項所需的輸入類型
id 必填 id必須唯一,這將在主題中引用它
label 必填 向用戶描述了該選項的用途,可以用中文
placeholder 可選 輸入的佔位符文本的值。這僅適用於基於文本的設置類型。
default 可選 該選項的默認值
info 可選 爲用戶提供該選項的詳細使用信息
常規設置類型
下表描述了允許的常規輸入類型,每個值在type屬性中設置。
值 說明
text 允許用戶輸入單行文本字段
textarea 允許用戶輸入多行文本字段
image 允許用戶上傳圖片
radio 允許用戶使用單選按鈕
select 允許用戶從下拉列表中進行選擇
checkbox 允許用戶選中一個框,返回true或false值
image type
需要注意的是,用這種方式上傳的圖片將保存在模板的assets文件夾中。該文件使用id中定義的名稱和格式進行保存。所以,即使上傳的是.jpg文件,但是id定義的是logo.png,圖片也將會保存爲.png文件。
radio和select type
由於radio和select有多個值可提供選擇,因此還需要設置額外的屬性。比如:
{
"type": "radio",
"id": "id",
"label": "Text",
"options": [
{ "value": "one", "label": "Radio One" },
{ "value": "two", "label": "Radio Two" }
],
"default": "one",
"info": "Text"
}
特殊設置類型
特殊設置類型的定義訪問和常規設置類型相似,不同之處在於這些設置,將爲用戶提供內置或特定的選擇信息。比如:產品類型是下拉列表,但只允許用戶從已經在商店中定義的產品類型中進行選擇。
值 說明
color 允許用戶使用顏色選擇器窗口小部件選擇顏色
font 允許用戶從可用字體列表中進行選擇
collection 允許用戶選擇商店中可用的產品系列
product 允許用戶選擇商店中可用的產品
blog 允許用戶從商店中設置的博客列表中進行選擇
link_list 允許用戶從可用菜單中進行選擇
page 允許用戶選擇商店中定義的特定頁面
snippets 允許用戶選擇主題中可用的特定代碼段
Blog Type
Shopify內置了博客,你可以添加博客文章。還可以把這些博客文章添加到不同的博客中。blog type設置下拉列表允許你選擇要用於改設置的博客。
Snippet Type
代碼片段在模板中的snippets目錄裏面定義。
信息設置
Shopify還允許將創建主題的作者信息放入側邊欄中,它們只有3個屬性:type, content, info
類型 是否必填 描述
type 必填 定義選項所需的輸入類型。 對於側邊欄設置,這隻能是標題或段落
content 必填 文本內容
info 可選 向用戶提供有關該選項的其他信息。
在模板中調用配置信息
現在已經可以創建設置信息了,但是如何在實際的模板中調用並使用它們?這將是下篇文章的內容。