近期，越來越多的賣家喜歡咨詢我一些代碼問題，千奇百怪，無法一一去解答，因為對于一個代碼小白來說，我去給他說這個功能怎么通過代碼去實現是有點困難的。無意中發現了一個Shopify提供的免費工具，提供了四個擴展功能的代碼實現，同時能滿足我們一定程度上的定制，分別是社交鏈接/購物車自定義屬性/產品頁面自定義屬性/支付圖標。

　　使用方式也很簡單，訪問 https://ui-elements-generator.myshopify.com頁面，看到內容如下：

　　我們看到導航欄有四個tab頁面切換，也就是我們上面所說到的4個功能的定制。我們拿第一個來簡單講解一下大概的操作。

　　首先，左邊是設置區域，右邊是預覽和代碼區域。

　　我們通過左邊可以設置外觀，比如文本/鏈接/顏色/大小等。設置好之后，右邊上部分會出現樣式預覽，如果和想象中表現一致，那就直接黏貼右邊下半部分的代碼，到對應的主題代碼處，非常簡單方便，特別是對于購物車自定義屬性和產品頁面自定義屬性，很多賣家都有這個需求，具體需求場景我們在下面一一講到，本文以Brooklyn主題為例。

　　01、社交鏈接

　　通常主題都會自帶社交鏈接模塊，但是一是有些社交鏈接的接口太少，滿足不了買家的需求，或者是樣式不是買家所想要的，那我們就可以覆蓋掉主題原本的。先看看給我們提供了哪些樣式?

　　另外，這里還能添加有些其他的賬戶主頁，比如博客，甚至還能點擊發送郵件。同時，圖標大小也是可以調整的。

　　調整成自己想要的樣子之后，Copy頁面右下方黑色背景部分的代碼，然后黏貼到自己想要顯示的位置。通常社交鏈接是放在footer.liquid或者header.liquid，用來去替換掉原來的社交鏈接內容。比如，Brooklyn,操作步驟如下:

　　復制上述代碼以后,點開Online Store -> Theme -> Actions -> Edit Code,找到footer.liquid文件,如下圖進行替換.搜索"social"關鍵詞,將紅框部分注釋掉或刪除掉,注釋快捷鍵,選中區域,同時按下ctrl + /,即可注釋.然后把我們復制的代碼黏貼到下方,即原本放社交鏈接的地方.更換之后的效果如圖二.

　　02、支付圖標

　　支付圖標的替換與社交圖標類似,但是支付圖標除了應用于替換底部支付圖標外,還可以有其他的用處,比如說,放在產品頁面購物車按鈕下方,放在購物車頁面checkout按鈕下方等等需要提示用戶店鋪所支持的支付方式的地方。

　　網站上提供了14種支付圖標供我們選擇,默認全選,如果不需要的,不要勾選即可,操作非常簡單,如下圖,再通過Resize去調整圖標的大小.效果圖如圖二.大家可以根據自己店鋪實際支持的支付方式來選擇勾選對應的多選框.

　　調整好預覽效果后,復制下方黑色背景的代碼片段,點開Online Store -> Theme -> Actions -> Edit Code,找到footer.liquid文件.將紅框中的代碼注釋或刪除掉，將復制的代碼黏貼在下方，點擊save保存即可。

　　03、購物車擴展屬性

　　購物車擴展屬性，可以理解為購物車頁面我們要展示給用戶的消息或者是需要用戶選擇勾選的內容。這樣的需求很多人覺得很奇怪，但是其實在實際操作中是有很多這種需求的。比如shopify示例給出的詢問用戶商品是否需要包裝。再比如，我上周遇到的一個用戶需求，一個做批發的賣家希望能在他的購物車頁面詢問用戶當用戶所選擇的商品暫時缺貨時，是否接受自動調劑或者是email詢問等。這個購物車擴展屬性就能幫我們做到這一點。

　　官方支持5種與用戶互動的方式，分別為短文本，長文本，單選，多選，下拉框選擇。

　　以用戶選擇是否需要禮盒包裝為例，選擇Checkbox，如下圖：

　　如果這個選項是必須要用戶選擇的，或者必須填寫的，那么將下方的Required選中，那么用戶如果不勾選，他將無前往checkout頁面，無法提交購物車表單。這部分代碼通常是放在cart.liquid文件內。點開Online Store -> Theme -> Actions -> Edit Code，找到cart.liquid文件，搜索“submit”，然后在找到的代碼上方插入復制的代碼，如下圖：

　　上圖就是最終顯示在頁面上的效果，通過這里自定義添加的擴展屬性，從訂單頁面也能看到用戶填寫的信息，便于訂單處理，但是需要在上述cart.liquid文件內，搜索form，將novalidate刪掉，如下圖：

　　04、產品自定義擴展屬性

　　產品自定義屬性滿足了產品定制的需求。比如，產品上所需要刻的字，需要上傳的圖片等等，我們都可以自己來搞定。我們選擇一個比較簡單的填寫文字的來給大家舉例：

　　比如定制產品為戒指，我們需要讓用戶填寫刻在戒指上的名字，最終展示的效果為上圖，未經過css優化的原始內容。大概設置如下：

　　然后將復制的代碼黏貼到product-template.liquid文件中。具*置，根據實際想擺放的為準。一般我們是放在quantily下方，作為產品最后一個屬性來填寫。

　　最終效果如上面的demo效果。如果想自定義上傳的是圖片，還需要額外做兩個操作，這個操作就不在這里贅述了，其實shopify平臺對于很多功能都有做處理，一般基礎的優化推廣功能都能滿足。當需求開發比較繁瑣時，可以通過技術進行二次開發哦。