Shopify Metafield 元字段添加和設置

Shopify Metafield 元字段是對 Shopify 系統的一個重要補充，通過元字段我們可以向 Shopify 的產品頁面，產品分類頁面，訂單頁面，客戶頁面，博客頁面等頁面添加動態化的數據，幫助我們在 Shopify 產品描述內容之外，添加更多有利於訂單轉化的數據和內容。

在 Shopify 後臺設置頁面，打開“Metafield”，或者直接使用鏈接 xxx.com/admin/metafields (其中的 xxx.com 換成我們自己的網站域名) 打開頁面。如下圖，我們可以爲產品，多屬性，產品系列，客戶，訂單，頁面，博客和博客文章添加元字段，並在這些頁面展示元字段內容。

最近 Shopify 在國內不太穩定，如果打不開 Shopify 官網, 或者打開速度很慢，無法註冊或者登錄 Shopify 賬戶，請使用“魔法”重試，你懂的。

我們以下圖亞馬遜產品頁面爲範例，在 Shopify 產品頁面實現類似的產品規格數據展示效果，來簡單說明元字段的添加和設置過程，以及在使用這一功能的過程中可能出現的問題，和這一功能的侷限。

需要鄭重說明的一點是，以下操作流程僅僅是爲了幫助大家理解元字段在 Shopify 網站中是如何工作的，扮演了一個什麼樣的角色，建議先完整閱讀本篇內容，對元字段有更全面認識之後，再決定要不要折騰它，就我自己的網站，以及我瞭解的很多人的 Shopify 網站來說，可能根本就用不到這一功能。在實際應用過程中，使用元字段很容易把簡單的問題複雜化，甚至錯誤的設置會讓網站顯得非常不專業。

元字段的設置整體分爲三個操作步驟：

1. 添加元字段
2. 添加元字段值
3. 將元字段內容插入網站前臺產品頁面

添加 Shopify Metafield 元字段

在上圖頁面中點擊“產品”，打開下圖頁面，點擊“添加定義”，我們開始向產品添加新的字段。

元字段名稱

是給我們自己看的，客戶不會看到這個名稱，所有，使用中文，英文，拼音命名都是可以的，只要我們看到這個名稱明白這個元字段代表什麼內容就可以。這裏我填寫“Number of Speed”, 來代表電動車的變速檔位數量。

命名空間和祕鑰

是該元字段的唯一識別碼。不同元字段之間的元字段名稱是可以重複的，但是命名空間和祕鑰必須是唯一的。當我們通過編輯主題代碼將元字段內容插入到網站裏面的時候，填寫的元字段代碼部分內容就是“命名空間和祕鑰”文本框中我們設置的內容。這裏填寫的內容用 . 進行分隔，並且只能包含字母、數字、下劃線 (_) 和連字符 (-)。同樣爲了我們閱讀或者編輯代碼時能夠立刻了解該“命名空間和祕鑰”代表的含義，建議使用有意義的文字描述，如“bike.number_of_speed”, 而不是隨意填寫的如“asd.56d_s65f_sdf5”。

描述

是對該元字段含義的詳細解釋，是我們對該元字段的註釋。選填。個人建議是儘可能用元字段名稱就能說明該元字段所代表的含義或者數據。需要使用描述才能明白該元字段的含義的話，側面說明名稱設置不夠合理或者理想。

向店面 API 請求公開此元字段

有時候也顯示爲右側邊欄的“訪問選項” – 控制如何跨平臺訪問此字段及其保存的值。這一項控制的是第三方服務是否有權限讀取元字段的數據。如果需要把數據提供給 Shopify 應用則此項勾選，這個看我們自己的實際需要。後面可以隨時修改。

選擇數據類型

是對元字段值的限定或者說定義。目前 Shopify 支持6種類型的數據。分別是

• 日期和時間（日期 / 日期和時間），
• 度量（重量 / 體積 / 外形尺寸），
• 數字（整數 / 小數），
• 參考（文件 / 頁面 / 產品 / 產品多屬性 / 產品系列）
• 文本（單行文本 / 多行文本）
• 其他（顏色 / JSON / 資金 / 評分 / TRUE 或 FALSE / URL）

每種數據類型對元字段值有各自的格式要求，我們也可以在 Shopify 系統已有的限定的基礎上添加我們自己對元字段值的要求。在選擇數據類型的時候，我們要先對該元字段有一個比較準確的認識。

例如我設置的自行車變速數（Number of speed）這個數據肯定是一個整數，“18速變速公路自行車”，不會是一個“17.9速變速公里自行車”這樣的小數，也不會是日期，或者重量體積等等其他數據類型。因此這個數據類型肯定是選擇“整數”的。

一個值還是值列表？

然後系統要我們選擇這個元字段可以填充多少個值。這個按照我們需求來選擇。再打個比方，文章開頭亞馬遜上銷售的那款電動自行車，我在設置顏色元字段的時候，可以選擇一個值，然後這個值在產品頁面填寫爲自行車的主體色 – “黑色”；也可以選擇多個值，然後產品頁面填寫自行車上的所有顏色 – “黑色”和“紅色”。

驗證

在驗證欄，會顯示我們所選擇數據類型的規則，例如上圖我選擇“整數”數據類型之後，規則顯示爲“值必須是沒有小數位的數字”。也就是在後面我們爲該元字段賦值的時候，必須填寫整數。在系統規則的基礎上，我們還可以對規則進行進一步限定，例如“整數”數據類型可以自定義“最小值”和“最大值”。還是以變速自行車爲例，我限定最小值爲“1”，最大值爲“30”，如果後面在產品頁面給這一元字段賦值時提交的數字是小數，或者數字不在“1~30”這個區間，那麼 Shopify 系統就會提示錯誤而導致無法保存頁面設置。

固定元字段定義

保存設置好的元字段定義之前，我們可以選擇是否固定定義。固定定義之後，在元字段行最後面就會有一個如下圖黃色釘子的圖標標記。每個數據類型裏面最多可以有20個固定元字段。

打開新建產品頁面，或者任意已經發布的產品頁面頁面，在頁面底布就會出現我們在 Metafield 頁面添加的元字段。下圖中顯示的只有上圖已經固定的元字段。未固定的元字段會被摺疊，需要點擊“顯示全部”按鈕纔會顯示。如果沒有下圖中的“顯示全部”按鈕，需要我們先保存產品頁面並刷新頁面，就會顯示出來啦。

添加元字段值

我們在 Metafield 的設置頁面只能添加元字段，元字段值則是要去具體頁面添加。例如我們在上面添加的是產品頁面的元字段，那麼我們就需要在產品上傳或者編輯頁面給元字段賦值 – 填充具體的數據。如果我們在上面添加的是博客頁面的元字段，那麼我們就需要在博客頁面給元字段賦值。

如上圖，不同數據類型的元字段，在填充具體數據時對格式要求也是不同的。我們就按照系統提示和要求填充數據就可以。如果出現比較“怪異”的情況，例如點擊元字段“Production Date”（生產日期）出現的不是如上圖所示的日期選擇器，而是一個顏色選擇器，那麼就說明我們在設置該元字段的時候，數據類型選擇是有問題的。

將元字段內容插入網站前臺產品頁面

我們在產品編輯頁面添加的常規內容如產品標題，描述，價格，圖片等等信息會自動顯示到網站前臺產品頁面，而元字段內容則需要我們在 Shopify 主題編輯頁面手動添加到網站前臺。如下圖（使用的是 Shopify 免費主題 Dawn），我想要把元字段關於產品規格描述部分的內容添加到產品頁面的 “Specification” 項目下，則需要先選中要編輯的內容，然後點擊“行內容”右側的“插入動態源”小圖標，在下拉選項中，就可以看到我們添加到產品頁面的其中一部分的元字段了。

我們按照想要的排序，把元字段插入到行內容中，然後在元字段前面添加對應的文字內容。例如我添加到上圖中的元字段 “Wheel Size” 之後，在行內容中只會顯示我們在這個產品後臺爲 “Wheel Size” 這一元字段賦的值 12“。我們還需要在該元字段前面手動輸入 “Wheel Size:”, 在產品頁面中才會完整顯示爲 Wheel Size: 12″。

按照上面的書寫規則，我們把需要的元字段依次添加到行內容中，則產品頁面會顯示出來這些數據。

元字段使用過程中可能出現的問題

那麼問題來了。通過上面的方法添加到產品頁面的內容，會出現下面的問題：

所有頁面顯示相同的元字段文字內容

在以前沒有元字段功能的時候，我們在 Shopify 主題設置裏面添加到產品頁面的內容都是“死”的，固定不變的，所有產品頁面顯示的內容都是一樣的。有了元字段功能就可以實現每個產品展示不同的內容，但是如果像上面我們那樣操作的話，就會出現下圖產品頁面顯示的問題：

在網站所有產品頁面的 Specification 都會出現我們設置的電動自行車的規格參數，而這個產品是智能手錶保護殼，和自行車八竿子打不着，但是我們添加在主題設置裏面的內容，無論是不是參數符合產品描述，都會顯示，只有我們給元字段賦的值，每個產品都不一樣。

其實這個問題的解決辦法也很簡單：把這部分數據直接寫進 Shopify 後臺的產品描述裏面，就不存在這個問題了。

如果一定要用元字段解決這個問題的話，那麼我們也可以把所有元字段的“數據類型”選擇爲“單行文本”或者“多行文本”，然後在產品頁面爲元字段賦值的時候，直接填寫爲完整行：“Wheel size: 12””, 而不是隻填寫一個具體的值：“12””，這樣就可以做到，不同產品頁面顯示不同的規格參數了。

元字段的調用會受到數據類型的限制

再有一個問題是，元字段的調用會受到數據類型的限制。

例如我想要的操作中，我一共在產品後臺添加了8個以固定元字段，和3個未固定元字段。但是在主題編輯頁碼添加元字段內容到 “Specification” 行內容時，只能調用其中7個元字段。我一直以爲是我設置元字段的時候設置錯誤，後來求助谷歌發現不少人也有這樣的問題，最後反覆測試才發現，原來調用元字段的時候，會受到數據類型的限制。

例如，我想把 Manual Download 這個元字段添加到“Specification”行內容裏面是不行的，因爲 Manual Download 的數據類型是“文件”，文件被當做“媒體”處理，所以只能插入到頁面中圖片或者視頻的位置，如下圖，右側文件圖標的位置原本是放置圖片的，我們選擇元字段的時候只支持數據類型爲“文件”的元字段。

這一點我不太清楚爲什麼要做這樣的限制，還是說當時設計這個功能的時候沒有考慮這麼多。

使用元字段製作亞馬遜A+頁面

目前，就我個人的元字段功能使用體驗來說，它可以幫助我們做出來亞馬遜那種 A+ 頁面的效果，但是還無法幫我實現我想要的 Landing Page 的效果。Shopify 一直在進化，我們現在已經可以在產品信息塊內部，隨意調整產品標題，描述，價格，購買按鈕等等內容的上下左右位置，那以後有可能會突破所有限制，我們可以在頁面中隨意設置佈局和內容，就像在空白紙張上隨意作畫一樣設計網站頁面。

不過就現在的功能，我們可以在產品信息下方隨意添加文字，圖片，視頻等等內容。這些隨意添加的板塊 Section，我把它叫做“容器”, 我們在給這些容器添加內容的時候，Shopify 系統給了我們兩個選擇：一個是“連接動態源”，把動態源添加到容器中之後，調用的就是我們在產品後臺編輯頁面添加的元字段內容，這樣我們就可以達到同一個容器，在不同的頁面顯示不同的內容的效果；另外一個是“選擇圖片”，是把某一張具體的圖片添加到容器中，通過這種方式添加圖片到容器中之後，在所有頁面該容器位置顯示的內容都是一樣的。

根據上面的解釋。我們可以直接爲產品添加多個內容類型爲文件或者文本的元字段。如下圖，我添加了6個文件元字段，在 Shopify 產品頁面實現類似亞馬遜 A+ 頁面的效果。

設置好上面的元字段之後，在每個產品的後臺編輯頁面，上傳提前製作好的圖片，或者文字內容。

然後再產品頁面的樣式自定義主題設置頁面，我們在產品信息下方按照需求添加多個幻燈片或者文本作爲“容器”，然後爲這些“容器”添加具體內容時，選擇“連接動態源”，調用我們已經在產品編輯後臺頁面添加好的元字段數據。

然後就做出來如下圖的產品頁面的效果了。

雖然這樣做出來的效果比使用專業的着陸頁製作插件做出來的靈活度自由度沒有那麼的高，但是應該也能滿足不少人的需求了。而且是 Shopify 系統自帶功能，完全免費啊。

提個醒，如果要在產品頁面插入很多圖片的話，記得在上傳圖片之前先對圖片進行無損壓縮處理，發佈產品頁面之後，也記得用網頁測速工具測試下頁面打開速度。畢竟，訂單轉化的第一步是客戶可以順利打開我們的產品頁面，頁面都打不開的話，做的再漂亮也沒有什麼用處。

目前我用到的 Shopify 元字段功能就是製作一些上圖這樣的頁面，元字段的功能還是挺強大的，尤其是對於懂代碼會自己在 Shopify 主題代碼編輯中隨意調用元字段內容的朋友來說。不過對於大部分獨立站賣家朋友，能理解什麼是元字段，能合理設置就已經足夠了。

關於 Shopify 元字段的使用，大家也可以谷歌搜索 Shopify Metafield 來獲得更多內容。後面如果我有碰到其他比較有用的用法的話，再更新分享吧，也歡迎大夥兒留言分享你是如何使用元字段的。