佈景主題設定

您可以使用佈景主題設定,來變更線上商店的印刷樣式、顏色、社交媒體連結和結帳設定。

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

色彩

您可以為網路商店設定主要和次要配色。

調整顏色設定

  1. 點擊「佈景主題設定」。
  2. 按一下「顏色」。
  3. 若要開啟顏色選擇器,請點擊要變更之內容類型的顏色色樣。

  4. 點擊「儲存」。

若要深入瞭解顏色選項 (包括顏色漸層的設定方式),請參閱「顏色配置」。

字體

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

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

自訂您的字體設定

  1. 點擊「佈景主題設定」。
  2. 按一下「字體」。
  3. 根據每一種文字類型點擊「變更」,即可使用字形選擇器:
  4. 使用搜尋欄位或點擊「載入更多」,即可探索可用字型。
  5. 按一下要使用的字型名稱,然後點擊「選取」。
  6. 點擊「儲存」。

自訂字型大小

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

步驟:

  1. 點擊「佈景主題設定」>「字體」。
  2. 若要變更標題的預設字型大小,請使用「字型大小縮放」來選取預設的字型大小。字型最小為 100%,最大為 150%。每增加一格刻度即增加字型大小 5%。預設值為 100%。
  3. 若要變更內文的預設字型大小,請使用字型大小縮放來選取預設的字型大小。字型最小為 100%,最大為 130%。每增加一格刻度即增加字型大小 5%。預設值為 100%。
  4. 點擊「儲存」。

版面配置

版面配置讓您可以自行設定用來顯示網路商店的最大寬度。

  1. 點擊「佈景主題設定」>「版面配置」。
  2. 使用範圍滑桿,選擇 1000 像素至 1600 像素之間的頁面寬度。預設值為 1600 像素。
  3. [選用] 使用範圍滑桿在區段之間加入垂直空間。區段間最多可加入 100 像素。
  4. [選用] 如果您有網格版面配置,請使用橫向空間垂直空間範圍滑桿,在網格內容之間加入空間。加入橫向空間最多能在橫列之間加入 40 像素的空間,而加入垂直空間最多能在直欄之間加入 40 像素的空間。
  5. 點擊「儲存」。

邊框和陰影

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

邊框的可自訂選項為:

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

陰影的可自訂選項為:

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

按鈕

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

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

自訂按鈕

  1. 點擊「佈景主題設定」。
  2. 點擊「按鈕」。
  3. 使用縮放比例來變更按鈕邊框的外觀。
  4. 使用縮放比例來變更按鈕的陰影。若陰影不透明度為 0%,則完全沒有陰影。
  5. 點擊「儲存」。

子類藥丸

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

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

自訂子類藥丸

  1. 點擊「佈景主題設定」。
  2. 點擊「子類藥丸」。
  3. 使用縮放比例來變更子類藥丸的邊框外觀。
  4. 使用縮放比例來變更子類藥丸的陰影。若陰影不透明度為 0%,則完全沒有陰影。
  5. 點擊「儲存」。

輸入

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

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

自訂輸入欄

  1. 點擊「佈景主題設定」。
  2. 點擊「輸入」。
  3. 使用縮放比例來變更輸入欄邊框的外觀。
  4. 使用縮放比例來變更輸入欄的陰影。若陰影不透明度為 0%,則完全沒有陰影。
  5. 點擊「儲存」。

卡片

卡片為區段分隔區域,可顯示多個品項,例如產品卡片、網誌卡片、商品系列卡片或拼貼卡片。您可以自訂區段卡片的形狀、樣式、顏色、對齊和圖片邊距。

自訂卡片

  1. 點擊「佈景主題設定」。
  2. 點擊「卡片」。
  3. 使用下拉式選單選擇卡片樣式
  4. 使用縮放比例來新增圖片邊框間距。如此可在卡片圖片周圍加入間距。
  5. 使用下拉式選單來設定卡片的文字對齊方式。您可選擇靠左、置中 (預設) 或靠右。
  6. 使用下拉式選單選取卡片的顏色配置
  7. 使用縮放比例來變更卡片邊框的外觀。
  8. 使用縮放比例來變更卡片的陰影。若陰影不透明度為 0%,則完全沒有陰影。
  9. 點擊「儲存」。

內容容器

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

自訂內容容器

  1. 點擊「佈景主題設定」。
  2. 點擊「內容容器」。
  3. 使用縮放比例來變更內容容器的邊框外觀。
  4. 使用縮放比例來變更內容容器的陰影。若陰影不透明度為 0%,則完全沒有陰影。
  5. 點擊「儲存」。

媒體

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

自訂多媒體檔案

  1. 點擊「佈景主題設定」。
  2. 點擊「多媒體檔案」。
  3. 使用縮放比例來變更多媒體檔案邊框的外觀。
  4. 使用縮放比例來變更多媒體檔案的陰影。若陰影不透明度為 0%,則完全沒有陰影。
  5. 點擊「儲存」。

下拉式選單和快顯視窗

調整導覽下拉式選單、強制回應快顯視窗,以及購物車快顯視窗的外觀。

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

  1. 點擊「佈景主題設定」。
  2. 點擊「下拉式選單和快顯視窗」。
  3. 使用縮放比例來變更邊框的外觀。
  4. 使用縮放比例來變更陰影。若陰影不透明度為 0%,則完全沒有陰影。
  5. 點擊「儲存」。

收銀機

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

自訂導覽匣

  1. 點擊「佈景主題設定」。
  2. 點擊「導覽匣」。
  3. 使用縮放比例來變更邊框的外觀。
  4. 使用縮放比例來變更陰影。若陰影不透明度為 0%,則完全沒有陰影。
  5. 點擊「儲存」。

徽章

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

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

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

自訂徽章

  1. 點擊「佈景主題設定」。
  2. 點擊「徽章」。
  3. 使用下拉式選單選取徽章在商品卡中的位置。您可選擇左上、右上、左下 (預設) 或右下。
  4. 使用圓角半徑縮放比例來新增圓角。將圓角半徑設定為 0 像素時,徽章會呈方形;圓角半徑數值越高,徽章就越接近圓形。
  5. 為您的徽章選擇顏色配置。您可以為售完的商品設定其他顏色配置。
  6. 點擊「儲存」。

圖示

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

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

自訂圖示

  1. 點擊「佈景主題設定」。
  2. 按一下圖示
  3. 使用下拉式選單,選擇圖示的預設顏色。選取重點色 1、重點色 2、外邊框按鈕或商店圖示的文字顏色。
  4. 點擊「儲存」。

社交媒體

您可以為產品和部落格貼文加入社交分享按鈕,以及指向您的社交媒體帳戶的連結。 指向您社交媒體帳戶的連結會顯示在您線上商店的頁尾。

自訂您的社交媒體設定

  1. 點擊「佈景主題設定」。
  2. 點擊「社群媒體」。
  3. 若要新增您社群媒體帳號的連結,請在帳號下提供的欄位中輸入帳號連結。請輸入完整連結,例如 https://instagram.com/shopify,或 https://twitter.com/shopify
  4. 點擊「儲存」。

搜尋行為

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

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

  • 啟用產品建議 - 啟用或停用產品建議。
  • 顯示供應商 - 在產品建議中顯示或隱藏廠商。
  • 顯示價格 - 在產品建議中顯示或隱藏價格。

變更搜尋輸入設定

  1. 點擊「佈景主題設定」。
  2. 點擊「搜尋輸入
  3. 使用此設定來自訂商店的搜尋行為。
  4. 點擊「儲存」。

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

Favicon

您可以加入喜歡的圖示或 favicon,這樣做可以幫助您鞏固線上商店的品牌形象。favicon 會顯示在以下各位置:

  • 您的網路瀏覽器分頁
  • 您的網路瀏覽器的歷程記錄
  • 您桌面上的圖示
  • 如果線上商店有被加入書籤的話,會顯示在商店名稱旁邊

深入瞭解 Favicon

自訂您的 favicon

  1. 點擊「佈景主題設定」。
  2. 點擊「Favicon」。
  3. 在「Favicon 圖片」區域中,點擊「選擇圖片」,然後執行下列任一操作:

    • 若要使用已上傳至 Shopify 管理介面的圖片,請點擊圖片加以選取,然後點擊「選取」。
    • 若要使用電腦本機的圖片,請點擊「上傳」。從電腦中選取圖片,然後點擊「開啟」以開始上傳。上傳完成後,系統會自動選取該圖片。點擊「選取」。
    • 若要選取免費圖片,請點擊「免費圖片」,然後搜尋或點擊圖片即可選取。
  4. 為您的 favicon 圖片新增替代文字:

    1. 點擊「編輯」替代文字。
    2. 「編輯圖片」視窗中,輸入圖片的簡短說明。
    3. 點擊「儲存」。

幣別格式

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

  1. 點擊「佈景主題設定」。
  2. 點擊「幣別格式」。
  3. 若要啟用幣別代碼,請點擊「顯示幣別代碼」核取方塊。
  4. 點擊「儲存」。

購物車

您可以變更網路商店的購物車樣式。當顧客將您商店的商品加到購物車時,購物車可能會顯示為導覽匣、頁面或快顯通知。如果顧客的購物車裡沒有商品,您可以在購物車導覽匣顯示精選商品系列。

步驟:

  1. 點擊「佈景主題設定」>「購物車」。
  2. 使用下拉式選單選取購物車樣式:導覽匣、頁面或快顯通知。
  3. 選用:若要針對顧客購物車中的品項顯示供應商,請點擊「顯示廠商」。
  4. 選用:若要新增能讓顧客提出特殊要求或新增其他訂單資訊的區域,請選取「啟用購物車備註」選項。

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

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

結帳

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

變更佈景主題樣式

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

步驟:

  1. 點擊「佈景主題設定」>「樣式」。

  2. 使用下拉式選單,選取佈景主題樣式選項。可用的選項依您所使用的佈景主題而定。

  3. 點擊「儲存」。

復原和取消復原變更

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

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

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

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

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

免費試用