Narrative

Narrative 是一款專為視覺敘事而設計的精品佈景主題。Narrative 的獨特之處在於它專注於以圖像來講述故事。首頁預設為具有全寬度的投影片輪播、附文字的圖片和影片。這種版面配置具有強烈的視覺衝擊力,讓您在無需使用大量文字的情況下講述您的品牌故事。

使用 Narrative 的線上商店範例

Narrative 適用於以下情形:

  • 使用圖片和影片講述您的品牌故事
  • 傳達您商店的願景、宗旨或價值觀等強烈的訊息
  • 強調單一產品的獨特設計或低庫存業務

佈景主題編輯器

使用佈景主題編輯器來自訂您的佈景主題。佈景主題編輯器分為「區段」「佈景主題設定」兩個部分。

有「區段」和「佈景主題設定」的佈景主題編輯器工具列

您可以使用區段來修改商店不同頁面的內容和版面配置。您可以使用佈景主題設定來自訂商店的字體和顏色,以及變更社群媒體連結和結帳設定。

區段即是可以決定您線上商店中各頁面版面配置,並可由您自訂的內容方塊。

  • 首頁區段包含幻燈片或電子報註冊等功能,您可以新增、重新排列或移除這些功能。首頁上最多可以有 25 個區段。

  • 不同的頁面類型有不同的區段。舉例來說,產品頁面區段就會決定您線上商店中每個產品頁面的版面配置。

  • 頁面區段一定會位於您線上商店內的特定位置。您可以自訂這些區段,但是無法重新排列或移除。

  • 每項佈景主題都有固定的區段,如標頭、頁尾等等,這些區段會顯示在線上商店的所有頁面上。

您可以瞭解的獨特區段集和如何按照公司風格自訂這些區段的方法。

Narrative 包括以下的靜態區段:

  • 標頭

  • 投影片輪播
  • 頁尾
  • 產品頁面
  • 商品系列頁面
  • 商品系列清單頁面
  • 部落格
  • 貼文
  • 購物車頁面

動態區段

您可以新增重新排列移除這些動態區段,以便自訂首頁的版面配置。每項佈景主題都有獨特的動態區段集可供挑選。

Narrative 包括以下的動態區段:

  • 部落格文章

  • 商品系列清單
  • 精選商品系列
  • 圖庫
  • 醒目顯示
  • 附文字的圖片
  • 附文字疊加的圖片
  • 精選產品
  • 電子報
  • 地圖
  • RTF 文字
  • 推薦文
  • 影片
  • 自訂內容
  • 精選商品投影播放器

標頭

標頭區段包括顯示在商店每一頁頂端的內容。Narrative 可讓您透過按一下導覽圖示來選擇客戶可以存取的兩個導覽選單:

您也可以讓商店標頭透明化來變更商店標頭的外觀,這表示標頭會使用與下方區段相同的背景:

若要自訂標頭區段:

  1. 按一下「區段」索引標籤。

  2. 按一下「標頭」區段。

  3. 在「標誌圖片」區域,按一下「選擇圖片」,然後執行下列任一操作:

- 若要選擇已上傳到 Shopify 管理員的圖片,請按一下「圖庫」索引標籤。 - 若要從 Shopify 的 Burst 庫存圖片選集中選擇庫存圖片,請按一下「免費圖片」索引標籤。您可以在這裡輸入搜尋詞彙,或是瀏覽圖片類別。 - 如要從電腦本機中選擇圖片,請按一下「圖庫」索引標籤,然後按一下加號按鈕。

  1. 在「自訂標誌高度 (單位為像素)」欄位中輸入標誌的像素高度。

  2. 在「購物車圖示」清單中,選擇是否要在標頭中顯示手提袋或購物車標誌。

  3. 如果要讓商店的標頭透明,請執行以下操作:

    1. 按一下「啟用首頁上的透明標頭」。
    2. 選擇要在透明背景上顯示的圖片。您可能需要另選一個標誌 (與您選擇在標頭頁面上顯示的標誌不同)。例如,為因應較暗的背景,您可能需要採用白色的標誌。
    3. 按一下「透明標頭圖示調色盤」以選擇標頭圖片、導覽和購物車圖示的顏色。
  4. 在「主要導覽」清單中,選擇客戶按一下導覽圖示時會顯示的主要選單:

  5. 在「次要導覽」清單中,選擇次要選單:

  6. 按一下「儲存」

投影片輪播

您可以建立首頁投影片輪播,最多可以輪播五張圖片或影片投影片。

建議您針對投影片使用高解析度圖片。請使用 4000 x 2200 像素或更大的圖片,但請勿超過 Shopify 的上傳限制

由於投影片的尺寸和形狀取決於客戶裝置的尺寸和形狀,因此您的投影片輪播圖片在某些螢幕上將會遭到裁剪。請嘗試使用焦點位於中心部位的圖片,以保持每張圖片的重要部分可見。

若要深入瞭解投影片輪播圖片的最佳作法,請參閱「上傳圖片」。

投影片輪播區段包括下列設定:

  • 投影片高度 - 設定投影片高度。選擇「配合第一張圖片投影片高度」,以第一張圖片的高度做為投影片高度的基礎。
  • 置中按鈕 - 設定投影片上的按鈕位置。
  • 顯示疊加層 - 新增顏色疊加層至投影片。疊加顏色可讓投影片輪播文字便於閱讀。
  • 疊加顏色 - 設定疊加層的顏色。
  • 不透明度 - 設定疊加的不透明度。
  • 圖片 - 將圖片投影片新增至投影片輪播。
  • 對齊圖片 - 選擇圖片中最重要的區域,當作投影片的重點。
  • 影片連結 - 新增 YouTube 連結的 URL。
  • 封面圖片 - 幫影片投影片新增封面圖片。影片未播放時,即會顯示封面圖片。
  • 標題 - 新增標題到投影片。
  • 投影片標題 - 新增標題至投影片。若您有多張投影片,標題會顯示於投影片輪播的下方。
  • 按鈕標籤 - 將含有文字標籤的按鈕新增到投影片。
  • 按鈕連結 - 將您的按鈕連結至線上商店的其他部分。

將投影片新增至您的首頁

  1. 找到 Narrative 並按一下「自訂」

  2. 按一下「幻燈片」

  3. 使用設定來自訂投影片輪播

  4. 按一下「儲存」

頁尾

您可以在頁尾區段中編輯顯示在商店每一頁底部的內容。您可以在頁尾加入以下功能:

  • 社交媒體圖示
  • 付款圖示
  • 訂閱電子報
  • 視差捲動效果
  • 最多兩個選單

顯示選單、訂閱電子報、版權文字和付款圖示的網站頁尾區段。

如要自訂頁尾區段:

  1. 找到 Narrative 並按一下「自訂」

  2. 按一下「區段」

  3. 按一下「頁尾」。

  4. 勾選「顯示社交圖示」,將社交媒體圖示新增至頁尾。您可以在「社交」設定中,將圖示連結至您的社群媒體帳戶。

  5. 勾選「顯示付款圖示」,以便在頁尾新增付款圖示 (例如 Mastercard 或 PayPal)。

  6. 如要將訂閱電子報加入頁尾,請執行以下步驟:

    1. 勾選「顯示訂閱電子報」。
    2. 在「標題」欄位,中輸入訂閱電子報的標題。標題預設為「訂閱最新消息」。
    3. 在「副標題」欄位中,輸入訂閱電子報的副標題。預設副標題為「促銷活動、新產品和特賣消息,直接送到您的收件匣。」
  7. 如要將選單加入頁尾,請執行以下步驟:

    1. 按一下「新增選單」。
    2. 如要編輯預設選單,請按一下「編輯選單」。如要變更為其他選單,請按一下「變更」,然後選擇現有選單或按一下「建立選單」。
  8. 按一下「儲存」

產品頁面

在「產品頁面」區段中,您可以新增或移除以下元素:

  • 數量選擇器
  • 變體標籤
  • 產品品牌或供應商
  • 變體圖片
  • 動態結帳按鈕
  • 社交分享按鈕
  • 商品推薦

如要編輯產品頁面的設定:

  1. 在頂端列的下拉式選單中,選擇「產品頁面」。

  2. 按一下「區段」

  3. 按一下「產品頁面」。

  4. 如要顯示數量選擇器,請勾選「顯示數量選擇器」。

  5. 如要顯示變體標籤 (例如「尺寸」和「顏色」),請勾選「顯示變體標籤」。顯示的同類產品標籤是以變體選項名稱為根據。

  6. 如要顯示產品品牌或供應商,請勾選「顯示產品供應商」。如要展示品牌或供應商,您需要為產品新增供應商

  7. 如要防止變體圖片顯示在頁面底部的圖庫中,請勾選「隱藏圖庫中的變體圖片」。如此一來,唯一會顯示的圖片是非附加於變體的圖片。

  8. 如要顯示動態結帳按鈕,請勾選「顯示動態結帳按鈕」。

  9. 如要顯示社交分享按鈕,請勾選「顯示社交分享按鈕」。

  10. 按一下「儲存」

新增或移除產品推薦

您可以在產品頁面顯示推薦產品,讓客戶輕鬆發掘其他符合興趣的產品。

  1. 在頂端列的下拉式選單中,選擇「產品頁面」。

  2. 按一下「產品推薦」。

  3. 使用「顯示動態推薦」核取方塊,於產品頁面中顯示或隱藏產品推薦。

  4. 選用:若要變更推薦產品上方顯示的標題,請在「標題」欄中輸入新標題。

  5. 選用:若要選擇產品推薦的顯示方式,可以使用這些核取方塊:

- 啟用圖片間距 - 顯示產品廠商

  1. 按一下「儲存」

商品系列頁面

您可以設定商品系列頁面,以允許客戶對商品系列中的產品進行篩選和排序。您也可以選擇要顯示的產品數量。

如要設定商品系列頁面的版面配置:

  1. 導覽至佈景主題編輯器中的商品系列頁面。

  2. 按一下「區段」索引標籤。

  3. 按一下「商品系列頁面」。

  4. 從清單中選擇每列的產品數和每頁的列數。

  5. 如果您銷售來自不同品牌或供應商的產品,請勾選「顯示產品供應商」,以便在產品圖片下方顯示供應商的名稱。

  6. 如果要在頁面頂端顯示商品系列圖片,請勾選「顯示商品系列圖片」。

  7. 勾選「啟用標籤篩選」,以允許客戶按產品標籤篩選商品系列。

  8. 勾選「啟用商品系列排序」以顯示排序選單。

  9. 按一下「儲存」

購物車頁面

您可以讓客戶在訂單中加入備註。客戶可以使用購物車備註提供有關如何準備或交付訂單的特別指示:

標籤為「賣家特別指示」的文字欄位會顯示在購物車頁面上。欄位會顯示在訂單小計和結帳按鈕旁邊。

客戶撰寫備註時,備註內容會顯示在 Shopify 管理員中訂單的「備註」區域中。

如要在購物車頁面中加入「備註」欄位:

  1. 找到 Narrative 並按一下「自訂」

  2. 從頂端列的下拉式選單中選擇「購物車」。

  3. 按一下「區段」

  4. 按一下「購物車頁面」。

  5. 勾選「啟用購物車備註」。

  6. 按一下「儲存」

秘訣:您可以在「購物車導覽匣」佈景主題設定中,將購物車設定為導覽匣樣式。購物車導覽匣會從頁面右側滑出,這表示客戶可以將產品加入購物車,而無需離開產品頁面。

精選商品系列

您可以在首頁上展示精選商品系列。展示精選商品系列有助於促進銷售和宣傳新商品系列。

如要新增精選商品系列:

  1. 按一下「區段」索引標籤。

  2. 按一下「精選商品系列」

  3. 在「商品系列」清單中,選擇您想顯示的商品系列。

  4. 勾選「啟用圖片間距」以拉大圖片之間的距離。

  5. 在「標題」欄位中,輸入要顯示在此區段頂端的文字。此文字依預設為「精選商品系列」。

  6. 如要在每張產品照片下方顯示供應商或品牌名稱,請勾選「顯示產品供應商」。

  7. 如果要允許客戶檢視商品系列中的所有產品,請勾選「顯示『查看全部』按鈕」。客戶按下此按鈕後,就會開啟商品系列頁面並顯示所有產品。

  8. 如果要將「查看全部」按鈕顯示為有實線外框的透明按鈕,請勾選「使用次要按鈕樣式」。

  9. 在「每列產品數」清單中,選擇要在每一列顯示的產品數量。

  10. 在「資料列」清單中,選擇要顯示的產品列數。

  11. 按一下「儲存」

圖庫

「圖庫」區段為一系列 (最多 3 張) 圖片。您可以從包含 13 個自訂圖示的清單中選擇圖示,以顯示蓋過每張圖片。(選用) 您可以將每張圖片連結至商店中的 URL 或頁面:

並排三張貓照片的圖庫區段。

  1. 按一下「區段」索引標籤。

  2. 按一下「圖庫」。

  3. 在「內容」區域中,按一下「圖片」。

  4. 如要新增圖片,請在「圖片」區域中,按一下「選擇圖片」,然後執行下列任一操作:

- 若要選擇已上傳到 Shopify 管理員的圖片,請按一下「圖庫」索引標籤。 - 若要從 Shopify 的 Burst 庫存圖片選集中選擇庫存圖片,請按一下「免費圖片」索引標籤。您可以在這裡輸入搜尋詞彙,或是瀏覽圖片類別。 - 如要從電腦本機中選擇圖片,請按一下「圖庫」索引標籤,然後按一下加號按鈕。

  1. 在「圖片對齊」清單中,選擇要對齊圖片的方式。例如,選擇「左上角」會將圖片放置在區段區域的左上角。

  2. 從「圖示」清單中,選擇要顯示蓋過圖片的圖示。

  3. 找到「文字」區域,在「說明文字」欄位中輸入要顯示每張圖片上的文字。

  4. 如果要將說明文字連結至頁面,請執行以下操作:

    1. 如要將文字連結至商店中的頁面,請按一下「連結」欄位,然後選擇商店中的頁面。
    2. 如果要將文字連結到網站,請將網站的 URL 輸入「連結」欄位中。
  5. 按一下「儲存」

附文字的圖片

Narrative 包含「附文字的圖片」區段,可供您向客戶顯示包含自訂訊息的圖片。

您可以將圖片裁剪成圓形:

或是正方形:

您也可以選擇完全不裁剪圖片。改為選擇對齊圖片,以確保從行動裝置檢視時圖片的重要部分不會遭到裁剪。例如,如果不希望顯示銷售產品的圖片底部遭到裁剪,您可以選擇對齊 Bottom center (底部中間) 以確保圖片的此部分不會遭到裁剪。

  1. 按一下「區段」索引標籤。

  2. 按一下「帶有文字的圖片」

  3. 區段間距」清單中,選擇您希望此區段的大小為「小型」、「中型」、「大型」或「超大型」。

  4. 如果要新增背景顏色,請按一下「背景顏色」色樣,然後從調色盤中選擇顏色。

  5. 如要新增圖片,請在「圖片」區域中,按一下「選擇圖片」,然後執行下列任一操作:

- 若要選擇已上傳到 Shopify 管理員的圖片,請按一下「圖庫」索引標籤。 - 若要從 Shopify 的 Burst 庫存圖片選集中選擇庫存圖片,請按一下「免費圖片」索引標籤。您可以在這裡輸入搜尋詞彙,或是瀏覽圖片類別。 - 如要從電腦本機中選擇圖片,請按一下「圖庫」索引標籤,然後按一下加號按鈕。

  1. 如果要將圖片裁剪為圖案,請在「圖片裁剪」清單中選擇「圓形」或「正方形」。

  2. 如果不想將圖片裁剪成圖案,請執行以下操作:

    1. 在「圖片裁剪」清單中選擇「」。
    2. 在「圖片對齊」清單中,選擇要對齊圖片的方式。例如,選擇「左上角」會將圖片放置在區段區域的左上角。
  3. 如要新增文字,請執行下列其中一項操作:

    1. 在「標題」欄位中,輸入要顯示的標題文字。
    2. 在「文字」欄位中,輸入要顯示在標題下方的文字。
    3. 如果要將按鈕顯示為有實線外框的透明按鈕,請勾選「使用次要按鈕樣式」。
    4. 「按鈕標籤」欄位中,輸入要顯示在按鈕上的文字。
    5. 在「按鈕連結」欄位中,貼上指向 URL 的連結,或按一下該欄位以從商店中選擇頁面。

如要自訂版面配置:

  1. 在「版面配置」區域中,從「電腦版面配置清單」中,選擇在從電腦檢視時要將圖片置放在文字的左側還是右側。

  2. 從「行動裝置版面配置」清單中,選擇在從行動裝置檢視時要將圖片置放在文字的上方或下方。

附文字疊加的圖片

您可以在首頁向客戶顯示自訂訊息。您的可以在訊息中說明產品、分享公告內容或歡迎客戶造訪您的商店。

如要自訂附文字疊加的圖片區段:

  1. 按一下「區段」索引標籤。

  2. 按一下「附文字疊加的圖片」。

  3. 區段間距」清單中,選擇您希望此區段的大小為「小型」、「中型」、「大型」或「超大型」。

如要新增背景圖片:

  1. 在「圖片」區域中,按一下「選擇圖片」,然後執行下列任一操作:

- 若要選擇已上傳到 Shopify 管理員的圖片,請按一下「圖庫」索引標籤。 - 若要從 Shopify 的 Burst 庫存圖片選集中選擇庫存圖片,請按一下「免費圖片」索引標籤。您可以在這裡輸入搜尋詞彙,或是瀏覽圖片類別。 - 如要從電腦本機中選擇圖片,請按一下「圖庫」索引標籤,然後按一下加號按鈕。

  1. 在「圖片對齊」清單中,選擇要對齊圖片的方式。例如,選擇「左上角」會將圖片放置在區段區域的左上角。

如要新增文字:

  1. 找到「文字」區域,在「標題」欄位中輸入此區段的標題。

  2. 在「文字」欄位中,輸入要顯示在此區段的文字。

  3. 在「文字大小」清單中,選擇文字大小為「中型」或「大型」。

如要新增按鈕:

  1. 如果要將按鈕顯示為有實線外框的透明按鈕,請勾選「使用次要按鈕樣式」。

  2. 「按鈕標籤」欄位中,輸入要顯示在按鈕上的文字。

  3. 在「按鈕連結」欄位中,貼上指向 URL 的連結,或按一下該欄位以從商店中選擇頁面。

如要套用疊加層:

  1. 在「疊加層」區域中,勾選「顯示疊加層」。

  2. 按一下「疊加顏色」色樣,以從圖片疊加層中選擇顏色。

  3. 按一下「文字顏色」色樣,以選擇文字顏色。

祕訣:若背景圖片顏色較深,請挑選淺色文字以便閱讀。

  1. 在「透明度」清單中,為圖片疊加層選擇透明度。

電子報

您可以將訂閱電子報加入首頁。您可以收集客戶的電子郵件地址,以供電子郵件行銷使用。您可以在 Shopify 部落格上進一步瞭解電子郵件行銷。

網站上的電子報區段。在此提供客戶可以輸入電子郵件地址的欄位和「訂閱」按鈕。

如要將訂閱電子報新增至首頁:

  1. 找到 Narrative 並按一下「自訂」

  2. 按一下「區段」

  3. 按一下「新增區段 > 電子報」。

  4. 在「標題」欄位中,輸入訂閱電子報的標題。標題預設為「訂閱我們的電子報」。

  5. 在「副標題」欄位中,輸入訂閱電子報的副標題。預設文字為「促銷活動、新產品和特賣消息,直接送到您的收件匣。」

  6. 在「成功訊息」欄位中輸入成功訊息。客戶在提交電子郵件地址後會看到成功訊息。成功訊息預設為「感謝訂閱」。

  7. 按一下「文字顏色」色樣並選擇顏色,以設定訂閱電子報欄位的文字顏色。

  8. 按一下「背景顏色」色樣並選擇顏色,以設定訂閱電子報區段的背景顏色。

  9. 按一下「儲存」

地圖

您可以在首頁納入地圖。地圖可有助於宣傳商店的位置和營業時間。

如要新增地圖:

  1. 按一下「區段」索引標籤,並選擇「新增區段」。

  2. 按一下「地圖」。

  3. 在「疊加標題」欄位中,輸入要顯示在此區段頂端的文字。

  4. 在「文字地址和營業時間」欄位中,輸入公司的業務資訊。

  5. 在「地圖地址」欄位中,輸入商家地址。

  6. 在「Google Maps API 金鑰」欄位中,輸入有效的 API 金鑰

  7. 在「圖片」欄位中,上傳或選擇在地圖區段載入發生問題時顯示的圖片。

影片

您可以將 YouTube 或 Vimeo 代管的影片加入首頁。影片可以吸引客戶並讓客戶對您的業務產生興趣。

如要為首頁新增影片:

  1. 找到 Narrative 並按一下「自訂」

  2. 按一下「區段」

  3. 按一下「新增區段 > 影片」。

  4. 在「標題」欄位中,輸入影片的標題。標題文字會顯示在您的影片上,直到點擊播放按鈕為止。

  5. 在「影片連結」欄位中,輸入影片的分享連結。

    YouTube 分享連結如下所示:https://youtu.be/OTJXAUZY9t0。您可以在此 YouTube 說明文章中瞭解如何複製 YouTube 影片的分享連結。

    Vimeo 分享連結如下所示:https://vimeo.com/281332510。您可以在此 Vimeo 說明中心文章中,瞭解如何複製 Vimeo 影片的分享連結。

  6. (選用) 在影片中加入封面圖片:

    1. 按一下「選擇圖片」。如要從電腦上傳圖片,請按一下「上傳」。如要使用 Burst 中的免費圖庫圖片,請按一下「免費圖片」。
    2. 在「圖片位置」下拉式選單中選擇位置,以選擇對齊封面圖片的方式。您可以使用圖片位置來選擇在裁剪圖片時要保留的部分。
  7. 選用:新增疊加層至影片中,即在影片和標題文字間增加一層顏色:

    1. 勾選「顯示疊加層」。
    2. 按一下「疊加層」色樣並選擇顏色,以設定疊加層顏色。
    3. 按一下「文字」色樣並選擇顏色,以設定文字顏色。
    4. 在「透明度」桿滑中選擇百分比,以設定疊加層的透明度。
  8. 按一下「儲存」

精選商品投影播放器

精選商品投影播放器可讓您展示更多產品資訊,而無需強迫客戶離開首頁。

您可以顯示產品功能、新商品系列或變體。投影片輪播最適合使用少量投影片,因為在電腦上瀏覽投影片組合時,頁面捲動功能會被鎖定。

從行動裝置檢視時,精選商品投影片輪播需要點一下或捏合動作才能開啟和檢視。為了吸引行動裝置的客戶開啟精選商品投影片輪播,建議使用精美的封面圖片並使用包含「行動號召」的用語。

您最多可以為精選商品投影片輪播內容新增 5 張投影片。

如要自訂精選商品投影片輪播內容:

  1. 按一下「區段」索引標籤。

  2. 按一下「精選商品投影播放器」。

如要新增圖片投影片:

  1. 在「內容」區域中,按一下「投影片」。

  2. 按一下「背景顏色」色樣,以從調色盤中選擇背景顏色。

  3. 在「圖片」區域中,按一下「選擇圖片」,然後執行下列任一操作:

- 若要選擇已上傳到 Shopify 管理員的圖片,請按一下「圖庫」索引標籤。 - 若要從 Shopify 的 Burst 庫存圖片選集中選擇庫存圖片,請按一下「免費圖片」索引標籤。您可以在這裡輸入搜尋詞彙,或是瀏覽圖片類別。 - 如要從電腦本機中選擇圖片,請按一下「圖庫」索引標籤,然後按一下加號按鈕。

  1. 在「標題」欄位中,輸入要顯示蓋過投影片的文字。

  2. 在「按鈕標籤」欄位中,輸入要顯示在按鈕上的文字。

  3. 在「按鈕連結」欄位中,貼上指向 URL 的連結,或按一下該欄位以從商店中選擇頁面。

如要自訂精選商品投影播放器設定:

  1. 如果要將投影片按鈕顯示為有實線外框的透明按鈕,請勾選「使用次要按鈕樣式」。

  2. 如果要變更文字顏色,請按一下「投影片標題顏色」色樣,即可從調色盤中選擇顏色。

  3. 在「封面設定」區域中,按一下「選擇圖片」,然後執行下列任一操作,即可為精選商品投影播放器選擇封面圖片:

- 若要選擇已上傳到 Shopify 管理員的圖片,請按一下「圖庫」索引標籤。 - 若要從 Shopify 的 Burst 庫存圖片選集中選擇庫存圖片,請按一下「免費圖片」索引標籤。您可以在這裡輸入搜尋詞彙,或是瀏覽圖片類別。 - 如要從電腦本機中選擇圖片,請按一下「圖庫」索引標籤,然後按一下加號按鈕。

  1. 在「標頭」清單中,輸入要顯示在封面圖片上的文字。

  2. 在「標題位置」清單中,選擇標題文字要顯示在封面圖片的左側還是中央位置。此設定僅適用於電腦檢視。

  3. 在「疊加層」區域中,勾選「顯示疊加層」。

  4. 按一下「疊加顏色」色樣,以從圖片疊加層中選擇顏色。

  5. 按一下「文字顏色」色樣以選擇文字顏色。

  6. 在「透明度」清單中,為圖片疊加層選擇透明度。

  7. 按一下「儲存」

主題設定 您可以透過佈景主題設定來自定線上商店的顏色和字體。您也可以建立您的社群媒體帳戶連結、編輯購物車設定,並新增 favicon。

Narrative 包括以下的佈景主題設定:


  • 顏色
  • 印刷樣式
  • 購物車導覽匣
  • 社交媒體
  • Favicon
  • 結帳

顏色

您可以指定線上商店內各部分的顏色。

調整顏色設定

  1. 按一下 **** 旁邊的「自訂」。

  2. 按一下「佈景主題設定」。

  3. 按一下「顏色」。

  4. 根據每種內容類型按一下顏色樣本,即可使用顏色挑選器。

    佈景主題編輯器內的顏色挑選器

- 「最近選擇」區域會顯示您最近為佈景主題選擇過的顏色。 - 「目前使用」區域會顯示您佈景主題其他部分目前正在使用的顏色。

若要將顏色設定為透明,請按一下「」。

  1. 按一下「儲存」。

印刷樣式

您可以指定線上商店裡文字的字型風格和大小。

自訂您的字體設定

  1. 按一下 **** 旁邊的「自訂」。

  2. 按一下「佈景主題設定」。

  3. 按一下「字體」。

  4. 根據每一種文字類型按一下「變更」即可使用字形挑選器:

    字形挑選器上的「變更」按鈕

  5. 您可以使用搜尋欄位或按一下「載入更多」查看有哪些字形。

    如果想檢視全部可用的字形,請看 Shopify 字形庫

  6. 按一下要使用的字體名稱。

  7. 若要變更粗體或斜體等字形風格,請按一下「標準」。然後找到您想使用的風格,按一下旁邊的「選擇」:

    字形挑選器可以挑選字體的粗細。

  8. 按一下「儲存」。

購物車導覽匣

您可以為線上商店自訂購物車導覽匣設定。

  • 將您的購物車設定為導覽匣式。購物車導覽匣會從頁面右側滑出,這表示客戶可以將產品加入購物車,而無需離開產品頁面。
  • 讓客戶在訂單中加入備註。客戶可以使用購物車備註提供有關如何準備或交付訂單的特別指示:

標籤為「賣家特別指示」的文字欄位會顯示在購物車導覽匣上。欄位會顯示在訂單小計和結帳按鈕旁邊。

如要自訂購物車導覽匣設定:

  1. 找到 Narrative 並按一下「自訂」

  2. 按一下「佈景主題設定」。

  3. 按一下「購物車導覽匣」。

  4. 勾選「顯示購物車導覽匣」,即可將您的購物車設定為導覽匣式購物車。如果未勾選此方塊,則會使用整頁式購物車。

  5. 勾選「顯示購物車備註」,即可將備註欄位新增至購物車導覽匣。

  6. 按一下「儲存」

社交媒體

您可以為產品和部落格貼文加入社交分享按鈕,以及指向您的社交媒體帳戶的連結。

如要自訂社交媒體設定:

  1. 找到 Narrative 並按一下「自訂」

  2. 按一下「佈景主題設定」。

  3. 按一下「社交」。

  4. 如要上傳社交分享圖片,請在「社交分享圖片」區域中,按一下「選擇圖片」或「探索免費圖片」。

  5. 如要在您的產品和部落格貼文中新增社交分享按鈕,請在「社交分享」區域中勾選任一或所有核取方塊。

    您可以加入以下的分享按鈕:

- 分享至 Facebook - 在 Twitter 上發佈推文 - 在 Pinterest 上收藏為釘圖 (不適用於部落格貼文分享)

  1. 如要新增指向您社交媒體帳戶的連結,請前往「帳戶」區域,在提供的欄位中輸入指向您帳戶的連結。輸入完整的連結,例如 https://instagram.com/shopifyhttps://twitter.com/shopify

    指向您社交媒體帳戶的連結會顯示在您線上商店的頁尾。

  2. 按一下「儲存」

Favicon

您可以上傳收藏的圖示或 Favicon,並透過在以下位置顯示您的標誌,以協助您塑造線上商店的品牌形象:

  • 您的網路瀏覽器分頁
  • 您的網路瀏覽器的歷程記錄
  • 您桌面上的圖示
  • 線上商店名稱旁邊 (如果線上商店已加入書籤的話)。

Narrative 的最佳 Favicon 圖片尺寸為 32 x 32 像素。

如要上傳 Favicon:

  1. 按一下「自訂」。

  2. 按一下「佈景主題設定」索引標籤。

  3. 按一下「Favicon」。

  4. 在「Favicon 圖片」區域中按一下「選擇圖片」,然後執行下列任一操作:

- 若要選擇已上傳到 Shopify 管理員的圖片,請按一下「圖庫」索引標籤。 - 如要從電腦本機中選擇圖片,請按一下「圖庫」索引標籤,然後按一下加號按鈕。

  1. 按一下「儲存」

結帳

您可以自訂結帳頁面以包含以下內容:

  • 頁面頂端的自訂圖片橫幅
  • 您的商店標誌
  • 主要內容區域中的背景圖片或顏色
  • 自訂文字字體和顏色。

如要在套用變更時顯示變更內容,請前往佈景主題編輯器中的結帳頁面。

如要存取結帳頁面設定:

  1. 按一下「自訂」。

  2. 按一下「佈景主題設定」索引標籤。

  3. 按一下「結帳」

如要新增橫幅圖片:

  • 在「橫幅」區域中,按一下「選擇圖片」,然後執行下列任一操作: - 若要選擇已上傳到 Shopify 管理員的圖片,請按一下「圖庫」索引標籤。
    • 若要從 Shopify 的 Burst 庫存圖片選集中選擇庫存圖片,請按一下「免費圖片」索引標籤。您可以在這裡輸入搜尋詞彙,或是瀏覽圖片類別。
    • 如要從電腦本機中選擇圖片,請按一下「圖庫」索引標籤,然後按一下加號按鈕。

如要新增標誌:

  1. 在「圖片」區域中,按一下「選擇圖片」,然後執行下列任一操作:

- 若要選擇已上傳到 Shopify 管理員的圖片,請按一下「圖庫」索引標籤。 - 如要從電腦本機中選擇圖片,請按一下「圖庫」索引標籤,然後按一下加號按鈕。

  1. 在「位置」清單中,選擇要將圖片顯示在右側、左側或中央。

  2. 在「標誌尺寸」清單中,選擇標誌大小。

如要變更結帳頁面的背景:

您可以在結帳頁面上顯示背景圖片,也可以選擇背景顏色。如果選擇背景圖片,圖片會以格狀樣式顯示。

  1. 在「主要內容區」區域中,按一下「選擇圖片」,然後執行下列任一操作:

- 若要選擇已上傳到 Shopify 管理員的圖片,請按一下「圖庫」索引標籤。 - 若要從 Shopify 的 Burst 庫存圖片選集中選擇庫存圖片,請按一下「免費圖片」索引標籤。您可以在這裡輸入搜尋詞彙,或是瀏覽圖片類別。 - 如要從電腦本機中選擇圖片,請按一下「圖庫」索引標籤,然後按一下加號按鈕。 - 按一下「背景顏色」色樣,以從調色盤中選擇背景顏色。

  1. 在「表單欄位」清單中,選擇白色或透明欄位。

如要變更「訂單摘要」頁面的背景:

  1. 在「訂單摘要」區域中,按一下「選擇圖片」,然後執行下列任一操作: - 若要選擇已上傳到 Shopify 管理員的圖片,請按一下「圖庫」索引標籤。
    • 若要從 Shopify 的 Burst 庫存圖片選集中選擇庫存圖片,請按一下「免費圖片」索引標籤。您可以在這裡輸入搜尋詞彙,或是瀏覽圖片類別。
    • 如要從電腦本機中選擇圖片,請按一下「圖庫」索引標籤,然後按一下加號按鈕。
    • 按一下「背景顏色」色樣,以從調色盤中選擇背景顏色。

如要設定字體選項:

  • 在「印刷樣式」區域中,於清單中選擇用於標題和正文文字的字體。

如要設定顏色選項:

  • 在「顏色」區域中,按一下「強調色」、「按鈕」或「錯誤」顏色色樣,即可從調色盤中選擇新顏色。

變更佈景主題樣式

您可以將佈景主題的一般設定重設為預設值。重設佈景主題樣式後,您在一般設定索引標籤上所做的任何變更均會遺失,但並不會遺失文字和圖片等內容。

  1. 按一下「一般設定」索引標籤。

  2. 按一下「變更佈景主題樣式」

  3. 按一下「變更佈景主題樣式」下方的按鈕。此按鈕的名稱通常是佈景主題的名稱。

  4. 按一下「變更樣式」

準備好開始透過 Shopify 銷售商品了嗎?

免費試用