測(cè)與性能優(yōu)化)
1. 單商品店鋪的模板選型為什么我盯上了Gibson這個(gè)主題先交代一下背景。我接手的項(xiàng)目是一類很典型的Shopify單商品店鋪只賣一個(gè)爆款沒有復(fù)雜的產(chǎn)品矩陣沒有品類導(dǎo)航首頁(yè)就是全部戰(zhàn)場(chǎng)。這類店鋪對(duì)主題的要求和常規(guī)多品類店鋪完全不同——它不需要豐富的集合頁(yè)列表不需要復(fù)雜的菜單層級(jí)核心訴求只有三件事把訪客留在頁(yè)面里、把注意力集中在購(gòu)買按鈕上、把加載速度壓到極限。市面上絕大多數(shù)的Shopify主題都是為了多商品店鋪設(shè)計(jì)的首頁(yè)塞滿了集合輪播、分類卡片、博客模塊對(duì)單商品店來說反而是累贅。所以我一直在找一款真正以“單品轉(zhuǎn)化”為設(shè)計(jì)前提的主題。Gibson是我在某次主題市場(chǎng)篩選時(shí)注意到的名字很普通但演示站讓我眼前一亮首頁(yè)結(jié)構(gòu)完全是圍繞一個(gè)產(chǎn)品展開的從首屏賣點(diǎn)到參數(shù)對(duì)比再到評(píng)價(jià)和FAQ節(jié)奏感非常強(qiáng)。這篇分析不是那種逛一圈演示站就寫出來的軟文。我把主題文件完整下載下來拆了模板代碼跑了性能測(cè)試還搭了一個(gè)模擬品牌站做了為期兩周的實(shí)測(cè)。下面會(huì)從代碼結(jié)構(gòu)、轉(zhuǎn)化設(shè)計(jì)、性能表現(xiàn)、可定制性這幾個(gè)維度展開也會(huì)把我踩過的坑一并說出來。先說結(jié)論Gibson不是萬金油主題但對(duì)單商品店鋪來說它的很多設(shè)計(jì)決策確實(shí)想在了前面。不過它也有一些隱藏問題如果你不做任何改動(dòng)直接上線可能會(huì)在移動(dòng)端吃暗虧。具體怎么回事下面一個(gè)一個(gè)聊。2. 單商品店鋪到底需要什么樣的主題我的選型清單2.1 單品店的三個(gè)核心場(chǎng)景在聊Gibson之前先把我自己總結(jié)的單商品店鋪需求清單擺出來。這樣后面看Gibson的設(shè)計(jì)時(shí)你就能明白我為什么對(duì)某些功能點(diǎn)贊、對(duì)某些設(shè)計(jì)搖頭。第一首屏必須承擔(dān)“介紹說服”雙重任務(wù)。常規(guī)店鋪首頁(yè)首屏一般是導(dǎo)航、banner、產(chǎn)品推薦但單品店首屏應(yīng)該直接展示產(chǎn)品核心賣點(diǎn)、價(jià)格、購(gòu)買按鈕。用戶從廣告落地進(jìn)來留給你的注意力窗口可能只有幾秒鐘主題如果不能在首屏把“買什么、多少錢、有什么優(yōu)惠”講清楚后面做得再好都白搭。第二頁(yè)面結(jié)構(gòu)要能支撐“長(zhǎng)文營(yíng)銷”。單商品店鋪的詳情頁(yè)通常很長(zhǎng)要有賣點(diǎn)圖、對(duì)比表、用戶評(píng)價(jià)、常見問題、使用場(chǎng)景等模塊。這就需要主題本身提供足夠多的內(nèi)容區(qū)塊而不是讓你去靠第三方應(yīng)用硬塞。第三減少跳出路徑。這個(gè)點(diǎn)是很多新手容易忽略的——單商品店鋪?zhàn)钆掠脩粼跒g覽過程中看到別的東西就跑了。所以主題不應(yīng)該默認(rèn)展示“相關(guān)產(chǎn)品”“大家都在看”這類模塊頁(yè)面里的每一個(gè)鏈接都應(yīng)該是為轉(zhuǎn)化服務(wù)的。2.2 我對(duì)Gibson的初步考察我的考察流程比較機(jī)械先看演示站在桌面端和移動(dòng)端的完整滾動(dòng)錄屏再看主題文檔和更新日志最后直接下載代碼文件檢查。第一輪印象Gibson的首頁(yè)模板提供了九種預(yù)設(shè)區(qū)塊組合排列邏輯基本遵循“首屏賣點(diǎn)→產(chǎn)品圖集→細(xì)節(jié)參數(shù)→對(duì)比表→評(píng)價(jià)→FAQ→最后購(gòu)買召喚”的順序。它甚至專門設(shè)計(jì)了一個(gè)“Carousel”區(qū)塊來放前后對(duì)比圖這個(gè)在美妝、個(gè)護(hù)類單品店非常實(shí)用。第二輪看更新日志時(shí)我注意到Gibson在近幾個(gè)版本里一直在優(yōu)化移動(dòng)端首屏的產(chǎn)品圖和購(gòu)買按鈕位置。對(duì)于一個(gè)單品主題來說這是非常正確的迭代方向。很多主題的移動(dòng)端首屏還在沿用PC端的左右分欄導(dǎo)致用戶劃好幾屏才能看到價(jià)格Gibson在這個(gè)問題上處理得很果斷。不過它也暴露了一些局限導(dǎo)航欄的樣式選項(xiàng)很少幾乎不支持多級(jí)菜單。如果你以后想從單商品店擴(kuò)展成多品類店鋪Gibson會(huì)給你一種很明顯的“施展不開”的感覺。所以它適合什么階段使用你需要有一個(gè)清醒的判斷。3. 代碼層面拆解GitHub風(fēng)格的Liquid結(jié)構(gòu)分析3.1 模板文件的組織方式直接把Gibson主題包下載解壓后我第一件事是看目錄結(jié)構(gòu)。Shopify主題的基礎(chǔ)框架大家都熟但不同主題在代碼組織上差異很大。Gibson的layouts和sections目錄非常干凈沒有大量注釋掉的僵尸代碼也沒有重復(fù)的區(qū)塊邏輯。單商品店鋪主題和普通主題最大的差別在于product模板。很多主題的product.liquid動(dòng)輒上千行因?yàn)橐嫒菟械漠a(chǎn)品類型和展示形態(tài)。Gibson走的是另一個(gè)方向它把product頁(yè)面的幾乎所有內(nèi)容都搬進(jìn)了section通過schema配置來控制顯示順序。這意味著你在后臺(tái)編輯產(chǎn)品頁(yè)面時(shí)可以直接拖拽區(qū)塊而不是去改代碼。{% schema %} { name: Product Hero, settings: [ { type: checkbox, id: show_price, label: Show price, default: true }, { type: text, id: badge_text, label: Badge text, info: e.g. Limited Edition }, { type: range, id: headline_size, label: Headline font size, min: 24, max: 64, step: 2, default: 40 } ] } {% endschema %}這種做法的好處很直接運(yùn)營(yíng)人員可以獨(dú)立完成頁(yè)面搭建不需要每次調(diào)整都來找開發(fā)。壞處是如果你需要實(shí)現(xiàn)一些schema里沒有的功能改起來會(huì)比傳統(tǒng)寫法更繞因?yàn)槟愕孟雀闱宄^(qū)塊的渲染邏輯嵌套在哪里。3.2 自定義區(qū)塊與區(qū)塊預(yù)設(shè)的配合Gibson的區(qū)塊設(shè)計(jì)里值得單獨(dú)拎出來說的是“presets”。單品店鋪的首頁(yè)搭建往往需要復(fù)制多個(gè)相同結(jié)構(gòu)的區(qū)塊比如你要放三組使用場(chǎng)景圖每組都是“左圖右文”的布局。如果你用的是老式主題就得復(fù)制三次代碼或者依賴復(fù)制section再刪改。Gibson在presets上做了很好的處理它在schema里定義了帶默認(rèn)內(nèi)容的預(yù)設(shè)拖動(dòng)區(qū)塊時(shí)直接生成一套完整結(jié)構(gòu)運(yùn)營(yíng)只需要替換圖片和文案。{ presets: [ { name: Image with Text Overlay, category: Product, settings: { image_position: left, text_align: left, show_button: true }, blocks: [ { type: heading, settings: { content: Your headline here } }, { type: text, settings: { content: Description text } }, { type: button, settings: { text: Buy now } } ] } ] }這塊確實(shí)省時(shí)間但對(duì)一個(gè)依賴后臺(tái)拖拽的團(tuán)隊(duì)來說presets里寫死的內(nèi)容也可能變成束縛。如果你有自己的固定風(fēng)格最后還是要手動(dòng)去改默認(rèn)文案和圖片。3.3 對(duì)App Embed的兼容性我特別關(guān)注了Gibson對(duì)App Embed區(qū)域的處理。現(xiàn)在幾乎所有Shopify主題都在layout/theme.liquid里預(yù)留了app_embeds位置但不同主題對(duì)第三方應(yīng)用注入的樣式隔離做得不一樣。Gibson的做法是給應(yīng)用注入?yún)^(qū)域設(shè)置了相對(duì)較寬的樣式重置并用CSS變量接管了間距控制。簡(jiǎn)單說應(yīng)用注入的彈窗、橫幅、聊天插件在Gibson里不會(huì)因?yàn)橹黝}自帶的樣式而錯(cuò)位。這一點(diǎn)我實(shí)測(cè)下來確實(shí)比某些老牌主題穩(wěn)——我裝了一個(gè)評(píng)測(cè)類應(yīng)用和一個(gè)彈窗應(yīng)用都沒有出現(xiàn)按鈕漂移或者樣式?jīng)_突的問題。不過要提醒一句theme.liquid里對(duì)app_embeds的處理是“寬松”的這意味著應(yīng)用本身的樣式會(huì)直接生效主題層面基本不怎么干預(yù)。如果你是那種追求所有元素視覺完全統(tǒng)一的店鋪就需要額外寫一些覆蓋樣式這部分工作量沒辦法省。4. 轉(zhuǎn)化鏈路設(shè)計(jì)從首屏到支付按鈕的每一步4.1 首屏的“三要素”布局邏輯Gibson的首屏區(qū)塊設(shè)計(jì)邏輯可以概括成一句話產(chǎn)品圖、標(biāo)題、價(jià)格永遠(yuǎn)在視線范圍內(nèi)。它的desktop布局采用左側(cè)大圖、右側(cè)信息的形式但右側(cè)信息欄又細(xì)分成兩欄——上半部分是標(biāo)題和價(jià)格下半部分才是購(gòu)買按鈕和信任徽章。這樣做的一個(gè)隱蔽好處是用戶的視線會(huì)自然形成一個(gè)從上到下的掃描路徑先看產(chǎn)品是什么再看價(jià)格是否符合預(yù)期最后才接觸購(gòu)買動(dòng)作。很多主題把購(gòu)買按鈕放得過于靠上用戶還沒建立對(duì)產(chǎn)品的認(rèn)知就看到按鈕反而會(huì)下意識(shí)往下滑尋找更多信息。移動(dòng)端處理得更激進(jìn)購(gòu)買按鈕會(huì)跟隨首屏區(qū)塊固定在可視區(qū)域底部。這個(gè)設(shè)計(jì)讓我想起很多跨境獨(dú)立站的做法但Gibson把它內(nèi)置在主題里了省去了額外開發(fā)。4.2 把“參數(shù)對(duì)比”做成了閱讀器單品店的詳情頁(yè)通常會(huì)有一個(gè)參數(shù)對(duì)比模塊用來突出自己相對(duì)競(jìng)品的優(yōu)勢(shì)。Gibson沒有簡(jiǎn)單做一個(gè)table區(qū)塊而是提供了一種類似“可折疊對(duì)比卡片”的結(jié)構(gòu)首行是產(chǎn)品名和評(píng)分點(diǎn)擊可展開詳細(xì)參數(shù)支持自定義顏色標(biāo)識(shí)。這個(gè)設(shè)計(jì)對(duì)開發(fā)者的啟示是不要把對(duì)比模塊做成死表格。單商品店鋪的營(yíng)銷文案經(jīng)常要調(diào)整對(duì)比維度這次比價(jià)格下次比成分。如果用死表格每次都要改區(qū)塊設(shè)置而Gibson的可折疊結(jié)構(gòu)把對(duì)比內(nèi)容變成了一個(gè)類似FAQ一樣的可擴(kuò)展列表運(yùn)營(yíng)人員在后臺(tái)就能隨時(shí)增刪對(duì)比行不需要?jiǎng)哟a。我實(shí)測(cè)時(shí)把五組對(duì)比項(xiàng)壓縮成三組頁(yè)面加載后的可讀性明顯更好。這也說明一個(gè)道理對(duì)比項(xiàng)不是越多越好主題的區(qū)塊設(shè)計(jì)應(yīng)該天然支持你“做減法”。4.3 評(píng)價(jià)與FAQ的聯(lián)動(dòng)單商品店鋪的用戶決策路徑通常是這樣看到賣點(diǎn)→產(chǎn)生興趣→尋找社會(huì)證明→消除疑慮→下單。評(píng)價(jià)和FAQ就是后兩步的關(guān)鍵。Gibson提供了評(píng)價(jià)區(qū)塊和FAQ區(qū)塊但它們不是獨(dú)立存在的。FAQ區(qū)塊里支持設(shè)置“鏈接到評(píng)價(jià)區(qū)域”的錨點(diǎn)按鈕點(diǎn)擊后平滑滾動(dòng)到評(píng)價(jià)區(qū)。這個(gè)細(xì)節(jié)很小但對(duì)降低跳出率很有效。很多店鋪的FAQ和評(píng)價(jià)各自為政用戶看完了FAQ還要自己找評(píng)價(jià)區(qū)中間只要多劃一屏就多一分流失風(fēng)險(xiǎn)。Gibson的評(píng)價(jià)區(qū)塊還支持直接顯示“星級(jí)評(píng)價(jià)數(shù)量”的摘要徽章這個(gè)徽章可以嵌入到首屏的購(gòu)買按鈕上方。我在實(shí)際項(xiàng)目中把這個(gè)徽章加上了效果還挺直觀的——至少?gòu)暮笈_(tái)的點(diǎn)擊熱圖來看首屏到評(píng)價(jià)區(qū)的滾動(dòng)比例明顯提高了。4.4 顏色變量的控制力做單商品店鋪時(shí)品牌色的統(tǒng)一非常影響信任感。Gibson把主題配色抽成了全局CSS變量在后臺(tái)的Theme settings里可以直接設(shè)置主色、強(qiáng)調(diào)色、按鈕色、價(jià)格色。價(jià)格和按鈕是分開控制的這點(diǎn)我特別滿意。大多數(shù)主題只提供“主要按鈕顏色”和“輔助按鈕顏色”如果你想把價(jià)格標(biāo)成橙紅色、購(gòu)買按鈕保持黑色就只能在代碼里強(qiáng)行覆蓋。Gibson把價(jià)格色單獨(dú)抽出來作為一個(gè)變量等于默認(rèn)就支持這種營(yíng)銷常用的“價(jià)格突出”策略。:root { --gibson-accent: #FF5A30; --gibson-price: #E63946; --gibson-button-bg: #1D1D1D; --gibson-button-text: #FFFFFF; }不過它的局限在于不是所有區(qū)塊里的所有元素都受這些變量控制。我在調(diào)整某個(gè)自定義區(qū)塊的內(nèi)部間距時(shí)發(fā)現(xiàn)部分元素還在用scss里的固定值。也就是說后臺(tái)的設(shè)置面板能覆蓋大部分場(chǎng)景但真要像素級(jí)定制還是得改源碼。5. 性能實(shí)測(cè)LCP、CLS、加載時(shí)間的具體數(shù)據(jù)5.1 測(cè)試環(huán)境與對(duì)照組性能不是一個(gè)“感覺很快”就能交代的事。我用以下條件做了標(biāo)準(zhǔn)測(cè)試模擬店鋪產(chǎn)品圖使用12張高清圖主題設(shè)置里全部使用默認(rèn)選項(xiàng)未加任何第三方應(yīng)用測(cè)試工具為PageSpeed Insights的移動(dòng)端模擬環(huán)境。指標(biāo)Gibson實(shí)測(cè)常規(guī)多品類主題平均值備注LCP2.1s3.8s首屏產(chǎn)品圖懶加載策略激進(jìn)CLS0.020.18圖片尺寸比例預(yù)占位TBT180ms350msJS腳本拆分到位全頁(yè)資源請(qǐng)求數(shù)3456字體、圖片合并處理這個(gè)成績(jī)?cè)谖业臏y(cè)試樣本里屬于前20%的水平。特別是LCP2.1秒對(duì)單品店鋪來說是可以接受的。單品店的首屏如果被大圖拖累LCP經(jīng)常拉到4秒以上Gibson能壓到這個(gè)水平主要得益于默認(rèn)開啟的圖片預(yù)解碼和懶加載機(jī)制。5.2 它是怎么把LCP壓下來的LCP這個(gè)指標(biāo)對(duì)單品店鋪來說基本就等于首屏產(chǎn)品圖的加載時(shí)間。Gibson做了兩個(gè)關(guān)鍵處理。第一首屏產(chǎn)品圖默認(rèn)使用fetchpriorityhigh并且主動(dòng)推掉其他非首屏圖片的loading優(yōu)先級(jí)第二主題內(nèi)置了響應(yīng)式圖片斷點(diǎn)生成srcset里自動(dòng)匹配不同的屏幕寬度避免移動(dòng)端加載桌面端大圖。{%- if section.settings.show_hero_image -%} img src{{ product.featured_image | image_url: width: 900 }} srcset{{ product.featured_image | image_url: width: 400 }} 400w, {{ product.featured_image | image_url: width: 900 }} 900w, {{ product.featured_image | image_url: width: 1400 }} 1400w sizes(max-width: 768px) 100vw, 50vw fetchpriorityhigh decodingasync alt{{ product.featured_image.alt | escape }} {%- endif -%}這里順便給個(gè)實(shí)操建議不管用哪個(gè)主題首屏圖千萬不要只傳一張?jiān)瓐D。你在后臺(tái)上傳產(chǎn)品圖時(shí)建議用圖片壓縮工具先壓一遍控制在200KB以內(nèi)性價(jià)比最高。主題能優(yōu)化代碼但救不了一張10MB的原始照片。5.3 那些額外的性能隱患Gibson在性能上也不是毫無妥協(xié)。它的動(dòng)畫效果依賴了一套獨(dú)立的JavaScript庫(kù)雖然默認(rèn)只啟用滾動(dòng)淡入和輕微位移動(dòng)畫但在頁(yè)面元素過多時(shí)TBT還是會(huì)明顯上升。我在本地測(cè)試時(shí)加入了一個(gè)包含40個(gè)區(qū)塊的長(zhǎng)首頁(yè)TBT從180ms跳到了430ms。對(duì)用戶來說滾動(dòng)時(shí)會(huì)有可感知的卡頓。另外如果開啟導(dǎo)航欄的吸頂陰影效果它會(huì)強(qiáng)制整個(gè)導(dǎo)航欄在滾動(dòng)時(shí)做重繪。這個(gè)效果在低成本安卓機(jī)上偶爾會(huì)導(dǎo)致掉幀。我的建議是如果你的目標(biāo)用戶群體里有大量低端安卓用戶可以不開啟導(dǎo)航陰影換取更平滑的滾動(dòng)。6. 定制實(shí)踐從后臺(tái)到代碼的自定義路線6.1 后臺(tái)設(shè)置面板的每一項(xiàng)該怎么調(diào)Gibson的后臺(tái)設(shè)置面板分類很清楚。重點(diǎn)說一下幾個(gè)容易被忽略但很實(shí)用的選項(xiàng)首屏布局模式。除了默認(rèn)的左右分欄它還有“全寬圖片下層信息”模式。這個(gè)模式適合視頻類產(chǎn)品或者視覺沖擊力強(qiáng)的產(chǎn)品因?yàn)槿珜拡D能更好地展示產(chǎn)品氛圍。如果你賣的是工具類、硬件類產(chǎn)品建議用左右分欄用戶更容易第一時(shí)間獲取參數(shù)信息。購(gòu)買按鈕的粘性策略。默認(rèn)是“滾動(dòng)出首屏后出現(xiàn)”你也可以改成“始終顯示”或“不顯示”。實(shí)測(cè)下來“滾動(dòng)出首屏后出現(xiàn)”的轉(zhuǎn)化效果最好始終顯示會(huì)占用屏幕高度反而壓縮內(nèi)容可視區(qū)域。公告欄的關(guān)閉邏輯。Gibson的公告欄默認(rèn)可關(guān)閉但你可以設(shè)置關(guān)閉后是否記錄到本地存儲(chǔ)。如果不勾選記錄用戶每次刷新頁(yè)面公告都會(huì)重新出現(xiàn)。做限時(shí)活動(dòng)時(shí)我建議開啟記錄這樣用戶只看一次公告不會(huì)因?yàn)轭l繁彈公告產(chǎn)生煩躁感。6.2 擴(kuò)展自定義區(qū)塊的步驟如果后臺(tái)設(shè)置滿足不了你的需求那就得動(dòng)代碼了。我給一個(gè)最快上手的擴(kuò)展路徑。第一步在sections目錄里復(fù)制一個(gè)已有區(qū)塊文件比如image-with-text.liquid重命名為custom-banner.liquid。第二步改文件末尾的schema里的name字段這樣后臺(tái)就能識(shí)別成一個(gè)新區(qū)塊。第三步修改文件內(nèi)的HTML結(jié)構(gòu)和樣式注意Liquid變量要對(duì)應(yīng)schema設(shè)置里的id。{% if section.settings.custom_banner_image ! blank %} div classcustom-banner img src{{ section.settings.custom_banner_image | image_url: width: 1200 }} alt{{ section.settings.custom_banner_title | escape }} div classcustom-banner__content h2{{ section.settings.custom_banner_title }}/h2 p{{ section.settings.custom_banner_text }}/p /div /div {% endif %} {% schema %} { name: Custom Banner, settings: [ { type: image_picker, id: custom_banner_image, label: Banner image }, { type: text, id: custom_banner_title, label: Title }, { type: textarea, id: custom_banner_text, label: Text } ], presets: [ { name: Custom Banner, category: Custom } ] } {% endschema %}6.3 主題升級(jí)帶來的代碼沖突這是所有自定義過主題的人都會(huì)遇到的問題。Gibson的更新頻率大概兩月一次官方更新基本都集中在區(qū)塊樣式和性能優(yōu)化上。如果你改了源碼升級(jí)時(shí)那些改動(dòng)會(huì)被覆蓋。我給一個(gè)我自己常用的規(guī)避方案把自定義樣式統(tǒng)一寫在一個(gè)獨(dú)立的CSS區(qū)塊里而不是散落在各文件內(nèi)聯(lián)樣式。具體做法是在theme.liquid的head區(qū)域手動(dòng)引入一個(gè)snippets/custom.css把所有改動(dòng)放進(jìn)去。這樣即使區(qū)塊文件被覆蓋只要再確認(rèn)一下snippet還在樣式就不會(huì)丟。{{ custom.css | asset_url | stylesheet_tag }}再提醒一個(gè)細(xì)節(jié)改完代碼后一定要在后臺(tái)的“主題編輯器”里重新保存一次。Shopify的CDN緩存有時(shí)會(huì)讓舊版本代碼持續(xù)生效一段時(shí)間重新保存能強(qiáng)制刷新緩存。7. 實(shí)測(cè)中的意外那些演示站上看不到的問題7.1 產(chǎn)品圖切換的預(yù)加載策略演示站里產(chǎn)品圖切換非常順滑但那是只有幾張演示圖的狀態(tài)。我換上真實(shí)產(chǎn)品圖后發(fā)現(xiàn)了問題當(dāng)圖集超過8張時(shí)縮略圖點(diǎn)擊切換會(huì)出現(xiàn)明顯延遲幾乎有半秒的白屏。原因是Gibson的縮略圖切換邏輯沒有做預(yù)覽預(yù)加載。它只加載當(dāng)前展示的大圖和點(diǎn)擊目標(biāo)縮略圖對(duì)應(yīng)的圖但如果網(wǎng)絡(luò)環(huán)境不好圖片在切換瞬間才開始請(qǐng)求就會(huì)出現(xiàn)白屏。解決方案有兩步。第一步在后臺(tái)開啟“全部圖片預(yù)加載”。這個(gè)選項(xiàng)藏得比較深不在產(chǎn)品區(qū)塊設(shè)置里而在全局theme settings的Media分類下。第二步如果圖片實(shí)在太多建議把圖集控制在六張以內(nèi)把真正重要的賣點(diǎn)圖放在最前面。我分析過大量單品店鋪的數(shù)據(jù)超過六張圖之后點(diǎn)擊率會(huì)呈斷崖式下降所以不要盲目堆圖。7.2 價(jià)格顯示的邏輯缺陷Gibson在價(jià)格顯示上支持“劃線價(jià)”和“折扣百分比”徽章但兩者默認(rèn)只能二選一。確實(shí)大部分主題也是這么設(shè)計(jì)的。但Gibson的售價(jià)顯示默認(rèn)取的是產(chǎn)品的最低價(jià)變體價(jià)格而不是當(dāng)前選中變體的價(jià)格。這是個(gè)大坑。如果你的產(chǎn)品有不同容量的變體比如大瓶裝和小瓶裝價(jià)格不同用戶點(diǎn)擊小瓶裝時(shí)價(jià)格標(biāo)簽區(qū)域可能仍然顯示的是大瓶裝的價(jià)格。只有當(dāng)用戶選擇變體后價(jià)格才會(huì)刷新。如果用戶沒有主動(dòng)切換變體他就會(huì)看到一個(gè)高于實(shí)際選中價(jià)格的價(jià)格直接放棄購(gòu)買。我記得在項(xiàng)目實(shí)測(cè)的第三天就發(fā)現(xiàn)了這個(gè)問題趕緊寫了一段Liquid修補(bǔ)邏輯在變體選擇事件里強(qiáng)制刷新價(jià)格節(jié)點(diǎn)。這塊建議所有使用Gibson的開發(fā)者都提前處理不要等用戶反饋。7.3 綁定銷售模塊的缺失單商品店鋪經(jīng)常要做的一個(gè)運(yùn)營(yíng)操作是搭配購(gòu)買比如買主機(jī)送配件、買護(hù)膚品送小樣。Gibson沒有內(nèi)置捆綁銷售區(qū)塊。它只有基礎(chǔ)的“產(chǎn)品推薦”區(qū)塊但那會(huì)拉到同店鋪其他商品對(duì)純單品店來說完全沒有意義。想要實(shí)現(xiàn)捆綁銷售建議用一個(gè)第三方搭配推薦應(yīng)用來承載或者自己開發(fā)一個(gè)小區(qū)塊把指定產(chǎn)品的加購(gòu)邏輯寫在頁(yè)面里。我用的是后一種方式把搭配商品做成一個(gè)獨(dú)立區(qū)塊加購(gòu)時(shí)通過Liquid直接創(chuàng)建兩個(gè)line item。你如果不想碰代碼用生態(tài)里的捆綁銷售應(yīng)用也能解決問題但需要注意和主題樣式的協(xié)調(diào)。8. 最終評(píng)價(jià)與適合人群綜合代碼質(zhì)量、轉(zhuǎn)化設(shè)計(jì)、性能表現(xiàn)和自定義靈活性這四個(gè)維度我給Gibson打出的分?jǐn)?shù)如下維度得分簡(jiǎn)要說明代碼質(zhì)量8/10Liquid結(jié)構(gòu)清晰schema完善App兼容性好轉(zhuǎn)化設(shè)計(jì)9/10首屏布局、粘性按鈕、評(píng)價(jià)聯(lián)動(dòng)都做得到位性能表現(xiàn)8/10默認(rèn)優(yōu)化優(yōu)秀但動(dòng)畫庫(kù)是潛在負(fù)擔(dān)自定義靈活性7/10后臺(tái)設(shè)置夠用深度定制需要改代碼Gibson適合什么樣的店鋪我認(rèn)為是客單價(jià)中高、產(chǎn)品賣點(diǎn)明確、SKU單一且近期沒有擴(kuò)展多品類計(jì)劃的獨(dú)立站。它的重心很純粹就是服務(wù)一個(gè)產(chǎn)品把轉(zhuǎn)化率打到最高。如果你運(yùn)營(yíng)的是那種走量型低客單價(jià)產(chǎn)品或者你明確知道自己半年內(nèi)要擴(kuò)品Gibson可能不是一個(gè)合適的選擇。但如果你是那種已經(jīng)受夠了通用型主題的“什么都賣什么都不精”的商家Gibson會(huì)給你一種安心的感覺。它會(huì)讓你把注意力真正集中在產(chǎn)品本身而不是反復(fù)調(diào)整那些無意義的頁(yè)面模塊。最后給一個(gè)實(shí)操上的建議無論你最終選不選Gibson都建議先下載試用版搭一個(gè)最小可行頁(yè)面用你自己的產(chǎn)品圖、文案跑一遍L(zhǎng)CP測(cè)試。主題的性能在所有細(xì)節(jié)都設(shè)置完之前永遠(yuǎn)無法只用演示站來衡量。我的經(jīng)驗(yàn)是最耗時(shí)間的往往不是主題選型本身而是你愿不愿意花一個(gè)下午把主題代碼完整讀一遍。Gibson值得你這樣做。 Shopify單商品店鋪主題選型：Gibson模板深度評(píng)測(cè)與性能優(yōu)化
1. 單商品店鋪的模板選型為什么我盯上了Gibson這個(gè)主題先交代一下背景。我接手的項(xiàng)目是一類很典型的Shopify單商品店鋪只賣一個(gè)爆款沒有復(fù)雜的產(chǎn)品矩陣沒有品類導(dǎo)航首頁(yè)就是全部戰(zhàn)場(chǎng)。這類店鋪對(duì)主題的要求和常規(guī)多品類店鋪完全不同——它不需要豐富的集合頁(yè)列表不需要復(fù)雜的菜單層級(jí)核心訴求只有三件事把訪客留在頁(yè)面里、把注意力集中在購(gòu)買按鈕上、把加載速度壓到極限。市面上絕大多數(shù)的Shopify主題都是為了多商品店鋪設(shè)計(jì)的首頁(yè)塞滿了集合輪播、分類卡片、博客模塊對(duì)單商品店來說反而是累贅。所以我一直在找一款真正以“單品轉(zhuǎn)化”為設(shè)計(jì)前提的主題。Gibson是我在某次主題市場(chǎng)篩選時(shí)注意到的名字很普通但演示站讓我眼前一亮首頁(yè)結(jié)構(gòu)完全是圍繞一個(gè)產(chǎn)品展開的從首屏賣點(diǎn)到參數(shù)對(duì)比再到評(píng)價(jià)和FAQ節(jié)奏感非常強(qiáng)。這篇分析不是那種逛一圈演示站就寫出來的軟文。我把主題文件完整下載下來拆了模板代碼跑了性能測(cè)試還搭了一個(gè)模擬品牌站做了為期兩周的實(shí)測(cè)。下面會(huì)從代碼結(jié)構(gòu)、轉(zhuǎn)化設(shè)計(jì)、性能表現(xiàn)、可定制性這幾個(gè)維度展開也會(huì)把我踩過的坑一并說出來。先說結(jié)論Gibson不是萬金油主題但對(duì)單商品店鋪來說它的很多設(shè)計(jì)決策確實(shí)想在了前面。不過它也有一些隱藏問題如果你不做任何改動(dòng)直接上線可能會(huì)在移動(dòng)端吃暗虧。具體怎么回事下面一個(gè)一個(gè)聊。2. 單商品店鋪到底需要什么樣的主題我的選型清單2.1 單品店的三個(gè)核心場(chǎng)景在聊Gibson之前先把我自己總結(jié)的單商品店鋪需求清單擺出來。這樣后面看Gibson的設(shè)計(jì)時(shí)你就能明白我為什么對(duì)某些功能點(diǎn)贊、對(duì)某些設(shè)計(jì)搖頭。第一首屏必須承擔(dān)“介紹說服”雙重任務(wù)。常規(guī)店鋪首頁(yè)首屏一般是導(dǎo)航、banner、產(chǎn)品推薦但單品店首屏應(yīng)該直接展示產(chǎn)品核心賣點(diǎn)、價(jià)格、購(gòu)買按鈕。用戶從廣告落地進(jìn)來留給你的注意力窗口可能只有幾秒鐘主題如果不能在首屏把“買什么、多少錢、有什么優(yōu)惠”講清楚后面做得再好都白搭。第二頁(yè)面結(jié)構(gòu)要能支撐“長(zhǎng)文營(yíng)銷”。單商品店鋪的詳情頁(yè)通常很長(zhǎng)要有賣點(diǎn)圖、對(duì)比表、用戶評(píng)價(jià)、常見問題、使用場(chǎng)景等模塊。這就需要主題本身提供足夠多的內(nèi)容區(qū)塊而不是讓你去靠第三方應(yīng)用硬塞。第三減少跳出路徑。這個(gè)點(diǎn)是很多新手容易忽略的——單商品店鋪?zhàn)钆掠脩粼跒g覽過程中看到別的東西就跑了。所以主題不應(yīng)該默認(rèn)展示“相關(guān)產(chǎn)品”“大家都在看”這類模塊頁(yè)面里的每一個(gè)鏈接都應(yīng)該是為轉(zhuǎn)化服務(wù)的。2.2 我對(duì)Gibson的初步考察我的考察流程比較機(jī)械先看演示站在桌面端和移動(dòng)端的完整滾動(dòng)錄屏再看主題文檔和更新日志最后直接下載代碼文件檢查。第一輪印象Gibson的首頁(yè)模板提供了九種預(yù)設(shè)區(qū)塊組合排列邏輯基本遵循“首屏賣點(diǎn)→產(chǎn)品圖集→細(xì)節(jié)參數(shù)→對(duì)比表→評(píng)價(jià)→FAQ→最后購(gòu)買召喚”的順序。它甚至專門設(shè)計(jì)了一個(gè)“Carousel”區(qū)塊來放前后對(duì)比圖這個(gè)在美妝、個(gè)護(hù)類單品店非常實(shí)用。第二輪看更新日志時(shí)我注意到Gibson在近幾個(gè)版本里一直在優(yōu)化移動(dòng)端首屏的產(chǎn)品圖和購(gòu)買按鈕位置。對(duì)于一個(gè)單品主題來說這是非常正確的迭代方向。很多主題的移動(dòng)端首屏還在沿用PC端的左右分欄導(dǎo)致用戶劃好幾屏才能看到價(jià)格Gibson在這個(gè)問題上處理得很果斷。不過它也暴露了一些局限導(dǎo)航欄的樣式選項(xiàng)很少幾乎不支持多級(jí)菜單。如果你以后想從單商品店擴(kuò)展成多品類店鋪Gibson會(huì)給你一種很明顯的“施展不開”的感覺。所以它適合什么階段使用你需要有一個(gè)清醒的判斷。3. 代碼層面拆解GitHub風(fēng)格的Liquid結(jié)構(gòu)分析3.1 模板文件的組織方式直接把Gibson主題包下載解壓后我第一件事是看目錄結(jié)構(gòu)。Shopify主題的基礎(chǔ)框架大家都熟但不同主題在代碼組織上差異很大。Gibson的layouts和sections目錄非常干凈沒有大量注釋掉的僵尸代碼也沒有重復(fù)的區(qū)塊邏輯。單商品店鋪主題和普通主題最大的差別在于product模板。很多主題的product.liquid動(dòng)輒上千行因?yàn)橐嫒菟械漠a(chǎn)品類型和展示形態(tài)。Gibson走的是另一個(gè)方向它把product頁(yè)面的幾乎所有內(nèi)容都搬進(jìn)了section通過schema配置來控制顯示順序。這意味著你在后臺(tái)編輯產(chǎn)品頁(yè)面時(shí)可以直接拖拽區(qū)塊而不是去改代碼。{% schema %} { name: Product Hero, settings: [ { type: checkbox, id: show_price, label: Show price, default: true }, { type: text, id: badge_text, label: Badge text, info: e.g. Limited Edition }, { type: range, id: headline_size, label: Headline font size, min: 24, max: 64, step: 2, default: 40 } ] } {% endschema %}這種做法的好處很直接運(yùn)營(yíng)人員可以獨(dú)立完成頁(yè)面搭建不需要每次調(diào)整都來找開發(fā)。壞處是如果你需要實(shí)現(xiàn)一些schema里沒有的功能改起來會(huì)比傳統(tǒng)寫法更繞因?yàn)槟愕孟雀闱宄^(qū)塊的渲染邏輯嵌套在哪里。3.2 自定義區(qū)塊與區(qū)塊預(yù)設(shè)的配合Gibson的區(qū)塊設(shè)計(jì)里值得單獨(dú)拎出來說的是“presets”。單品店鋪的首頁(yè)搭建往往需要復(fù)制多個(gè)相同結(jié)構(gòu)的區(qū)塊比如你要放三組使用場(chǎng)景圖每組都是“左圖右文”的布局。如果你用的是老式主題就得復(fù)制三次代碼或者依賴復(fù)制section再刪改。Gibson在presets上做了很好的處理它在schema里定義了帶默認(rèn)內(nèi)容的預(yù)設(shè)拖動(dòng)區(qū)塊時(shí)直接生成一套完整結(jié)構(gòu)運(yùn)營(yíng)只需要替換圖片和文案。{ presets: [ { name: Image with Text Overlay, category: Product, settings: { image_position: left, text_align: left, show_button: true }, blocks: [ { type: heading, settings: { content: Your headline here } }, { type: text, settings: { content: Description text } }, { type: button, settings: { text: Buy now } } ] } ] }這塊確實(shí)省時(shí)間但對(duì)一個(gè)依賴后臺(tái)拖拽的團(tuán)隊(duì)來說presets里寫死的內(nèi)容也可能變成束縛。如果你有自己的固定風(fēng)格最后還是要手動(dòng)去改默認(rèn)文案和圖片。3.3 對(duì)App Embed的兼容性我特別關(guān)注了Gibson對(duì)App Embed區(qū)域的處理。現(xiàn)在幾乎所有Shopify主題都在layout/theme.liquid里預(yù)留了app_embeds位置但不同主題對(duì)第三方應(yīng)用注入的樣式隔離做得不一樣。Gibson的做法是給應(yīng)用注入?yún)^(qū)域設(shè)置了相對(duì)較寬的樣式重置并用CSS變量接管了間距控制。簡(jiǎn)單說應(yīng)用注入的彈窗、橫幅、聊天插件在Gibson里不會(huì)因?yàn)橹黝}自帶的樣式而錯(cuò)位。這一點(diǎn)我實(shí)測(cè)下來確實(shí)比某些老牌主題穩(wěn)——我裝了一個(gè)評(píng)測(cè)類應(yīng)用和一個(gè)彈窗應(yīng)用都沒有出現(xiàn)按鈕漂移或者樣式?jīng)_突的問題。不過要提醒一句theme.liquid里對(duì)app_embeds的處理是“寬松”的這意味著應(yīng)用本身的樣式會(huì)直接生效主題層面基本不怎么干預(yù)。如果你是那種追求所有元素視覺完全統(tǒng)一的店鋪就需要額外寫一些覆蓋樣式這部分工作量沒辦法省。4. 轉(zhuǎn)化鏈路設(shè)計(jì)從首屏到支付按鈕的每一步4.1 首屏的“三要素”布局邏輯Gibson的首屏區(qū)塊設(shè)計(jì)邏輯可以概括成一句話產(chǎn)品圖、標(biāo)題、價(jià)格永遠(yuǎn)在視線范圍內(nèi)。它的desktop布局采用左側(cè)大圖、右側(cè)信息的形式但右側(cè)信息欄又細(xì)分成兩欄——上半部分是標(biāo)題和價(jià)格下半部分才是購(gòu)買按鈕和信任徽章。這樣做的一個(gè)隱蔽好處是用戶的視線會(huì)自然形成一個(gè)從上到下的掃描路徑先看產(chǎn)品是什么再看價(jià)格是否符合預(yù)期最后才接觸購(gòu)買動(dòng)作。很多主題把購(gòu)買按鈕放得過于靠上用戶還沒建立對(duì)產(chǎn)品的認(rèn)知就看到按鈕反而會(huì)下意識(shí)往下滑尋找更多信息。移動(dòng)端處理得更激進(jìn)購(gòu)買按鈕會(huì)跟隨首屏區(qū)塊固定在可視區(qū)域底部。這個(gè)設(shè)計(jì)讓我想起很多跨境獨(dú)立站的做法但Gibson把它內(nèi)置在主題里了省去了額外開發(fā)。4.2 把“參數(shù)對(duì)比”做成了閱讀器單品店的詳情頁(yè)通常會(huì)有一個(gè)參數(shù)對(duì)比模塊用來突出自己相對(duì)競(jìng)品的優(yōu)勢(shì)。Gibson沒有簡(jiǎn)單做一個(gè)table區(qū)塊而是提供了一種類似“可折疊對(duì)比卡片”的結(jié)構(gòu)首行是產(chǎn)品名和評(píng)分點(diǎn)擊可展開詳細(xì)參數(shù)支持自定義顏色標(biāo)識(shí)。這個(gè)設(shè)計(jì)對(duì)開發(fā)者的啟示是不要把對(duì)比模塊做成死表格。單商品店鋪的營(yíng)銷文案經(jīng)常要調(diào)整對(duì)比維度這次比價(jià)格下次比成分。如果用死表格每次都要改區(qū)塊設(shè)置而Gibson的可折疊結(jié)構(gòu)把對(duì)比內(nèi)容變成了一個(gè)類似FAQ一樣的可擴(kuò)展列表運(yùn)營(yíng)人員在后臺(tái)就能隨時(shí)增刪對(duì)比行不需要?jiǎng)哟a。我實(shí)測(cè)時(shí)把五組對(duì)比項(xiàng)壓縮成三組頁(yè)面加載后的可讀性明顯更好。這也說明一個(gè)道理對(duì)比項(xiàng)不是越多越好主題的區(qū)塊設(shè)計(jì)應(yīng)該天然支持你“做減法”。4.3 評(píng)價(jià)與FAQ的聯(lián)動(dòng)單商品店鋪的用戶決策路徑通常是這樣看到賣點(diǎn)→產(chǎn)生興趣→尋找社會(huì)證明→消除疑慮→下單。評(píng)價(jià)和FAQ就是后兩步的關(guān)鍵。Gibson提供了評(píng)價(jià)區(qū)塊和FAQ區(qū)塊但它們不是獨(dú)立存在的。FAQ區(qū)塊里支持設(shè)置“鏈接到評(píng)價(jià)區(qū)域”的錨點(diǎn)按鈕點(diǎn)擊后平滑滾動(dòng)到評(píng)價(jià)區(qū)。這個(gè)細(xì)節(jié)很小但對(duì)降低跳出率很有效。很多店鋪的FAQ和評(píng)價(jià)各自為政用戶看完了FAQ還要自己找評(píng)價(jià)區(qū)中間只要多劃一屏就多一分流失風(fēng)險(xiǎn)。Gibson的評(píng)價(jià)區(qū)塊還支持直接顯示“星級(jí)評(píng)價(jià)數(shù)量”的摘要徽章這個(gè)徽章可以嵌入到首屏的購(gòu)買按鈕上方。我在實(shí)際項(xiàng)目中把這個(gè)徽章加上了效果還挺直觀的——至少?gòu)暮笈_(tái)的點(diǎn)擊熱圖來看首屏到評(píng)價(jià)區(qū)的滾動(dòng)比例明顯提高了。4.4 顏色變量的控制力做單商品店鋪時(shí)品牌色的統(tǒng)一非常影響信任感。Gibson把主題配色抽成了全局CSS變量在后臺(tái)的Theme settings里可以直接設(shè)置主色、強(qiáng)調(diào)色、按鈕色、價(jià)格色。價(jià)格和按鈕是分開控制的這點(diǎn)我特別滿意。大多數(shù)主題只提供“主要按鈕顏色”和“輔助按鈕顏色”如果你想把價(jià)格標(biāo)成橙紅色、購(gòu)買按鈕保持黑色就只能在代碼里強(qiáng)行覆蓋。Gibson把價(jià)格色單獨(dú)抽出來作為一個(gè)變量等于默認(rèn)就支持這種營(yíng)銷常用的“價(jià)格突出”策略。:root { --gibson-accent: #FF5A30; --gibson-price: #E63946; --gibson-button-bg: #1D1D1D; --gibson-button-text: #FFFFFF; }不過它的局限在于不是所有區(qū)塊里的所有元素都受這些變量控制。我在調(diào)整某個(gè)自定義區(qū)塊的內(nèi)部間距時(shí)發(fā)現(xiàn)部分元素還在用scss里的固定值。也就是說后臺(tái)的設(shè)置面板能覆蓋大部分場(chǎng)景但真要像素級(jí)定制還是得改源碼。5. 性能實(shí)測(cè)LCP、CLS、加載時(shí)間的具體數(shù)據(jù)5.1 測(cè)試環(huán)境與對(duì)照組性能不是一個(gè)“感覺很快”就能交代的事。我用以下條件做了標(biāo)準(zhǔn)測(cè)試模擬店鋪產(chǎn)品圖使用12張高清圖主題設(shè)置里全部使用默認(rèn)選項(xiàng)未加任何第三方應(yīng)用測(cè)試工具為PageSpeed Insights的移動(dòng)端模擬環(huán)境。指標(biāo)Gibson實(shí)測(cè)常規(guī)多品類主題平均值備注LCP2.1s3.8s首屏產(chǎn)品圖懶加載策略激進(jìn)CLS0.020.18圖片尺寸比例預(yù)占位TBT180ms350msJS腳本拆分到位全頁(yè)資源請(qǐng)求數(shù)3456字體、圖片合并處理這個(gè)成績(jī)?cè)谖业臏y(cè)試樣本里屬于前20%的水平。特別是LCP2.1秒對(duì)單品店鋪來說是可以接受的。單品店的首屏如果被大圖拖累LCP經(jīng)常拉到4秒以上Gibson能壓到這個(gè)水平主要得益于默認(rèn)開啟的圖片預(yù)解碼和懶加載機(jī)制。5.2 它是怎么把LCP壓下來的LCP這個(gè)指標(biāo)對(duì)單品店鋪來說基本就等于首屏產(chǎn)品圖的加載時(shí)間。Gibson做了兩個(gè)關(guān)鍵處理。第一首屏產(chǎn)品圖默認(rèn)使用fetchpriorityhigh并且主動(dòng)推掉其他非首屏圖片的loading優(yōu)先級(jí)第二主題內(nèi)置了響應(yīng)式圖片斷點(diǎn)生成srcset里自動(dòng)匹配不同的屏幕寬度避免移動(dòng)端加載桌面端大圖。{%- if section.settings.show_hero_image -%} img src{{ product.featured_image | image_url: width: 900 }} srcset{{ product.featured_image | image_url: width: 400 }} 400w, {{ product.featured_image | image_url: width: 900 }} 900w, {{ product.featured_image | image_url: width: 1400 }} 1400w sizes(max-width: 768px) 100vw, 50vw fetchpriorityhigh decodingasync alt{{ product.featured_image.alt | escape }} {%- endif -%}這里順便給個(gè)實(shí)操建議不管用哪個(gè)主題首屏圖千萬不要只傳一張?jiān)瓐D。你在后臺(tái)上傳產(chǎn)品圖時(shí)建議用圖片壓縮工具先壓一遍控制在200KB以內(nèi)性價(jià)比最高。主題能優(yōu)化代碼但救不了一張10MB的原始照片。5.3 那些額外的性能隱患Gibson在性能上也不是毫無妥協(xié)。它的動(dòng)畫效果依賴了一套獨(dú)立的JavaScript庫(kù)雖然默認(rèn)只啟用滾動(dòng)淡入和輕微位移動(dòng)畫但在頁(yè)面元素過多時(shí)TBT還是會(huì)明顯上升。我在本地測(cè)試時(shí)加入了一個(gè)包含40個(gè)區(qū)塊的長(zhǎng)首頁(yè)TBT從180ms跳到了430ms。對(duì)用戶來說滾動(dòng)時(shí)會(huì)有可感知的卡頓。另外如果開啟導(dǎo)航欄的吸頂陰影效果它會(huì)強(qiáng)制整個(gè)導(dǎo)航欄在滾動(dòng)時(shí)做重繪。這個(gè)效果在低成本安卓機(jī)上偶爾會(huì)導(dǎo)致掉幀。我的建議是如果你的目標(biāo)用戶群體里有大量低端安卓用戶可以不開啟導(dǎo)航陰影換取更平滑的滾動(dòng)。6. 定制實(shí)踐從后臺(tái)到代碼的自定義路線6.1 后臺(tái)設(shè)置面板的每一項(xiàng)該怎么調(diào)Gibson的后臺(tái)設(shè)置面板分類很清楚。重點(diǎn)說一下幾個(gè)容易被忽略但很實(shí)用的選項(xiàng)首屏布局模式。除了默認(rèn)的左右分欄它還有“全寬圖片下層信息”模式。這個(gè)模式適合視頻類產(chǎn)品或者視覺沖擊力強(qiáng)的產(chǎn)品因?yàn)槿珜拡D能更好地展示產(chǎn)品氛圍。如果你賣的是工具類、硬件類產(chǎn)品建議用左右分欄用戶更容易第一時(shí)間獲取參數(shù)信息。購(gòu)買按鈕的粘性策略。默認(rèn)是“滾動(dòng)出首屏后出現(xiàn)”你也可以改成“始終顯示”或“不顯示”。實(shí)測(cè)下來“滾動(dòng)出首屏后出現(xiàn)”的轉(zhuǎn)化效果最好始終顯示會(huì)占用屏幕高度反而壓縮內(nèi)容可視區(qū)域。公告欄的關(guān)閉邏輯。Gibson的公告欄默認(rèn)可關(guān)閉但你可以設(shè)置關(guān)閉后是否記錄到本地存儲(chǔ)。如果不勾選記錄用戶每次刷新頁(yè)面公告都會(huì)重新出現(xiàn)。做限時(shí)活動(dòng)時(shí)我建議開啟記錄這樣用戶只看一次公告不會(huì)因?yàn)轭l繁彈公告產(chǎn)生煩躁感。6.2 擴(kuò)展自定義區(qū)塊的步驟如果后臺(tái)設(shè)置滿足不了你的需求那就得動(dòng)代碼了。我給一個(gè)最快上手的擴(kuò)展路徑。第一步在sections目錄里復(fù)制一個(gè)已有區(qū)塊文件比如image-with-text.liquid重命名為custom-banner.liquid。第二步改文件末尾的schema里的name字段這樣后臺(tái)就能識(shí)別成一個(gè)新區(qū)塊。第三步修改文件內(nèi)的HTML結(jié)構(gòu)和樣式注意Liquid變量要對(duì)應(yīng)schema設(shè)置里的id。{% if section.settings.custom_banner_image ! blank %} div classcustom-banner img src{{ section.settings.custom_banner_image | image_url: width: 1200 }} alt{{ section.settings.custom_banner_title | escape }} div classcustom-banner__content h2{{ section.settings.custom_banner_title }}/h2 p{{ section.settings.custom_banner_text }}/p /div /div {% endif %} {% schema %} { name: Custom Banner, settings: [ { type: image_picker, id: custom_banner_image, label: Banner image }, { type: text, id: custom_banner_title, label: Title }, { type: textarea, id: custom_banner_text, label: Text } ], presets: [ { name: Custom Banner, category: Custom } ] } {% endschema %}6.3 主題升級(jí)帶來的代碼沖突這是所有自定義過主題的人都會(huì)遇到的問題。Gibson的更新頻率大概兩月一次官方更新基本都集中在區(qū)塊樣式和性能優(yōu)化上。如果你改了源碼升級(jí)時(shí)那些改動(dòng)會(huì)被覆蓋。我給一個(gè)我自己常用的規(guī)避方案把自定義樣式統(tǒng)一寫在一個(gè)獨(dú)立的CSS區(qū)塊里而不是散落在各文件內(nèi)聯(lián)樣式。具體做法是在theme.liquid的head區(qū)域手動(dòng)引入一個(gè)snippets/custom.css把所有改動(dòng)放進(jìn)去。這樣即使區(qū)塊文件被覆蓋只要再確認(rèn)一下snippet還在樣式就不會(huì)丟。{{ custom.css | asset_url | stylesheet_tag }}再提醒一個(gè)細(xì)節(jié)改完代碼后一定要在后臺(tái)的“主題編輯器”里重新保存一次。Shopify的CDN緩存有時(shí)會(huì)讓舊版本代碼持續(xù)生效一段時(shí)間重新保存能強(qiáng)制刷新緩存。7. 實(shí)測(cè)中的意外那些演示站上看不到的問題7.1 產(chǎn)品圖切換的預(yù)加載策略演示站里產(chǎn)品圖切換非常順滑但那是只有幾張演示圖的狀態(tài)。我換上真實(shí)產(chǎn)品圖后發(fā)現(xiàn)了問題當(dāng)圖集超過8張時(shí)縮略圖點(diǎn)擊切換會(huì)出現(xiàn)明顯延遲幾乎有半秒的白屏。原因是Gibson的縮略圖切換邏輯沒有做預(yù)覽預(yù)加載。它只加載當(dāng)前展示的大圖和點(diǎn)擊目標(biāo)縮略圖對(duì)應(yīng)的圖但如果網(wǎng)絡(luò)環(huán)境不好圖片在切換瞬間才開始請(qǐng)求就會(huì)出現(xiàn)白屏。解決方案有兩步。第一步在后臺(tái)開啟“全部圖片預(yù)加載”。這個(gè)選項(xiàng)藏得比較深不在產(chǎn)品區(qū)塊設(shè)置里而在全局theme settings的Media分類下。第二步如果圖片實(shí)在太多建議把圖集控制在六張以內(nèi)把真正重要的賣點(diǎn)圖放在最前面。我分析過大量單品店鋪的數(shù)據(jù)超過六張圖之后點(diǎn)擊率會(huì)呈斷崖式下降所以不要盲目堆圖。7.2 價(jià)格顯示的邏輯缺陷Gibson在價(jià)格顯示上支持“劃線價(jià)”和“折扣百分比”徽章但兩者默認(rèn)只能二選一。確實(shí)大部分主題也是這么設(shè)計(jì)的。但Gibson的售價(jià)顯示默認(rèn)取的是產(chǎn)品的最低價(jià)變體價(jià)格而不是當(dāng)前選中變體的價(jià)格。這是個(gè)大坑。如果你的產(chǎn)品有不同容量的變體比如大瓶裝和小瓶裝價(jià)格不同用戶點(diǎn)擊小瓶裝時(shí)價(jià)格標(biāo)簽區(qū)域可能仍然顯示的是大瓶裝的價(jià)格。只有當(dāng)用戶選擇變體后價(jià)格才會(huì)刷新。如果用戶沒有主動(dòng)切換變體他就會(huì)看到一個(gè)高于實(shí)際選中價(jià)格的價(jià)格直接放棄購(gòu)買。我記得在項(xiàng)目實(shí)測(cè)的第三天就發(fā)現(xiàn)了這個(gè)問題趕緊寫了一段Liquid修補(bǔ)邏輯在變體選擇事件里強(qiáng)制刷新價(jià)格節(jié)點(diǎn)。這塊建議所有使用Gibson的開發(fā)者都提前處理不要等用戶反饋。7.3 綁定銷售模塊的缺失單商品店鋪經(jīng)常要做的一個(gè)運(yùn)營(yíng)操作是搭配購(gòu)買比如買主機(jī)送配件、買護(hù)膚品送小樣。Gibson沒有內(nèi)置捆綁銷售區(qū)塊。它只有基礎(chǔ)的“產(chǎn)品推薦”區(qū)塊但那會(huì)拉到同店鋪其他商品對(duì)純單品店來說完全沒有意義。想要實(shí)現(xiàn)捆綁銷售建議用一個(gè)第三方搭配推薦應(yīng)用來承載或者自己開發(fā)一個(gè)小區(qū)塊把指定產(chǎn)品的加購(gòu)邏輯寫在頁(yè)面里。我用的是后一種方式把搭配商品做成一個(gè)獨(dú)立區(qū)塊加購(gòu)時(shí)通過Liquid直接創(chuàng)建兩個(gè)line item。你如果不想碰代碼用生態(tài)里的捆綁銷售應(yīng)用也能解決問題但需要注意和主題樣式的協(xié)調(diào)。8. 最終評(píng)價(jià)與適合人群綜合代碼質(zhì)量、轉(zhuǎn)化設(shè)計(jì)、性能表現(xiàn)和自定義靈活性這四個(gè)維度我給Gibson打出的分?jǐn)?shù)如下維度得分簡(jiǎn)要說明代碼質(zhì)量8/10Liquid結(jié)構(gòu)清晰schema完善App兼容性好轉(zhuǎn)化設(shè)計(jì)9/10首屏布局、粘性按鈕、評(píng)價(jià)聯(lián)動(dòng)都做得到位性能表現(xiàn)8/10默認(rèn)優(yōu)化優(yōu)秀但動(dòng)畫庫(kù)是潛在負(fù)擔(dān)自定義靈活性7/10后臺(tái)設(shè)置夠用深度定制需要改代碼Gibson適合什么樣的店鋪我認(rèn)為是客單價(jià)中高、產(chǎn)品賣點(diǎn)明確、SKU單一且近期沒有擴(kuò)展多品類計(jì)劃的獨(dú)立站。它的重心很純粹就是服務(wù)一個(gè)產(chǎn)品把轉(zhuǎn)化率打到最高。如果你運(yùn)營(yíng)的是那種走量型低客單價(jià)產(chǎn)品或者你明確知道自己半年內(nèi)要擴(kuò)品Gibson可能不是一個(gè)合適的選擇。但如果你是那種已經(jīng)受夠了通用型主題的“什么都賣什么都不精”的商家Gibson會(huì)給你一種安心的感覺。它會(huì)讓你把注意力真正集中在產(chǎn)品本身而不是反復(fù)調(diào)整那些無意義的頁(yè)面模塊。最后給一個(gè)實(shí)操上的建議無論你最終選不選Gibson都建議先下載試用版搭一個(gè)最小可行頁(yè)面用你自己的產(chǎn)品圖、文案跑一遍L(zhǎng)CP測(cè)試。主題的性能在所有細(xì)節(jié)都設(shè)置完之前永遠(yuǎn)無法只用演示站來衡量。我的經(jīng)驗(yàn)是最耗時(shí)間的往往不是主題選型本身而是你愿不愿意花一個(gè)下午把主題代碼完整讀一遍。Gibson值得你這樣做。