手把手教你優(yōu)化獨(dú)立站落地頁(yè)，提升轉(zhuǎn)化率-內(nèi)附Cart & Checkout頁(yè)面優(yōu)化技巧

▲點(diǎn)擊藍(lán)色“Jack說(shuō)跨境”▲并設(shè)置星標(biāo)?立刻關(guān)注獲取最新一手實(shí)戰(zhàn)分享???

最近有很多朋友加我，很多人剛做獨(dú)立站。建站以及運(yùn)營(yíng)的問(wèn)題是一大痛點(diǎn)。很多朋友還是很希望我出一篇文章把網(wǎng)站落地頁(yè)優(yōu)化這件事情講清楚的。

我們今天這篇文章就從如何構(gòu)建一個(gè)高轉(zhuǎn)化的落地頁(yè)開(kāi)始，聊透怎么提升獨(dú)立站網(wǎng)站轉(zhuǎn)化率。

我們以Shopify網(wǎng)站為例。其實(shí)WooCommerce網(wǎng)站的優(yōu)化思路也是一樣的，操作上面更自主，能通過(guò)模板，插件，修改代碼等多種方式優(yōu)化頁(yè)面。

對(duì)于絕大多數(shù)沒(méi)啥技術(shù)背景的人來(lái)說(shuō)，優(yōu)化Shopify站點(diǎn)我們需要用一些插件，還有Shopify本身可以繼續(xù)優(yōu)化的模塊去深挖。

我會(huì)講思路結(jié)合案例教大家去優(yōu)化。主頁(yè)，產(chǎn)品頁(yè)，Cart頁(yè)面，Checkout頁(yè)面。是重點(diǎn)，聚合頁(yè)其實(shí)模板如果選的好，不需要過(guò)分優(yōu)化，無(wú)非是加一些文字或者用插件自定義。博客頁(yè)面其實(shí)就參考產(chǎn)品頁(yè)，比產(chǎn)品頁(yè)面要簡(jiǎn)單。首圖，目錄，大綱，對(duì)比圖，信息圖，推薦產(chǎn)品等等，比產(chǎn)品頁(yè)面要簡(jiǎn)單。

目錄

1.如何高效構(gòu)建頁(yè)面

一：簡(jiǎn)潔快速

網(wǎng)站的頁(yè)面加載速度非常重要，加載速度越慢，流失的客戶(hù)越多。我們電商站點(diǎn)一般要控制在2S以?xún)?nèi)。博客站要在1S以?xún)?nèi)。電商站因?yàn)楣δ苣K比較多，即便是做了很多優(yōu)化，加載速度可能也不快。

Shopify站點(diǎn)因?yàn)榉?wù)器模板等限制，我們能優(yōu)化的地方并不多。但其實(shí)Shopify官方的服務(wù)器和模板其實(shí)已經(jīng)優(yōu)化的比較好了。我們能優(yōu)化的地方主要在于圖片視頻素材，插件那些模塊。

給大家看下我的站點(diǎn)優(yōu)化的如何！

我們用谷歌官方的測(cè)試工具：https://pagespeed.web.dev/

桌面端1S左右，各項(xiàng)指標(biāo)還可以。我這個(gè)是電商站點(diǎn)，但是我的圖片那些素材都經(jīng)過(guò)了壓縮處理。插件也是用的極少。

我們?cè)儆昧硗庖粋€(gè)測(cè)速工具去看：https://gtmetrix.com/

不敢說(shuō)這就已經(jīng)優(yōu)化到位了，但是基本上能達(dá)到基準(zhǔn)的要求了。畢竟是電商站，有些功能是免不了的。

大多數(shù)剛做電商的朋友總是想著把網(wǎng)站弄的花里胡哨，其實(shí)是沒(méi)那么多必有的。你搞那么多高清大圖視頻，那么多插件。你用什么系統(tǒng)建站加載都會(huì)很慢。

我們可以只測(cè)下我們的站點(diǎn)那個(gè)模塊的占比比較大，比如圖片，腳本這些都是極其常見(jiàn)的。

新站點(diǎn)直接圖片視頻壓縮處理，少用插件。

老站點(diǎn)圖片視頻盡可能壓縮，插件盡可能簡(jiǎn)化，使用加速的插件，然后雇傭一些專(zhuān)業(yè)的IT去精簡(jiǎn)代碼，shopify有官方的，也可以去Fiverr上面去找高評(píng)價(jià)性?xún)r(jià)比相對(duì)高一些的。自己搞不定就找專(zhuān)業(yè)的人士去搞，不要自己悶頭研究代碼去了，最后還搞不定。花那個(gè)時(shí)間那真是不值得。

自己壓縮圖片可以用熊貓壓縮，網(wǎng)址：https://tinypng.com/

這里的加速插件shopify一般來(lái)說(shuō)主要是用一些圖片壓縮的插件。如：TinyIMG

網(wǎng)址：https://apps.shopify.com/smart-image-optimizer

WP站點(diǎn)使用 WP Rocket 即可，網(wǎng)址：https://wp-rocket.me/

二：品牌質(zhì)感

這點(diǎn)是很多人忽視的，其實(shí)現(xiàn)在你想獲取優(yōu)質(zhì)的素材的難度大大降低了，我們通過(guò)很多外包或者AI軟件能解決很多以前要花多錢(qián)還能解決的問(wèn)題。

圖片統(tǒng)一的風(fēng)格，帶有一定的質(zhì)感。這點(diǎn)對(duì)于想賣(mài)出一些溢價(jià)的網(wǎng)站非常重要，你的圖片那些風(fēng)格和電商平臺(tái)沒(méi)有區(qū)別，沒(méi)有差異化，你怎么能賣(mài)到高價(jià)。客戶(hù)都感知不到你的價(jià)值，如何愿意多花錢(qián)，不要把客戶(hù)當(dāng)傻子。不要高估自己的產(chǎn)品。產(chǎn)品的表現(xiàn)，非常重要。

我們之前分析的這個(gè)跳繩站點(diǎn)，他的產(chǎn)品圖片按鈕設(shè)置就非常協(xié)調(diào)。很有品牌質(zhì)感。具體分析可以去看這篇文章（全網(wǎng)首發(fā)，9千字深度 | 兩個(gè)案例搞懂獨(dú)立站競(jìng)爭(zhēng)對(duì)手分析）

品牌感要做非常好，圖片視頻包括文案那些都要花大力氣大價(jià)錢(qián)。大家可以看看Anker，大疆的網(wǎng)站，他們就能體驗(yàn)到了。

三：結(jié)構(gòu)清晰

圖片

產(chǎn)品頁(yè)面的首圖非常有講究，獨(dú)立站不是品牌，我們沒(méi)有那么多限制，要把展示效果最好的圖片優(yōu)先展示出來(lái)。當(dāng)然風(fēng)格要保持一致。

排序也是有講究的，盡可能把產(chǎn)品的賣(mài)點(diǎn)亮點(diǎn)放在前面。然后逐步展開(kāi)自己產(chǎn)品的功能，特色，產(chǎn)品包含哪些東西。

標(biāo)題

標(biāo)題命名有很多種方式，對(duì)于不是特別大牌的產(chǎn)品來(lái)說(shuō)，一個(gè)大原則就是品牌詞+產(chǎn)品詞，或者品牌詞+型號(hào)詞+產(chǎn)品詞。

短描述

我們要把產(chǎn)品核心的賣(mài)點(diǎn)以及特色放到短描述里面，讓消費(fèi)者一眼就能看到。我們有哪些亮點(diǎn)。

如果產(chǎn)品并沒(méi)有特別的亮點(diǎn)，那么就適當(dāng)加一些FREE Shipping類(lèi)的服務(wù)上去。這里盡可能把產(chǎn)品最為突出的部分展示出來(lái)，讓消費(fèi)者有興趣繼續(xù)瀏覽產(chǎn)品。

描述

這里每家的展示是不一樣的。

不過(guò)第一部分一般都是信任背書(shū)（知名媒體或者紅人用戶(hù)真實(shí)反饋）

成熟品牌有很多背書(shū)，那么就直接放上去。非常真實(shí)可信。

我們上次分析的cross rope 就是把紅人的視頻直接上上去。具體文章可以看（全網(wǎng)首發(fā)，9千字深度 | 兩個(gè)案例搞懂獨(dú)立站競(jìng)爭(zhēng)對(duì)手分析）

上次我們分析的狗馬甲站點(diǎn)，就是用這種知名網(wǎng)站背書(shū)，加了個(gè)圖片上去。這個(gè)非常簡(jiǎn)單。

第二部分：一般是展示自己產(chǎn)品的賣(mài)點(diǎn)。有視頻動(dòng)圖素材可以用，不過(guò)注意壓縮，原則是在不太影響體驗(yàn)的前提下，把賣(mài)點(diǎn)說(shuō)清楚。讓客戶(hù)更愿意去了解你的產(chǎn)品。

第三部分：把產(chǎn)品的好處說(shuō)清楚

做的好的頁(yè)面，一定要把產(chǎn)品對(duì)于消費(fèi)者的好處說(shuō)的非常清晰，消費(fèi)者用了之后會(huì)得到什么，非常明確。

第四部分：和其他產(chǎn)品或者品類(lèi)對(duì)比。像cross rope就是和其他運(yùn)動(dòng)方式做對(duì)比。跳繩有哪些優(yōu)勢(shì)。

很多品牌會(huì)拿自身產(chǎn)品和其他產(chǎn)品做對(duì)比。

像這個(gè)Petbelong狗馬甲站點(diǎn)就是對(duì)比別的狗馬甲。突出自己產(chǎn)品的優(yōu)勢(shì)。

Review & FAQs

真實(shí)可信的Review非常重要。具體的模板我們就可以學(xué)習(xí)cross rope。

比較重要的點(diǎn)，是直接展示星級(jí)，Verified Buyer，按時(shí)間次序展示。

讓消費(fèi)者覺(jué)得你的網(wǎng)站有很多評(píng)價(jià)，而且是客戶(hù)實(shí)際購(gòu)買(mǎi)的。購(gòu)物的時(shí)間也很近。打消消費(fèi)者的顧慮。

FAQs

FAQ部分可以參考優(yōu)秀的獨(dú)立站同行和亞馬遜優(yōu)秀的業(yè)務(wù)。把產(chǎn)品服務(wù)很多細(xì)節(jié)講清楚。

特別是一些相對(duì)復(fù)雜的產(chǎn)品，一些電子產(chǎn)品，怎么去連接，怎么去安裝，容易出現(xiàn)的一些問(wèn)題。盡可能詳盡，這里能避免很多售后的問(wèn)題。一定要盡可能把容易出現(xiàn)的問(wèn)題講清楚。消費(fèi)者也會(huì)更清楚，我購(gòu)買(mǎi)后如何快速使用，有問(wèn)題我可以再哪找到解決方法。

政策條款

政策條款頁(yè)面很多賣(mài)家并不注意，但是你要知道真正去購(gòu)買(mǎi)的客戶(hù)，有些是會(huì)去看的。特別是產(chǎn)品客單價(jià)相對(duì)高的。你可以去GA看下自己About Us 頁(yè)面查看的人數(shù)和停留時(shí)長(zhǎng)。

真正的品牌站對(duì)這里是非常重視，會(huì)非常詳細(xì)的把自己的理念，品牌故事講清楚。有些還會(huì)包裝的很好。

介紹自己的團(tuán)隊(duì)，給人一種真實(shí)感。

加上品牌公益活動(dòng)，捐贈(zèng)了多少善款等。凸顯公司是一家熱心公益事業(yè)，有很強(qiáng)社會(huì)責(zé)任感的企業(yè)。這種品牌公關(guān)也是很多歐美品牌常做的，價(jià)值感是怎么體現(xiàn)出來(lái)的，其實(shí)就是從這些點(diǎn)滴的事情中。

這僅僅是一個(gè)About us的頁(yè)面。像Shipping Policy，Refund Policy等頁(yè)面也是需要細(xì)化的，你寫(xiě)的越詳細(xì)，越真實(shí)。消費(fèi)者的顧慮越小。

站外的Review

站外review也是很重要的，消費(fèi)者會(huì)通過(guò)各個(gè)渠道去了解產(chǎn)品的評(píng)價(jià)，像一些大的第三方review網(wǎng)站如Trustpilot，我們也需要去優(yōu)化的。

這種沒(méi)有自己去驗(yàn)證，客戶(hù)自發(fā)的評(píng)價(jià)也要注意，最好是去驗(yàn)證下，然后專(zhuān)人去處理一些差評(píng)。

四、支付系統(tǒng)

支付方式越多元越好，一般最少要有Paypal。

有條件可以上信用卡通道，有海外主體就用Shopify payment 和 stripe。沒(méi)有的話，就用國(guó)內(nèi)通道，但是支付體驗(yàn)會(huì)稍差一些，押款比例較高，押款時(shí)間較長(zhǎng)。

分期支付：有條件也要上，常用的如Klarna等分期支付都可以。

電子錢(qián)包：用shopify payment可以集成很多電子錢(qián)包渠道，如google pay 等。

用shopify payment還有一大好處，就是消費(fèi)者可以用shop pay 去結(jié)賬，信任感更強(qiáng)，體驗(yàn)也非常方便。

五、轉(zhuǎn)化按鈕

轉(zhuǎn)化按鈕的顏色一般可以選用品牌色，或者橘黃，綠色等醒目顏色。黑底白字也是很常見(jiàn)的組合。

轉(zhuǎn)化按鈕的文字：Cross rope 就是用品牌色為底，文字為黑體。Add to cart 按鈕則是黑底白字。文字一般以ADD TO CART,BUY NOW等為主。

這里其實(shí)我們還可以?xún)?yōu)化，可以加入一些表情符號(hào)，讓按鈕變得更加醒目。

六.Cart頁(yè)面 & Checkout頁(yè)面優(yōu)化技巧

我們直接上技巧！

網(wǎng)址：https://admin.shopify.com/store/店鋪名/themes/xxxxx(替換)/language?category=checkout+&+system=&query=cart

點(diǎn)開(kāi)上面網(wǎng)址，我們找到Product頁(yè)面進(jìn)去修改。

我們搜索關(guān)鍵詞Product拉到最底下，將原有的文字Add to cart替換為?ADD TO CART

就可以得到下面這個(gè)顯示效果！

Cart頁(yè)面優(yōu)化技巧

同樣的Cart頁(yè)面中，的Checkout按鈕，我們也可以修改。我們Ctrl+F搜索關(guān)鍵詞checkout，找到63個(gè)。直接將替換其中文字為：?????????。

我們CHECKOUT用了加粗的字體，大家可以通過(guò)這個(gè)網(wǎng)址去修改自己想要的字體。

網(wǎng)址：https://anytexteditor.com/cn/bold-text-generator

然后：就能得到下面桌面端的展示效果，顯示效果非常清晰。

這是側(cè)邊欄的修改展示效果。是不是非常醒目!

我們還可以把原來(lái)的Taxes and shipping policy修改成 Extra 10% Coupon [折扣碼]?At Checkout

直接提示消費(fèi)者折扣碼，折扣碼的設(shè)置也有講究的，一般不要太長(zhǎng)控制在5個(gè)字符以?xún)?nèi)。

下面是展示效果，也是非常清晰，明了。

Checkout頁(yè)面優(yōu)化技巧

具體網(wǎng)址：https://admin.shopify.com/store/店鋪名/themes/XXXXX替換/language?category=checkout+%26+system

我們直接搜索：Continue to shipping method，把文字直接替換成：?????????

就能得到下面這個(gè)顯示效果。比原來(lái)的Continue to shipping 要清晰太多。

我們繼續(xù)優(yōu)化！

我們?cè)賰?yōu)化Continue to payment method。

還是剛才的頁(yè)面，我們搜索Continue to payment method，將文字替換成????????

按鈕文字盡可能不要太復(fù)雜，1-2個(gè)單詞即可。讓消費(fèi)者不做過(guò)多思考，更容易點(diǎn)擊。

然后下一步就是支付方式的選擇，這里就沒(méi)有太多可以?xún)?yōu)化的。大家可以直接看下效果。

logo圖片部分還可以繼續(xù)優(yōu)化！

我們可以?xún)?yōu)化成狗馬甲站點(diǎn)，這樣的形式，內(nèi)容很豐富，有安全圖標(biāo)，也支持多種支付方式，還有客服郵箱，能增強(qiáng)信任感。

七.總結(jié)

整體這樣優(yōu)化下來(lái)，我們的轉(zhuǎn)化率大概率會(huì)有明顯的提升！

我操盤(pán)過(guò)的幾百美金高客單價(jià)的站點(diǎn)，就從千分之四的轉(zhuǎn)化率，提升到將近2%的轉(zhuǎn)化率。提升近5倍，大家可以想下這其中的區(qū)別。

電商站點(diǎn)最終的目的就是轉(zhuǎn)化，轉(zhuǎn)化率對(duì)于電商站點(diǎn)來(lái)說(shuō)至關(guān)重要。每提升一點(diǎn)轉(zhuǎn)化率，利潤(rùn)都會(huì)有所改善。

網(wǎng)站運(yùn)營(yíng)優(yōu)化的最終的目的一定要清楚，不是把頁(yè)面做的多么花里胡哨。最終就是為了轉(zhuǎn)化。所有的優(yōu)化最終都是為轉(zhuǎn)化服務(wù)的。

不要想著把頁(yè)面弄的如何的好看，你要做的就是從轉(zhuǎn)化率出發(fā)。從checkout，cart頁(yè)面，Product頁(yè)面，home頁(yè)面一步步去提升整個(gè)網(wǎng)站的體驗(yàn)，最終讓你的轉(zhuǎn)化率得到質(zhì)的提升。

運(yùn)營(yíng)是件非常細(xì)致的工作，什么是優(yōu)秀的運(yùn)營(yíng)我們之前聊的是大方向的能力（如何提升獨(dú)立站運(yùn)營(yíng)能力？成為全棧營(yíng)銷(xiāo)人才-4千字干貨帶你搞懂需要提升哪些能力）

具體到實(shí)際的運(yùn)營(yíng)工作中，就是能把一個(gè)個(gè)細(xì)致瑣碎的細(xì)節(jié)處理好。提升品牌的體驗(yàn)，提升轉(zhuǎn)化率。

以上！就是4千字獨(dú)立站落地頁(yè)優(yōu)化指南！

關(guān)注我！我會(huì)長(zhǎng)期分享一線獨(dú)立站實(shí)戰(zhàn)干貨???

最近很多朋友關(guān)注我，想要之前發(fā)的干貨文章的資料包，我給大家準(zhǔn)備好了。

點(diǎn)擊公眾號(hào)對(duì)話框，輸入，干貨指南?即可獲取