免費Shopify主題Brooklyn安裝設置演示教程

在介紹了 Shopify主題下載與安裝 過程中需要注意的一些事項之後，接下來我們以waimaob2c.myshopify.com 這個演示站點和 Brooklyn 模板爲例，來詳細說明 Shopify 主題的基本設置過程以及 Shopify 主題代碼級別上的一些必要的修改。

在開始之前，需要了解的是，目前大部分主題是支持Shopify的Section功能的，如果不支持Section功能，則本篇文章不具有參考性。Shopify官方購買的主題都是支持Section功能的，第三方主題網站判斷shopify主題是否支持Section功能要看主題的介紹中是否有寫支持section功能，或者直接聯繫主題作者確認。

另外，不同的主題，設置選項和功能會有些不同，甚至會有很大的不同，本篇文章無法面面俱到，只能提供參考思路，有任何問題可以文章底部留言交流。

以Brooklyn爲例講解Shopify主題的安裝設置

主題在安裝之後，點擊Customize按鈕就可以進入到主題的設置頁面了。

當前頁面大致可以分爲三大區域，功能與結構如下

區域1 左側邊欄

• 點擊左上角藍色背景的Shopify Logo可以返回Shopify的後臺，按鈕旁邊爲當前主題名稱
• 主題名稱下方有兩大板塊以Tab的形式顯示，分別爲Sections和Theme Setting
• Section負責的是當前單獨頁面的佈局設置，下方的功能設置內容隨着右側區域2的頁面改變而改變
• Theme Setting負責的是網站全局顏色，字體，購物車頁面，結款頁面的設置，不隨着右側區域2頁面的改變而改變
• 左側邊欄的最下方Theme Action按鈕可以幫你快捷跳轉到Edit Code頁面和Edit Languages頁面，對主題進行更復雜一些的設置。
• Theme actions按鈕右側的兩個箭頭按鈕可以對你的操作退回到上一步或者前進到下一步

區域2 右側頂部邊欄

• 不同頁面切換按鈕
• 同一頁面不同屏幕大小預覽按鈕 （鑑於目前移動端流量普遍在50%以上，所以，無論對哪個頁面的修改，建議都要查看下移動端屏幕大小下網站內容的排版顯示）
• 保存按鈕

區域3 右側主題預覽窗口

下面就以不同頁面的功能設置來詳解Shopify主題Brooklyn的設置。

Brooklyn主題網站首頁的設置

Brooklyn主題編輯時，網站首頁在左側邊欄共有兩個大項需要設置，一個是設置頁面佈局的Sections，一個是設置網站整體顏色，字體，風格的Theme Setting。

Sections設置

Sections下有四個固定的Section分別爲Sidebar menu，Header，Slideshow，Footer；Brooklyn主題首頁還支持衆多的自定義的Sections。他們的設置如下：

Sidebar Meun設置

Sidebar Menu是Brooklyn主題特有的一個功能，在移動端較小屏幕上顯示網站內容的時候，網站頂部的菜單通常會以Sidebar Menu的形式存在。如下圖

在電腦桌面，當網站頂部的主菜單因爲內容太多盛不下的時候，Brooklyn會自動將頂部菜單隱藏，而以左側邊欄的方式隱藏存在。

當點擊左上角的三個橫線標誌時，側邊欄會從左側劃出，顯示效果如下圖

因此，如果在電腦端如果不想以左側邊欄的形式展示主菜單的話，就要控制主菜單項目的數量和每個菜單項目的字符長度，避免自動摺疊。例如將主菜單做成二級菜單展示（二級菜單設置教程見），將Contact us改爲Contact，將And改爲&，將菜單字體調小，不使用粗體，等等等等。

如果實在不好控制菜單的數量和長度的話，可以通過修改代碼 ( Edit Code) 的方式將網站首頁的顯示寬度調寬。後面一篇文章會詳細說明如何對Brooklyn主題做一些修改。

點開左側邊欄的Sidebar Menu，會顯示要你設置Primary Menu和Footer Menu，點擊Select Menu，選擇想要顯示在側邊欄的Primary Menu和Footer Menu菜單項目就可以了。勾選最下方的Enable Search，會在側邊欄的最上方添加一個搜索框。

Header設置

Header設置的是網站頂部的內容，包括 網站主菜單Menu， 網站的Logo，顯示在Slideshow上的Home Page Logo，Logo的尺寸設置，網站頂部搜索框的顯示與否，搜索框的顯示方式，網站頂部通知欄的設置。

網站的Logo是顯示在網站所有頁面的Logo，Slideshow上的Home Page Logo是爲了防止Slide和你的Logo顏色差不多，導致Logo顯示不清楚的問題而單獨爲網站首頁設置不同Logo而存在的，如下圖：

當你的Slide圖片爲灰黑色的時候，黑色的Logo就無法顯示清楚，這個時候就需要使用Home Page Logo單獨設置Slideshow的Logo，如下圖，灰黑色的Slide配合白色的Logo，可以將Logo信息凸顯出來。而在其他網站頁面，則顯示的還是黑色的Logo。

Slideshow 設置

Slideshow設置包括兩部分，一部分是Settings，是對整個Slideshow的控制設置，包括輪播圖片是否自動切換，每多長時間切換一次，Slideshow上面的文字的顏色設置，按鈕顏色以及按鈕上的文字顏色設置；另外一部分是Content，是對Slideshow每張圖片的單獨設置。

點擊Content項下的Add Slide可以添加新的圖片到Slideshow，每個Slide的設置內容包括3個部分：圖片，圖層，顯示文字內容。Shopify官方Brooklyn演示站點的Slide圖片的尺寸是1200*800px，所以推薦使用長寬比爲3:2的圖片，可以使用PS裁切圖片到3:2的比例，同時要保證圖片的質量，建議長度不低於1200px，同時要看文件大小，太大的文件會嚴重影響網站的打開速度，因此，要在圖片的清晰度，與文件尺寸這兩個關鍵點上找到一個平衡。如果有多張Slide圖片，建議所有的Slide圖片尺寸要一致。

另外，在之前《關於Shopify圖片的一些補充》那篇文章中提到的，在製作Slide圖片的時候，一定要將重要的圖片信息展示在圖片中間，同時圖片上不要添加任何文字內容，因爲在電腦上可以正常顯示的圖片，在手機上會被裁切部分顯示，而現在移動端的流量可以佔到總流量的50%甚至90%以上，也就意味着有相當一部分人可能因爲圖片被裁切而無法看到你想要展示的重要信息。如下圖，左側爲電腦上正常顯示的圖片，右側爲手機上顯示的被裁掉的圖片。

Overlay可以爲你的圖片添加一個單顏色的圖層，以凸顯你的文字內容。如果你的Slide圖片色彩豔麗而且色彩複雜，你在Slide上添加的文字就很難顯示出來，網站訪客的閱讀體驗就會差很多。通過Overlay功能爲你的Slide圖片添加一個單色的圖層，並設置一定百分比的透明度，可以提高你的Slide文字的顯示效果，提高用戶體驗。如下圖

Text & Footer設置

Text則爲設置每個Slide上顯示的文字內容，以及按鈕鏈接地址。

當然，如果你不想在你的網站首頁顯示Slideshow，你可以刪掉所有的Slide，則網站首頁不再顯示Slideshow輪播大圖板塊。

Footer設置的是網站底部的內容，Setting部分設置底部菜單欄的內容，Theme Setting設置的是網站底部的社交網絡賬號信息。

自定義Sections設置

除了以上四個固定的Section設置之外，Brooklyn主題在網站的首頁還支持衆多的自定義的Sections，點擊Add Section，就可以跳轉到可添加的Section的列表，點擊你想要添加到網站首頁的Section，該Section的內容就會以預覽的方式顯示在網站的首頁，只有點擊該section右側的Add按鈕，再點擊右上角的Save按鈕保存之後，該Section纔會真正的添加到網站的首頁。Section的內容包括：

• Blog Posts – 將博文摘要內容展示在網站的首頁
• Collection List – 將產品目錄列表展示在網站首頁，Brooklyn主題支持在首頁顯示的目錄數量最多爲9個。
• Featured collection – 將指定產品目錄的產品展示在網站首頁
• Image with text – 設置圖片與文字信息展示在網站的首頁
• Feature product – 將指定產品的圖片，標題，價格，描述信息展示在網站首頁
• Newsletter signup – 將郵箱訂閱按鈕添加到網站首頁，當用戶使用本功能提交他們的郵箱之後，Shopify系統會在後臺自動創建一個Customer信息
• Map – 將地圖信息添加到網站首頁
• Rich text – 將富文本信息展示在網站首頁
• Video – 添加視頻到網站首頁
• Custom HTML – 添加自定義的HTML內容到網站首頁

添加到網站首頁的Section都會展示在左側邊欄的Sections項下，自定義添加的Section在右側都會有一個眼睛圖標和六個點的圖標，如下圖：

點擊眼睛圖標可以將該Section隱藏顯示，將鼠標放在右側的六個點上，鼠標指針變成小手，可以對這些section進行上下拖動排序。

要刪除某個Section，需要點擊該section進入section設置頁面，在最下方找到Remove Section按鈕，點擊該按鈕就可以刪除該section了。

自定義添加的section的設置都比較簡單，完善設置信息，並依據右側預覽窗口裏面的顯示效果進行調整就可以了。

Theme Setting設置

Theme Setting設置的是網站整體的配色Colors，字體Typography，購物車頁面Cart Page，社交網絡信息 Social Media，網站圖標Favicon，網站結款頁面Checkout，以及網站主題預設風格切換的設置。

Colors & Typography設置

這裏Colors的設置和Typography的設置都比較簡單，在左側邊欄調整之後，在右側網站的預覽窗口就會實時的顯示出來實際效果。雖然這些設置都比較簡單，但是裏面的學問卻大的很，尤其是網站的配色，對消費者的購買行爲會有潛移默化的影響，感興趣的朋友可以去Google搜索相關的研究，也可以看WaimaoB2C之前的文章《Shopify主題的選擇》裏面的簡要的介紹。

Cart Page設置

Brooklyn主題的購物車支持兩種方式，一種是右側滑出購物車頁面Drawer，即當用戶點擊Add To Cart按鈕之後，會在當前頁面的右側滑動顯示購物車信息，如下圖；另外一種是直接跳轉到全屏的購物車頁面Page，當用戶點擊add to cart按鈕之後，頁面會跳轉到購物車頁面。Cart Page頁面以哪種方式顯示，可以按照你的需求進行選擇。

在Cart Page設置頁面，勾選Enable order note可以在購物車頁面添加一個可以輸入的文本框，方便客戶對訂單做一些補充說明。顯示效果如上圖右側白色方框輸入區域的Special instructions for seller。

Social Media & Favicon設置

Social Media設置板塊可以將你的社交網站鏈接地址添加到網站的底部，還有就是網站產品頁面，博客頁面的分享按鈕顯示與否。另外，在Social Medie設置板塊最上方有一個設置Social Share Image的地方，可以設置當你的網站被分享到社交網絡上的時候，在社交網絡上顯示什麼圖片。

Favicon設置的是瀏覽器上的圖標文件，圖標文件最好是正方形的，在文件上傳之後，圖片會自動裁切成爲32*32像素的小圖標。

Checkout設置

Checkout的設置內容包括Banner的背景圖片設置，Logo的設置，內容顯示區域的背景圖片設置，客戶提交收件信息的表單背景顏色設置，結款頁面文字字體設置，按鈕顏色設置等等信息。這些內容的設置也都比較簡單，不過在右側預覽窗口是無法顯示Checkout頁面的，因此在設置過程中要看到設置的效果，就需要在新瀏覽器標籤頁中打開網站的結款頁面，邊設置，邊保存，保存之後刷新結款頁面瀏覽設置好的頁面的效果。關於網站結款頁面的更多的設置需要在網站後臺 – Settings – Checkout頁面進行操作。

通常一款主題會有多個風格配色可供選擇，在Theme Setting的最下方，可以對這些風格配色進行切換，Brooklyn支持兩種風格，Classic和Playful，在這裏可以一鍵切換風格，而無需重新安裝主題。

關於Checkout頁面的優化，提高轉化率，可以查看這篇文章介紹 – Brooklyn主題的優化

Brooklyn主題的其他頁面設置

在右側頂部邊欄下拉選擇框中選擇Product Pages頁面之後，在下方會出現某一款產品的詳情頁面。在左側邊欄的編輯區域，除了Sidebar Menu，Header，Footer之外，在首頁出現的其他Section會通通消失，由Product Pages Section代替。除了首頁，Brooklyn主題目前還不支持在其他頁面添加自定義的Section。

Product Page設置

點擊Product Pages Section之後，就進入到了產品頁面的設置。所有設置的項目是應用於所有的產品頁面的，而不是僅應用於當前產品頁面。產品頁面可設置的項目包括：

• Enable image zoom – 是否允許圖片放大功能
• Enable product sharing – 是否顯示社交分享按鈕
• Show product vendor – 是否顯示產品的廠家/品牌信息
• Image display – 產品圖片的顯示方式，Stacked(所有圖片以大圖的方式顯示)；Thumbnails(一張大圖加其他小圖的方式顯示)，此設置只在電腦桌面上會有不同的顯示，在移動端看不出有任何的變化。
• Show quantity picker – 是否顯示數量選擇按鈕
• Picker type – 變體選擇方式是下拉展示還是平鋪展示
• Add to Cart button size – 設置加入購物車按鈕的大小

Collection Page設置

Collection Page設置的是某一個產品目錄裏面的產品的展現方式。可設置的項目包括：

Grid Style – 產品排版方式，Grid (整齊排布) 還是Collage (拼接排布)，如下圖

當產品列表頁面選擇Collage的方式對產品進行排版的時候，你可以通過在後臺改變產品的排列順序來決定哪個產品以大圖的形式展示，哪個產品以小圖的形式展示。下圖爲Brooklyn主題Collage方式展示產品的時候的序號，由下圖可知，每6個產品中就會有首尾兩張產品圖片以大圖的形式展示，因此，大圖顯示的產品的序號分別爲1，6，7，12，13，18，19，24…：

在瞭解了產品的排序方法之後，就可以在Shopify後臺通過手動選擇哪些產品展示在特定類目裏面，然後，對該類目下面的產品進行上下拖動排序，排在1，6，7，12…位置上的產品在類目產品列表頁面展示的時候就是以大圖展示的產品了。如下圖：

除了頁面產品的排布方式，可設置的內容還包括：

Enable collection sorting – 是否允許產品排序，如果選擇允許產品排序的話，在產品目錄名稱下方就會出現Sort By的下拉選框，用戶可以選擇不同的排序規則對該目錄下的產品進行排序，排序的規則包括：按照銷量排序，按照首字母從A到Z或者從Z到A進行排序，按照價格從高到低或者從低到高進行排序，按照上傳產品的日期進行排序。

Show collection tags – 是否顯示產品的Tags，如果勾選顯示產品目錄的Tags的話，在產品目錄下方就會將目錄下屬產品的所有的Tags橫排羅列顯示在目錄名稱下方。也就是說，在這裏Tags起到的作用是產品篩選功能。例如，你可以給產品添加顏色Tags，這樣在產品類目名稱下方就會出現顏色的Tags，選擇紅色Tag，所有滿足這一條件的，紅色的產品會顯示在下方。

Show product vendor – 是否顯示產品的廠家/品牌信息。如果勾選，在產品列表上的產品價格下方就會出現對於的Vendor信息。

Collection List Page設置的是產品目錄的列表頁面，你網站所有的產品目錄會在這個頁面羅列展示。展示方式有兩種，一種是自動展示所有的產品目錄到Collection List Page，然後按照產品目錄名稱首字母從A到Z或者從Z到A進行排序，或者按照產品數量從多到少或者從少到多進行排序，或者按照日期進行排序。

另外一種方式是手動選擇要顯示的產品目錄，並且手動排序這些產品目錄。在Select collections to show項下選擇Selected之後，在Content下點擊Add Collection就可以將你想要添加的Collection添加到List Page頁面上了。當添加了多個Collection到List頁面之後，就可以手動上下拖動Collection進行排序了。如下圖：

Brooklyn主題的Customize設置基本上就是這些內容了，上文中沒有涉及到的具體的設置，以及其他頁面的設置，如果有任何問題，歡迎評論區互動交流。

想要了解更多代碼方面對Brooklyn主題的設置修改，可以查看下篇文章：《Shopify主題Brooklyn的優化》想要了解更詳細的Shopify店鋪設置，可以查看我們系統的Shopify教程。