5 個品牌網頁設計案例，如何製作出令人心動的購物官網！

有別於制式的設計，在頁尾增添輪播圖片讓人不由得注意品牌LOGO; 頁面加入instagram 帳號圖片，增加商店內容與社群導流; 雖然商品不多，但照片色系一致， ... Skiptocontent 5個品牌網頁設計案例，如何製作出令人心動的購物官網！ CathyXiong2021-08-13T10:15:40+08:002020年02月24日|Categories:最新功能,網路開店|Tags:SHOPLINE,專題-開店思維學,網頁設計,電商經營| 2021年8月13日更新 6,233 當賣家們建立品牌網站後，最困擾大家的便是網頁設計，「該如何設計獨具風格的品牌網站？」。

在過往，賣家可能會找一個網頁設計公司協助設計與建站，但通常會花上好幾個月的時間。

而SHOPLINE開店平台所提供的網路商店系統，就替賣家們準備好所有建立官網必備的功能，舉凡在地化金物流、訂單管理系統、顧客管理系統、促銷模組等。

而商店的網頁設計模板與拖拉式頁面設計，更替賣家們省去了許多建置電商網站的時間。

（SHOPLINE建置網站頁面只要拖拉就能完成） 不過，當你開始準備設計自己的品牌購物官網時，肯定也會想問：「怎麼樣的網站設計才能吸引客人呢？」、「有沒有什麼必備元素？」，畢竟，做購物官網的主要目的就是透過網站將品牌特色、理念等傳遞給消費者，激起他們的興趣，然後最重要的是「賣出商品」！ 下面就介紹5個獨具巧思的品牌購物網站設計，一起來看看他們讓人心動的理由吧！ 5個品牌購物網站設計案例 ►案例一、綠藤生機 綠藤生機這個台灣在地品牌相信大家都不陌生，若你曾到訪過他們的官網，肯定會被綠意盎然的網頁設計風格所吸引。

一進到首頁便能看見由「綠色」組成的各種情境照片，加上「純淨保養主張」這樣強烈風格的CTA，讓人更想往下一探他的品牌主張到底是什麼？相較於一般購物網站都會放上促購字眼的Banner，擺上品牌理念的Banner也非常引人注目呢！ 圖一、綠藤生機品牌網頁設計（綠藤生機網站為自行修改網站設計） 3個編輯推薦網頁設計亮點： 網站用色一致，主要以LOGO色延伸，讓人留下滿滿的「生機印象」以品牌理念取代促購，更能凸顯品牌價值，提升好感度乾淨的商品圖片與頁面，符合品牌「純淨」的風格 ►案例二、1%Bakery 一進入1%Bakery 的網站就有漂亮動人的滿版圖片跟你說嗨，一眼便能知道他是販售蛋糕的商店，而影響客人想不想吃一項食品，最好的方式就是創造五感體驗，但是在網路上僅能靠「視覺」來下手，因此他們的網站風格很明確，就是營造乾淨、好吃的樣子。

而透過SHOPLINE進階分頁的商品元件搭配文字元件，簡單明瞭的介紹蛋糕特色，非常吸引消費者目光呢！ 圖二、1%Bakery 品牌網頁設計 3個編輯推薦網頁設計亮點： 照片的蛋糕拍攝風格一致，讓人瀏覽起來更舒服首頁利用滿版圖片吸引消費目光，能很清楚看見商品替不同口味蛋糕寫下特色介紹，更能引起興趣與食慾 ►案例三、OPT圓瑞 你對販售隱形眼鏡的商店有什麼樣的想像？OPT圓瑞便將官網完美結合了購物促購元素，在讓人衝擊的文案與風格素材下，打造出獨具特色的隱形眼鏡網站。

而目錄內裏的商品分類更是一絕！一般來說，會以商品名字來做分類，而OPT則以受眾常用的口語化文案來當作分類名稱，讓人快速選擇自己喜歡的風格。

圖三、OPT圓瑞品牌網頁設計 3個編輯推薦網頁設計亮點： 首頁以當季主題形象為風格舖陳，具有記憶點及衝擊感商店目錄使用emoji和口語化來吸引點擊利用進階分頁當作發布最新消息的地方，讓顧客願意瀏覽更多頁面 ►案例四、Teamjoined 販賣衣服的商店除了照片拍攝需要清楚或附帶穿搭情境吸引消費目光之外，讓客人能了解衣服的尺寸大小是否符合自身身形也是影響顧客下單意願的一環。

Teamjoined在商店設計上除了利用簡約大方的LOGO色系當作網站基底外，消費者購物時常見的購物問題也寫得相當詳細，讓人逛起來舒服又安心呢！ 圖四、Teamjoined 品牌網頁設計 3個編輯推薦網頁設計亮點： 利用目錄橫幅底色，強調出商品分類商品圖片乾淨、明亮，並且商品頁敘述簡單明瞭，讓人能快速了解商品特色常見問題的內容豐富且詳細，想找衣服尺寸很便利 ►案例五、Atelierhomebody 一進到Atelierhomebody的商店便有清新滿版的Banner迎接，完全符合品牌名字Homebody的意象。

而透過簡單的品牌理念文字穿插於頁面和商品中間，讓人更能被吸引。

對於商品較少的店家來說，網站內容不夠豐富會造成顧客流失率提高，而他們的做法便是將Instagram帳號加至首頁，讓整體瀏覽起來內容更豐富，同時還能引流至社群呢！ 圖五、Atelierhomebody 品牌網頁設計 3個編輯推薦網頁設計亮點： 有別於制式的設計，在頁尾增添輪播圖片讓人不由得注意品牌LOGO頁面加入instagram帳號圖片，增加商店內容與社群導流雖然商品不多，但照片色系一致，簡單的商品分類逛起來也很舒適 繼續閱讀文章 10個設計購物網站的基本元素 看完上面5個精選的購物網站設計案例，相信聰明的你一定也發現製作一個漂亮的網站所需要具備的基本要素有哪些了吧？除了漂亮的商品圖和風格一致的Banner之外，網站本身的基礎架構設計也非常重要，像是目錄選單、頁尾設計、按鈕顏色等等，都是影響網站設計風格是否能有相同調性的元素。

而上述這些品牌都是使用SHOPLINE最新的網站版型「 UltraChic 及Kingsman」做到的，撇開以往「網站版型」的侷限，在新的版型中，你可以自行選擇像是主題顏色、文字顏色、icon顏色、字體等，同時搭配「進階分頁」的各項元件，透過拖拉加入元件與排版設計，你也能完成獨具風格的品牌購物官網！ PS.上述介紹之品牌部分有使用「前台設計工具」撰寫進階語法修改網站設計，SHOPLINE提供之版型預設設計請參考FAQ。

圖六、SHOPLINE最新購物網站設計版型可設定主題顏色、文字顏色等 最後，編輯也幫大家整理出幾項製作購物官網時需注意的網頁設計要素： 項目必備or建議使用簡單又清楚的網站目錄選單必備吸引人的首頁Banner必備人性化的目錄子選單（分類名稱）建議使用商品照片色調一致建議使用網站圖片與文字配色一致建議使用詳細的常見問題頁必備詳細的頁尾內容必備社群內容嵌入（例：帳號、口碑內容等）建議使用商品及使用描述內容建議使用品牌理念內容建議使用表一、10個設計購物網站的基本元素列表 你覺得文章有幫助到你嗎？歡迎給我們評論唷！5/5.共有9可以留下你的評論讓我們知道 延伸閱讀 如何用LINE官方帳號宣傳歲末購物季？3階段推播創造品牌高業績讓你過好年！ 【VNSpeedUp專欄】綜觀2021年越南電商通路與實體通路近況與商機，帶你深度了解越南跨境市場！ 【林克威專欄】你也跟上熱門的「元宇宙」話題了嗎？電商品牌如何積極布局迎接元宇宙的到來 CathyXiongSHOPLINE資深產品行銷專員 SHOPLINE電商教室編輯，對SHOPLINE的用戶有種使命感，希望能幫助所有店家一起成長，在零售領域裡發光發亮⚡️ 追蹤電商教室，趨勢新知報你知 留言取消回覆Comment 儲存您的名字、Email和網站，在下次留言時則無需再輸入。

Δ 　 　 1 Instagram限時動態全攻略一次大公開！如何用IG限動玩出創意新商機？ IG經營,Instagram,專題-IG經營,社群行銷 　215月,2018 2 五倍券使用懶人包來了！品牌電商也適用嗎？4種方法讓你吸引顧客振興品牌業績！ 品牌經營,電商經營 　159月,2021 3 直播平台哪個最夯？6大直播平台評比，帶你解析直播紅什麼！ 專題-直播,數位行銷,直播相關,行銷策略 　275月,2020 4 店名應該怎麼取？5大重點為品牌找到最合適的名稱 品牌建立,品牌經營,專題-開店思維學,電商經營 　255月,2016 5 什麼是POS系統？功能優點、如何挑選一次看懂！ 品牌經營,專題-實體門市,門市經營 　278月,2019 　　　　3C休閒EDM行銷FacebookFacebook廣告案例FB廣告前置作業FB經營GA教學GoogleGoogle廣告前置作業Google廣告案例Google趨勢IG經營InstagramO2OSEO教學SHOPLINEYouTubeYouTube經營促銷活動內容行銷　 Pageloadlink 　本網站採用Cookies工具來改善使用者體驗及確保網站有效運行Cookie設定我瞭解了Manageconsent Close PrivacyOverview Thiswebsiteusescookiestoimproveyourexperiencewhileyounavigatethroughthewebsite.Outofthese,thecookiesthatarecategorizedasnecessaryarestoredonyourbrowserastheyareessentialfortheworkingofbasicfunctionalitiesofthewebsite.Wealsousethird-partycookiesthathelpusanalyzeandunderstandhowyouusethiswebsite.Thesecookieswillbestoredinyourbrowseronlywithyourconsent.Youalsohavetheoptiontoopt-outofthesecookies.Butoptingoutofsomeofthesecookiesmayaffectyourbrowsingexperience. Necessary Necessary AlwaysEnabled Necessarycookiesareabsolutelyessentialforthewebsitetofunctionproperly.Thiscategoryonlyincludescookiesthatensuresbasicfunctionalitiesandsecurityfeaturesofthewebsite.Thesecookiesdonotstoreanypersonalinformation. Non-necessary Non-necessary Anycookiesthatmaynotbeparticularlynecessaryforthewebsitetofunctionandisusedspecificallytocollectuserpersonaldataviaanalytics,ads,otherembeddedcontentsaretermedasnon-necessarycookies.Itismandatorytoprocureuserconsentpriortorunningthesecookiesonyourwebsite. SAVE&ACCEPT 線上講座　｜　免費試用　｜　免費諮詢 GotoTop