佈景主題設定

您可以使用佈景主題設定,來變更線上商店的字體、顏色、社交媒體連結和結帳設定。 您對佈景主題設定進行變更時,此變更會套用至整個網路商店。

商標

您可以將商店標誌新增至網路商店。標誌會顯示在以下位置:

  • 所有頁面的頁首
  • 密碼頁面

標誌圖片的寬度上限為 300 像素。

自訂標誌

自訂標誌寬度

  1. 點擊「佈景主題設定」。
  2. 點擊「標誌」。
  3. 在「電腦版標誌寬度」區域中,將滑桿切換至您想要的像素寬度。

Favicon

您可以加入喜歡的圖示或 favicon,如此有助於強化網路商店的品牌形象。favicon 會顯示在以下各位置:

  • 您的網路瀏覽器分頁
  • 您的網路瀏覽器的歷程記錄
  • 電腦版上的圖示
  • 如果網路商店已加入書籤,會顯示在商店名稱旁邊

深入瞭解 Favicon

自訂您的 favicon

色彩

您可以建立多達 21 種不重複的顏色配置,並套用至網路商店的不同區段。深入瞭解顏色選項、顏色配置及顏色漸層

調整顏色設定

  1. 在 Shopify 管理介面 中,前往「線上商店」>「佈景主題」。
  2. 在您要自訂的佈景主題旁邊點擊「自訂」。
  3. 按兩下主題設置「然後按兩下」 顏色。
  4. 在「配置」區段中,點擊現有配置或「新增配置」以新增顏色配置。
  5. 點擊要變更之內容類型的顏色色樣。
  6. 若要設定顏色,請輸入十六進位顏色代碼或從顏色選擇器中挑選。若要將顏色設為透明,請在文字欄位中刪除十六進位代碼。
  7. 點擊「儲存」。

字體

您可以指定線上商店裡文字的字型樣式和大小。您可以選擇系統字型或自訂字型。

建議您在商店中使用系統字型。系統字型是使用者電腦上已經安裝的字型。使用系統字型可以避免系統將新字型下載到顧客的電腦,此下載作業會對商店載入速度帶來負面影響。顧客電腦上顯示的字型依所用的作業系統而定。

自訂您的字體設定

請參閱 Shopify 的字型庫,查看可用字型清單。

自訂字型大小

您可以在「字體」佈景主題設定中,設定標題和內文文字的預設字型大小。

步驟:

版面配置

版面配置可讓您自行設定用來顯示網路商店的最大寬度,以及設定不同區段之間的垂直和水平間距。

動畫

使用動畫即可為網路商店新增動態和視覺效果。您可以啟用淡入效果的動畫,在顧客捲動畫面時顯示商店區段,並為資訊卡和按鈕啟用懸停效果。

步驟:

  1. 在 Shopify 管理介面 中,前往「線上商店」>「佈景主題」。
  2. 在您要自訂的佈景主題旁邊點擊「自訂」。
  3. 依序點擊「佈景主題設定」和「動畫」。
  4. 選用:若要啟用在捲動畫面時顯示網路商店區段的動畫,請選取「捲動時顯示區段」。
  5. 選用:若要為資訊卡和按鈕新增懸停效果動畫,請從「懸停效果」設定中選擇下列其中一個選項:

    • 垂直浮起:當顧客將滑鼠游標停留在資訊卡或按鈕上時,該元素會向上移動。
    • 3D 浮起:當顧客將滑鼠游標停留在資訊卡或按鈕上時,該元素會向前移動並產生 3D 效果。此外,將有一道細微光澤在整個元素上移動,為其增加空間感層次。
  6. 點擊「儲存」。

邊框和陰影

您可以調整某些互動式內容類型的邊框和陰影,例如導覽匣、按鈕、子類選項或數量輸入欄。

邊框的可自訂選項為:

  • 厚度:變更品項的外邊框。
  • 不透明度:設定品項外邊框的透明度。
  • 角落半徑:圍繞品項的半徑。

陰影的可自訂選項為:

  • 不透明度:變更品項陰影的透明度。若陰影不透明度為 0%,品項就會完全沒有陰影。
  • 水平垂直位移範圍滑桿會移動品項周圍陰影的位置。
  • 使用模糊範圍滑桿來變更品項陰影的不透明度。

按鈕

您可以自訂網路商店中動作號召按鈕的設定,像是加入陰影、變更間距或透明度,以及調整按鈕形狀。

含有行動號召按鈕的網路商店範例

自訂按鈕

帶色樣的子類選項

使用可選取色樣選項的網路商店範例

色樣是商品子類選項的視覺效果呈現。若要顯示色樣,您需要最新版本的 Dawn,且類別中繼欄位要連結至您的子類。透過 Dawn,子類選項可以下拉式選單或色樣顯示。若您要將子類選項顯示為色樣,您可以選擇將這些色樣顯示為圓圈、正方形或無,若設為無,則色樣會以文字顯示選項值。

色樣的 Dawn 設定範例

使用類別中繼欄位設定色樣

  1. 在 Shopify 管理介面 ,前往「產品」
  2. 點擊產品。
  3. 在「商品規劃」區段中的「商品類別」欄位輸入商品類別,然後從「商品類別」清單中選取最準確的結果。商品類別必須包含「顏色」類別中繼欄位。
  4. 在「子類」區段中,按一下「新增尺寸或顏色等選項」。
  5. 按一下「顏色」。
  6. 點按「新增顏色」欄位,然後從下拉式選單中選取任何預設顏色項目。
  7. 若要新增自訂顏色項目,請依下列步驟操作:

    1. 點按「新增顏色」,然後點按「新增項目」
    2. 「新增項目」頁面上,填寫「標籤」「顏色」欄位。
    3. 若要使用圖案而非顏色,請填寫「圖片」欄位。若同時新增顏色和圖片,該圖片將用於色樣。
    4. 選取「底色」「基本圖案」
    5. 點擊「儲存」。
  8. 點按「儲存」即可儲存商品。

在 Dawn 中自訂色樣

  1. 在 Shopify 管理介面 ,前往「線上商店」 > 「佈景主題」
  2. 請確保您已安裝最新版本的 Dawn,然後點按「自訂」
  3. 導覽至您新增顏色選項的商品。
  4. 選用:若要自訂色樣,請點選「子類選擇器」區塊。您可以選擇圓形正方形,以變更色樣的顯示。
  5. 點按「儲存」以儲存佈景主題。

子類藥丸

子類藥丸讓您在產品頁面或精選產品區段顯示產品的子類。顧客無須變更產品頁面,即可選取所需的子類,並將產品加入購物車。

含有可選取子類藥丸的網路商店範例

自訂子類藥丸

輸入

輸入欄內容為需要顧客輸入的互動區域,例如數量選擇器、電子郵件訂閱表單或購物車備註。您可以在佈景主題設定中,調整網路商店輸入欄的外觀。

含有輸入欄的網路商店範例

自訂輸入欄

卡片

透過商品卡、商品系列卡和網誌卡的設定,您可以自訂區段中顯示之每種類型的獨立區域樣式。您可以更改這三種類型區域卡的顏色、對齊方式、圖片邊框間距、邊框和陰影。

自訂卡片

內容容器

容器是內容區段的文字部分,例如素材輪播的文字方塊、圖片橫幅,或多欄位區段的欄位。您可以自訂網路商店的內容容器外觀。

自訂內容容器

媒體

多媒體檔案是區段的視覺元件,例如產品多媒體檔案,或附文字圖像區段中的圖片。您可以為多媒體檔案新增邊框和陰影。

自訂多媒體檔案

下拉式選單和彈出式視窗

調整導覽下拉式選單、彈出式互動視窗,以及購物車彈出式視窗的外觀。

自訂下拉式選單和彈出式視窗

收銀機

導覽匣是隱藏的互動式容器,會在點選或點按時顯示,例如可收合的導覽選單或篩選選項。

自訂導覽匣

徽章

商品降價或庫存數量為 0 時,系統會自動為您的商品圖片加入折扣售完徽章。您可以調整徽章的位置、形狀和顏色。

含有折扣與售完徽章的網路商店範例

頁面網誌徽章會顯示在相關的搜尋結果中。您可以自訂這些徽章的位置和形狀,但不能自訂顏色。

自訂徽章

圖示

圖示是可新增至特定區段或區塊的小圖片。在佈景主題設定中設定圖示的配色。

含有可收合橫列圖示的網路商店範例

自訂圖示

品牌資訊

您可以加上品牌的相關資訊,在頁尾新增品牌資訊區塊。

自訂品牌資訊

社群媒體

您可以為商品和網誌文章新增社群分享按鈕,並附上您社群媒體帳號的連結。社群媒體帳號的連結會顯示在您網路商店的頁尾。

自訂您的社交媒體設定

搜尋行為

網路商店包括搜尋預測,此功能會在顧客開始在搜尋欄位輸入時顯示搜尋建議。搜尋建議可協助顧客清楚指明並調整搜尋的查詢範圍,並讓顧客以新的方式探索網路商店。這些功能還能讓顧客快速瀏覽相符內容,無須為了檢視搜尋結果清單而離開目前頁面。

您可以自訂下列搜尋設定:

  • 啟用搜尋建議:啟用或停用搜尋建議。
  • 顯示商品廠商:在搜尋建議中顯示或隱藏商品廠商。
  • 顯示商品價格:在搜尋建議中顯示或隱藏商品價格。

變更搜尋輸入設定

若要深入瞭解搜尋建議的運作方式,請參閱搜尋預測

幣別格式

您可以選擇讓商品、購物車和結帳價格一律顯示幣別代碼。

購物車

您可以變更網路商店的購物車樣式。顧客將您商店的商品加到購物車時,購物車可能會以導覽匣、頁面或彈出式通知的形式顯示。若要讓顧客停留在商品頁面,請使用導覽匣或彈出式通知選項。若要將顧客帶往購物車頁面,請使用頁面選項。顧客的購物車沒有商品時,您可以在購物車導覽匣中顯示精選商品系列。

步驟:

如果您將購物車類型設為「導覽匣」,便可以在購物車導覽匣中顯示商品系列。只有購物車空無一物時,選取的商品系列才會顯示。

若要將商品系列新增到空白的購物車導覽匣中,請點擊「選取商品系列」。選取商品系列後,請點擊「變更」以選取其他商品系列,或將商品系列從購物車導覽匣移除。您也可以點擊「建立商品系列」以建立新的商品系列。點擊此按鈕後,您將離開佈景主題設定並前往 Shopify 管理介面的商品系列頁面。

結帳

此區段可讓您自訂商店的結帳頁面。如需深入瞭解商店結帳頁面,請參閱 Shopify 結帳頁面

變更佈景主題樣式

佈景主題樣式是由佈景主題設計師選擇的一整套設定。您可以將佈景主題樣式套用於商店,為商店打造設計精美的外觀和風格。所有的佈景主題都有依預設套用的佈景主題樣式。自訂佈景主題時,可以取代佈景主題樣式設定並使用自己的。如果將佈景主題樣式套用於佈景主題,您目前的設定 (如顏色和字體) 將會隨之變更。

步驟:

復原和取消復原變更

復原」按鈕可以還原最近一次變更,「取消復原」按鈕則會將您復原的變更加回來。點擊「復原」按鈕多次會讓您繼續復原操作內容,一一復原每個變更。「復原」和「取消復原」按鈕位於「佈景主題編輯器工具列」中。

佈景主題編輯器工具列中的復原和取消復原按鈕

按一下「復原」按鈕,即可還原下列變更:

  • 新增、重新排序和刪除區段
  • 「佈景主題設定」索引標籤上套用顏色、字體和其他設定
  • 重設佈景主題樣式。

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

免費試用