近期，越來越多的賣家喜歡咨詢我一些代碼問題，千奇百怪，無法一一去解答，因?yàn)閷τ谝粋€代碼小白來說，我去給他說這個功能怎么通過代碼去實(shí)現(xiàn)是有點(diǎn)困難的。無意中發(fā)現(xiàn)了一個Shopify提供的免費(fèi)工具，提供了四個擴(kuò)展功能的代碼實(shí)現(xiàn)，同時能滿足我們一定程度上的定制，分別是社交鏈接/購物車自定義屬性/產(chǎn)品頁面自定義屬性/支付圖標(biāo)。

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

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

　　首先，左邊是設(shè)置區(qū)域，右邊是預(yù)覽和代碼區(qū)域。

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

　　01、社交鏈接

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

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

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

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

　　02、支付圖標(biāo)

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

　　網(wǎng)站上提供了14種支付圖標(biāo)供我們選擇,默認(rèn)全選,如果不需要的,不要勾選即可,操作非常簡單,如下圖,再通過Resize去調(diào)整圖標(biāo)的大小.效果圖如圖二.大家可以根據(jù)自己店鋪實(shí)際支持的支付方式來選擇勾選對應(yīng)的多選框.

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

　　03、購物車擴(kuò)展屬性

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

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

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

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

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

　　04、產(chǎn)品自定義擴(kuò)展屬性

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

　　比如定制產(chǎn)品為戒指，我們需要讓用戶填寫刻在戒指上的名字，最終展示的效果為上圖，未經(jīng)過css優(yōu)化的原始內(nèi)容。大概設(shè)置如下：

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

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