Hello

新的一周又與大家見面了

我是君志學堂的Tina

全方位地給大家介紹Shopify各種知識和操作

今天給大家介紹Shopify建站中的重要環節之一 —— 網站裝修

如果覺得文章對你有幫助的話别忘了點贊和收藏哦~

由于Shopify模闆有免費和付費之分，如果不是對裝修模闆有特别要求的朋友，十個免費模闆也能滿足基本需求。其實，Shoppify模闆中每個模塊的設計邏輯有共通性，也就是說隻要掌握其中一個裝修模闆，其餘模闆也能一通百通。

本文将會以Shopify的免費模闆中的“Dawn”作為例子，給大家介紹獨立站中每一個模塊的設置方法。

一、主頁

首先，我們先在Shopify後台主界面打開“在線商店”→“模闆”→選擇“Dawn”模闆→進入自定義頁面。

假如需要更換裝修模闆，可以在“模闆庫”添加新模闆。

1、公告欄

公告欄展示在網站頂部。

公告欄的文字編輯框：可修改文案。通常情況下，我們會将活動、通知、優惠和歡迎語放在此處，吸引顧客關注。

配色按鈕欄：更換公告欄背景色。

鍊接欄：填入跳轉鍊接，能讓顧客在點擊公告欄時跳轉到對應頁面。

2、标頭

标頭指公告欄下方的内容位置，包含了獨立站logo、菜單導航欄和背景色。

配色方案按鈕：更改的是背景底色。

logo圖片模塊：可以上傳獨立站logo。

自定義logo寬度：調整logo大小。

logo在較大屏幕上的位置：更換logo和菜單導航排列方式。

菜單：可以更換菜單導航。

顯示分隔線：指是否顯示 标頭及其下方模塊之間的分隔線。

啟用粘性标頭：讓顧客在滑動網站時，能一直看到标頭部分。

3、圖片橫幅

圖片橫幅在網站的版面占據了極大篇幅，這個模塊不僅能起到裝飾網站的作用，而且還可以将網站的活動信息展示給顧客。

圖片模塊：用于更換展示圖片。

橫幅高度調節：調整展示圖片的大小。

桌面文本位置：指圖片中的文字框在圖片上的位置，能夠調節成“頂部”、“居中”和“底部”。如果不需要文本框，可以取消“在桌面上顯示文本框”的選項。

若僅要圖片，則可以點擊左側菜單“T”字文本框按鈕後，在右側底部點擊“删除塊”即可删除。

移動布局：專門針對移動端顯示效果的調整。在調整前，點擊右上方的電腦圖标按鈕，切換成移動版的界面，查看效果。

4、富文本

富文本是純文字模塊，由标題、文本和按鈕組成。它同樣可以起到裝飾、說明和宣傳作用。

5、特色産品系列

該模塊用于展示産品，右側菜單可以更改給顧客展示的标題、産品系列、展示産品數、圖片比等内容。假如有産品圖片大小比例不一緻的情況 ，可通過圖片比統一圖片大小。

6、拼貼畫

拼貼畫模塊也是一個宣傳展示模塊，它由視頻、産品和産品系列組成。需要注意，視頻是通過URL鍊接，而不是直接上傳。

7、視頻

視頻模塊和拼貼畫模塊的差異在于，視頻模塊僅有一個視頻作為展示内容，而拼貼畫則可以跟多個内容組合。在右側菜單欄中，我們可以自由更改标題、視頻封面圖片以及視頻來源。

8、多列

多列是一個多圖文搭配模塊，用作産品細節與風格介紹、服務說明以及裝飾網頁皆可。

在進行編輯時可以通過左側菜單的“添加列”和右側底部的“删除塊”控制圖文框的數量。此外，我們還可以通過右側菜單調整模塊展示的圖片、标題、描述文本、鍊接标簽和跳轉鍊接。

9、産品系列列表

點擊左側菜單“添加分區”，我們還能看到更多其他的模塊。我們從産品系列列表繼續介紹。

産品系列列表換個說法就是産品系列目錄，它可用于整合展示産品系列。

10、博客文章

博客文章屬于文字類宣傳模塊，專業性介紹和報道能提高顧客對獨立站的信任度。

文章首先需要在後台主界面“在線商店”→“博客文章”進行撰寫和編輯，然後再到裝修模闆的博客文章模塊選擇展示文章。

11、帶文本的圖片

這個模塊與多列模塊相似但不相同，雖然都是文字和圖片的組合模塊，但帶文本的圖片在形式上可調節為左文右圖或左圖右文，數量上僅允許添加三個模塊。

右側菜單可以調整圖片、圖片比例、背景配色，桌面布局按鈕用于改變文字和圖片的左右側位置。

12、特色産品

想要在獨立站上特别突出某一個熱賣産品，那麼特色産品模塊就是最佳選擇。它的作用相當于将産品詳情頁展示在獨立站主頁，以最直接的方式呈現給顧客。

13、電子郵件注冊信息

從模塊名字不難看出，它是用作收集顧客郵箱，以便後續進行EDM營銷。

模塊中的标題和文本皆可自由編輯。一般情況下，我們會在标題和文本中添加網站名稱和訂閱後可獲取的折扣，增強顧客對網站的印象和吸引顧客留下信息。

14、聯系表

聯系表是供顧客反饋問題的模塊，模塊框架是固定的，隻有标題可進行修改。

15、自定義Liquid

若想在模闆中使用代碼創建自定義功能，自定義Liquid即為代碼添加框。

16、頁面

頁面模塊用于展示文章。如果有公告或文章報道需展示，我們可以在“在線商店”→“頁面”編輯内容，然後使用該模塊即可将内容展示在網站主頁。

17、頁腳

頁腳部分包括頁尾菜單、郵件注冊框、社交媒體圖标、付款圖标等。

頁尾菜單設置：“在線商店”→“網站地圖”編輯頁尾菜單後，再把頁腳模塊中的“菜單”塊鍊接更改為對應菜單。

至于另外幾個部分的設置，可通過選擇選項進行開啟或關閉。

二、産品系列頁

在裝修頁面上方切換調整頁面，從“Collection”（産品系列頁）繼續介紹。

1、産品系列橫幅

産品系列橫幅隻有兩個選項可調節。“産品系列描述”指産品系列名稱，如下圖中的“Dress”，可根據實際情況決定它是否需要勾選。

而“顯示産品系列圖片”還需要多一個步驟，即在産品系列中上傳比例為16：9的宣傳圖。

上傳圖片保存後，再回到裝修頁面勾選“顯示産品系列圖片”，才能看出效果。

2、産品網絡

産品網格模塊主要是控制産品系列頁展示的産品數量、産品圖比例以及一些細節的内容信息。

三、購物車

介紹完了“Collection”，接下來是 “Cart”（購物車）頁面。

1、商品

商品模塊隻有一個“是否顯示廠商選項”，此處可根據實際情況選擇。“廠商”會被默認為網站名稱。

2、小計

小計可以調整的隻有是否開啟“啟用購物車備注”選項。

四、結賬頁

結賬頁的調整菜單是結合“模闆設置”闆塊進行的，點擊“CHECKOUT”，展開可調整選項。

Banner：上傳Banner後，将會被展示在logo及其上方的位置。

Logo：可上傳獨立站logo，顯示在結賬頁上方。

Position：調整logo的展示位置。

Logo size：調整logo顯示的大小。

Main content area：針對除Banner和logo外的頁面做調整，可更改背景圖、背景色、排版字體和按鈕顔色。

模闆設置的調整涉及到網站更細節的部分，如果有興趣想進一步了解的朋友，記得點贊收藏，之後Tina能為大家做詳細介紹。

五、本文小結

今天的内容就到這裡啦！

由于今天介紹的内容較多，本文的思維導圖分享給大家，方便大家檢索某個模塊的作用和操作。

跨境培訓上君志！了解更多Shopify建站知識：君志學堂