佈景主題設定

您可以使用佈景主題編輯器側邊欄選單中的自訂佈景主題設定來變更網路商店的字體、顏色、社群媒體連結和購物車頁面。佈景主題設定變更會套用至整個網路商店。

區段和區塊還有可調整的設定,讓您自訂佈景主題的各個區段。深入瞭解區段和區塊

商標

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

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

自訂標誌

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

步驟如下:

電腦版
  1. 在 Shopify 管理介面中,前往「網路商店」>「佈景主題」。

  2. 尋找要編輯的佈景主題,然後點擊「自訂」。

  3. 點擊佈景主題設定 設定圖示。

  4. 點擊「標誌」。

  5. 在「標誌」區域中,新增圖片或使用免費圖片:

    • 若要新增圖片,請按一下「選取圖片」,然後新增全新圖片或現有圖片:

      • 若要使用已上傳至 Shopify 管理介面的圖片,請選取該圖片,然後按一下「完成」。
      • 若要使用本機電腦中的圖片,請按一下「新增圖片」。選取並新增圖片,然後按一下「完成」。
    • 若要使用免費圖片,請按一下「探索免費圖片」。尋找圖片,按一下以選取該圖片,然後再點按「選取」。

  6. 選用:為標誌圖片加上替代文字:

    1. 在「標誌」區域中,按一下「編輯」。
    2. 在「替代文字」欄位中,輸入圖片的簡要說明。
    3. 按一下「儲存」。
  7. 選用:在「電腦版標誌寬度」區域中,使用範圍滑桿來調整標誌像素寬度。

  8. 按一下「儲存」。

iPhone
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要編輯的佈景主題,然後點選「自訂」。

  5. 依序點選「」和「佈景主題設定」。

  6. 點選「標誌」。

  7. 在「標誌」區域中,新增圖片或使用免費圖片:

    • 若要新增圖片,請點選「選取圖片」,然後新增全新圖片或現有圖片:

      • 若要使用已上傳至 Shopify 管理介面的圖片,請選取該圖片,然後點選「完成」。
      • 若要使用本機裝置中的圖片,請點選「新增圖片」。請選取並新增本機裝置中的圖片,然後點選該圖片並點選「完成」。
    • 若要使用免費圖片,請點選「探索免費圖片」。尋找並點選圖片,然後點選「完成」。

  8. 選用:為標誌圖片加上替代文字:

    1. 在「標誌」區域中,點選「編輯」。
    2. 在「替代文字」欄位中,輸入圖片的簡要說明。
    3. 點選「」。
  9. 選用:在「電腦版標誌寬度」區域中,使用範圍滑桿來調整標誌像素寬度。

  10. 點選「」。

Android
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要編輯的佈景主題,然後點選「自訂」。

  5. 依序點選「...」和「佈景主題設定」。

  6. 點選「標誌」。

  7. 在「標誌」區域中,新增圖片或使用免費圖片:

    • 若要新增圖片,請點選「選取圖片」,然後新增全新圖片或現有圖片:

      • 若要使用已上傳至 Shopify 管理介面的圖片,請選取該圖片,然後點選「完成」。
      • 若要使用本機裝置中的圖片,請點選「新增圖片」。請選取並新增本機裝置中的圖片,然後點選該圖片並點選「完成」。
    • 若要使用免費圖片,請點選「探索免費圖片」。尋找並點選圖片,然後點選「完成」。

  8. 選用:為標誌圖片加上替代文字:

    1. 在「標誌」區域中,點選「編輯」。
    2. 在「替代文字」欄位中,輸入圖片的簡要說明。
    3. 點選「」。
  9. 選用:在「電腦版標誌寬度」區域中,使用範圍滑桿來調整標誌像素寬度。

  10. 點選「」。

新增 Favicon

您可以加入喜歡的圖示或 favicon,如此有助於網路商店的品牌行銷。favicon 顯示在以下位置:

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

深入瞭解 Favicon

步驟如下:

電腦版
  1. 在 Shopify 管理介面中,前往「網路商店」>「佈景主題」。

  2. 尋找要新增 Favicon 的佈景主題,然後點按「自訂」。

  3. 點擊佈景主題設定 設定圖示。

  4. 視佈景主題版本而定,點擊「標誌」或「Favicon」。

  5. 在「Favicon 圖片」區段中,按一下「選取圖片」,然後新增全新圖片或現有圖片:

    • 若要選取已上傳至 Shopify 管理介面的圖片,請搜尋或尋找該圖片,然後使用核取方塊選取圖片。
    • 若要從本機電腦選取圖片,請點按「新增圖片」並從本機電腦開啟圖片,然後使用核取方塊選取圖片。
  6. 按一下「完成」。

  7. 選用:為 favicon 圖片加上替代文字:

    1. 在「Favicon 圖片」區段中,點按「編輯」。
    2. 在「替代文字」欄位中,輸入圖片的簡要說明。
    3. 按一下「儲存」。
  8. 按一下「儲存」。

iPhone
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要新增 Favicon 的佈景主題,然後點選「自訂」。

  5. 依序點選「」和「佈景主題設定」。

  6. 視佈景主題版本而定,點一下「標誌」或「Favicon」。

  7. 在「Favicon 圖片」區段中,點選「選取圖片」,然後新增全新圖片或現有圖片:

    • 若要選取已上傳至 Shopify 管理介面的圖片,請搜尋或尋找該圖片,然後使用核取方塊選取圖片。
    • 若要從本機裝置選取圖片,請點選「新增圖片」並從本機裝置開啟圖片,然後使用核取方塊選取圖片。
  8. 點選「完成」。

  9. 為您的 favicon 圖片新增替代文字:

    1. 在「Favicon 圖片」區段中,點選「編輯」。
    2. 在「替代文字」欄位中,輸入圖片的簡要說明。
    3. 點選「」。
  10. 點選「」。

Android
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要新增 Favicon 的佈景主題,然後點選「自訂」。

  5. 依序點選「...」和「佈景主題設定」。

  6. 視佈景主題版本而定,點一下「標誌」或「Favicon」。

  7. 在「Favicon 圖片」區段中,點選「選取圖片」,然後新增全新圖片或現有圖片:

    • 若要選取已上傳至 Shopify 管理介面的圖片,請搜尋或尋找該圖片,然後使用核取方塊選取圖片。
    • 若要從本機裝置選取圖片,請點選「新增圖片」並從本機裝置開啟圖片,然後使用核取方塊選取圖片。
  8. 點選「完成」。

  9. 為您的 favicon 圖片新增替代文字:

    1. 在「Favicon 圖片」區段中,點選「編輯」。
    2. 在「替代文字」欄位中,輸入圖片的簡要說明。
    3. 點選「」。
  10. 點選「」。

色彩

您可以在佈景主題設定中定義不同的顏色配置,然後使用顏色配置選擇器將顏色配置套用到網路商店的不同區段。顏色配置指的是一組顏色。您的佈景主題已套用一組預設的顏色配置,可供您隨時在佈景主題編輯器中變更。您可新增品牌顏色,確保網路商店擁有一致的色調。

範本不具單獨的顏色設定,因此您的網路商店設計可以在整個網站保持一致。範本視為商店的主頁或主要內容。在整個商店中使用不同的顏色配置可能會造成使用者體驗不佳,並讓顧客在未購買任何商品的情況下即離開商店。

您可以建立和自訂多達 21 種不重複的顏色配置,並套用至網路商店的不同區段。

顏色配置

顏色配置是一種佈景主題設定,能以視覺呈現方式對元素及其個別顏色進行分組。您可使用擁有一致色調的顏色配置,將不同顏色指派給佈景主題的各種元素,並且可以使用顏色配置選擇器來進行。您最多可以設定 21 種顏色配置,還可預覽您的顏色在配置中呈現的樣子。

您可以在佈景主題編輯器中套用至顏色配置的不同設定清單。
設定說明
背景顏色會套用至部分區段的背景和外框按鈕背景。
背景 (漸層效果)漸層的顏色會套用至部分區段的背景。背景 (漸層效果) 將取代所有適用的背景。
文字顏色會套用至區段或區塊文字。
純色按鈕背景顏色會套用至主要按鈕背景。
純色按鈕標籤顏色會套用至主要按鈕文字。
外框按鈕顏色會套用至次要按鈕文字和邊框。
陰影顏色會套用至陰影。

管理顏色配置

您可以在佈景主題設定中設定商店的顏色配置和顏色選項。如需要使用純色,請使用顏色選擇器選擇新顏色,或在文字欄位中輸入顏色值。顏色欄位接受下列顏色名稱和值

  • 各個顏色名稱,例如 redblackblue
  • RGB 顏色代碼。
  • 十六進位顏色值。

步驟如下:

  1. 在 Shopify 管理介面中,前往「網路商店」>「佈景主題」。

  2. 在您要自訂的佈景主題旁邊點擊「自訂」。

  3. 點按設定圖示,然後點按「顏色」。

  4. 在「配置」區段中,點擊現有配置或「新增配置」以新增顏色配置。

  5. 點擊要變更之內容類型的顏色色樣。

  6. 若要設定顏色,請輸入十六進位顏色代碼或從顏色選擇器中挑選。若要將顏色設為透明,請在文字欄位中刪除十六進位代碼。

  7. 按一下「儲存」。

套用顏色配置

在佈景主題設定中定義顏色配置後,您可以使用顏色配置選擇器,在您佈景主題的區段和區塊中指派顏色配置。顏色配置選擇器僅適用於某些區段、區塊和一般佈景主題設定。

顏色配置選擇器

漸層

您可以在部分佈景主題中設定顏色漸層,讓視覺上獲得更加生動的背景選項。color_background 設定用於自訂 CSS 背景屬性。

漸層選擇器可供您選取漸層的顏色、漸層樣式、角度、位置和不透明度。在佈景主題編輯器中可即時預覽在漸層選擇器中選取的選項。您還可以使用 CSS 程式碼 (包含驗證檢查器) 來建立一個漸層背景。

設定漸層效果

  1. 在 Shopify 管理介面中,前往「網路商店」>「佈景主題」。

  2. 在您要自訂的佈景主題旁邊點擊「自訂」。

  3. 點按設定圖示,然後點按「顏色」。

  4. 在「配置」區段中,點擊您要編輯的現有配置。

  5. 點擊漸層顏色色樣選項,例如「背景 (漸層效果)」。

  6. 如果您先前從未設定任何漸層,則系統會顯示幾個預設選項供您選擇。請選取任何預設的漸層以開啟選項面板。

  7. 選取漸層選項:

    • 選擇線性或放射狀漸層。使用按鈕來選取您偏好的漸層樣式。
    • 使用上下箭頭來設定漸層的角度。點按向上或向下箭頭,角度會隨之增加或降低 5%。
    • 使用滑桿選取漸層位置,或在欄位中輸入數值。
    • 輸入特定的十六位進位顏色代碼,或使用顏色滑桿選擇色調。最近選取的顏色會顯示在漸層選項面板底部。
    • 若您希望漸層不透明,請使用右側滑桿選擇漸層的透明度。您也可以在十六進位顏色代碼旁的欄位中輸入百分比。
  8. 按一下「儲存」。

佈景主題編輯器中的漸層選擇器

使用 CSS 設定漸層

大部分的 CSS background 屬性值皆可用於設定背景顏色。您可以將此欄位用於純色 (例如 #000000blackrgb(0,0,0,0)rgba(0,0,0,0)hsl(0, 0%, 0%),以及 hsla(0, 0%, 0%, 1) 都會產生純黑色背景),或用於漸層效果 (例如 linear-gradient(red, green)radial-gradient(red, green)conic-gradient(red, green))。您也可以重複使用漸層效果。

步驟如下:

  1. 在 Shopify 管理介面中,前往「網路商店」>「佈景主題」。

  2. 在您要自訂的佈景主題旁邊點擊「自訂」。

  3. 點按設定圖示,然後點按「顏色」。

  4. 在「配置」區段中,點擊您要編輯的現有配置。

  5. 點擊要編輯的漸層。

  6. 點擊「漸層」旁的箭頭,然後選取「CSS」。

  7. 在「CSS 程式碼」欄位中,輸入或貼上漸層代碼。佈景主題編輯器預覽會在適當的位置顯示您的漸層。

  8. 按一下「儲存」。

佈景主題編輯器中的漸層效果 CSS 代碼欄位

移除漸層

  1. 在 Shopify 管理介面中,前往「網路商店」>「佈景主題」。

  2. 在您要自訂的佈景主題旁邊點擊「自訂」。

  3. 點按設定圖示,然後點按「顏色」。

  4. 在「配置」區段中,點擊您要編輯的現有配置。

  5. 點擊要移除的漸層。

  6. 點擊「移除漸層」。

  7. 按一下「儲存」。

字體

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

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

自訂字型類型

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

步驟如下:

電腦版
  1. 在 Shopify 管理介面中,前往「網路商店」>「佈景主題」。

  2. 尋找要編輯的佈景主題,然後點擊「自訂」。

  3. 點擊佈景主題設定 設定圖示。

  4. 按一下「字體」。

  5. 若要變更商店標題或內文的字型,請按一下「標題」或「內文」區段中的「變更」。

  6. 按一下要使用的字型名稱,然後點按「選取」。

  7. 按一下「儲存」。

iPhone
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要編輯的佈景主題,然後點選「自訂」。

  5. 依序點選「」和「佈景主題設定」。

  6. 點選「字體」。

  7. 若要變更商店標題或內文的字型類型,請點選「標題」或「內文」區段中的「變更」。

  8. 點選要使用的字型名稱,然後再點選「完成」。

  9. 點選「」。

Android
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要編輯的佈景主題,然後點選「自訂」。

  5. 依序點選「...」和「佈景主題設定」。

  6. 點選「字體」。

  7. 若要變更商店標題或內文的字型類型,請點選「標題」或「內文」區段中的「變更」。

  8. 點選要使用的字型名稱,然後再點選「完成」。

  9. 點選「」。

自訂字型大小

您可以透過「字體」佈景主題設定來設定標題和內文文字的預設字型大小。

字型最小為 100%,最大為 150%。每增加一格刻度即增加字型大小 5%。預設值為 100%。

步驟如下:

電腦版
  1. 在 Shopify 管理介面中,前往「網路商店」>「佈景主題」。

  2. 尋找要編輯的佈景主題,然後點擊「自訂」。

  3. 點擊佈景主題設定 設定圖示。

  4. 按一下「字體」。

  5. 若要變更「標題」文字的預設字型大小,請使用「字型大小縮放」範圍滑桿來選取預設字型大小。

  6. 若要變更「內文」文字的預設字型大小,請使用「字型大小縮放」範圍滑桿來選取預設字型大小。

  7. 按一下「儲存」。

iPhone
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要編輯的佈景主題,然後點選「自訂」。

  5. 依序點選「」和「佈景主題設定」。

  6. 點選「字體」。

  7. 若要變更「標題」文字的預設字型大小,請使用「字型大小縮放」範圍滑桿來選取預設字型大小。

  8. 若要變更「內文」文字的預設字型大小,請使用「字型大小縮放」範圍滑桿來選取預設字型大小。

  9. 點選「」。

Android
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要編輯的佈景主題,然後點選「自訂」。

  5. 依序點選「...」和「佈景主題設定」。

  6. 點選「字體」。

  7. 若要變更「標題」文字的預設字型大小,請使用「字型大小縮放」範圍滑桿來選取預設字型大小。

  8. 若要變更「內文」文字的預設字型大小,請使用「字型大小縮放」範圍滑桿來選取預設字型大小。

  9. 點選「」。

版面配置

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

步驟如下:

電腦版
  1. 在 Shopify 管理介面中,前往「網路商店」>「佈景主題」。

  2. 尋找要編輯的佈景主題,然後點擊「自訂」。

  3. 點擊佈景主題設定 設定圖示。

  4. 按一下「版面配置」。

  5. 使用「頁面寬度」範圍滑桿,選擇 1000 像素至 1600 像素之間的頁面寬度。預設設定為 1600 像素。

  6. 選用:使用範圍滑桿在頁面上的範本區段之間加入垂直空間。區段之間最多可加入 100 像素。

  7. 選用:如果您有「網格」版面配置,請使用「水平空間」和「垂直空間」範圍滑桿,在頁面上的網格內容之間加入空間。加入水平空間最多能在頁面上的內容橫列之間加入 40 像素的空間,而加入垂直空間最多能在頁面上的內容直欄之間加入 40 像素的空間。

  8. 按一下「儲存」。

iPhone
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要編輯的佈景主題,然後點選「自訂」。

  5. 依序點選「」和「佈景主題設定」。

  6. 點選「版面配置」。

  7. 使用「頁面寬度」範圍滑桿,選擇 1000 像素至 1600 像素之間的頁面寬度。預設設定為 1600 像素。

  8. 選用:使用範圍滑桿在頁面上的範本區段之間加入垂直空間。區段之間最多可加入 100 像素。

  9. 選用:如果您有「網格」版面配置,請使用「水平空間」和「垂直空間」範圍滑桿,在頁面上的網格內容之間加入空間。加入水平空間最多能在頁面上的內容橫列之間加入 40 像素的空間,而加入垂直空間最多能在頁面上的內容直欄之間加入 40 像素的空間。

  10. 點選「儲存」。

Android
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要編輯的佈景主題,然後點選「自訂」。

  5. 依序點選「...」和「佈景主題設定」。

  6. 點選「版面配置」。

  7. 使用「頁面寬度」範圍滑桿,選擇 1000 像素至 1600 像素之間的頁面寬度。預設設定為 1600 像素。

  8. 選用:使用範圍滑桿在頁面上的範本區段之間加入垂直空間。區段之間最多可加入 100 像素。

  9. 選用:如果您有「網格」版面配置,請使用「水平空間」和「垂直空間」範圍滑桿,在頁面上的網格內容之間加入空間。加入水平空間最多能在頁面上的內容橫列之間加入 40 像素的空間,而加入垂直空間最多能在頁面上的內容直欄之間加入 40 像素的空間。

  10. 點選「」。

動畫

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

步驟如下:

電腦版
  1. 在 Shopify 管理介面中,前往「網路商店」>「佈景主題」。

  2. 尋找要編輯的佈景主題,然後點擊「自訂」。

  3. 點擊佈景主題設定 設定圖示。

  4. 按一下「動畫」。

  5. 選用:若要啟用在捲動畫面時顯示網路商店區段的動畫,請選取「捲動時顯示區段」。

  6. 選用:若要為卡片和按鈕新增暫留效果動畫,請在「暫留效果」設定中選取下列其中一個選項:

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

iPhone
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要編輯的佈景主題,然後點選「自訂」。

  5. 依序點選「」和「佈景主題設定」。

  6. 點選「動畫」。

  7. 選用:若要啟用在捲動畫面時顯示網路商店區段的動畫,請選取「捲動時顯示區段」。

  8. 選用:若要為卡片和按鈕新增暫留效果動畫,請在「暫留效果」設定中選取下列其中一個選項:

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

Android
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要編輯的佈景主題,然後點選「自訂」。

  5. 依序點選「...」和「佈景主題設定」。

  6. 點選「動畫」。

  7. 選用:若要啟用在捲動畫面時顯示網路商店區段的動畫,請選取「捲動時顯示區段」。

  8. 選用:若要為卡片和按鈕新增暫留效果動畫,請在「暫留效果」設定中選取下列其中一個選項:

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

視覺元素自訂設定

您可以在佈景主題設定頁面調整佈景主題元素的外觀,例如按鈕、商品卡片和子類。每個選項都包含該元素的相關設定。

您可以調整佈景主題的中下列元素的設定:

  • 按鈕:按鈕包括在素材輪播或附文字圖像等區段的行動號召按鈕,以及在商品頁面和購物車頁面聯絡表單中的按鈕。

  • 子類圓角元素:子類圓角元素可讓您在產品頁面或精選商品區段顯示商品的子類。顧客無須變更產品頁面,即可選取所需的子類,並將商品加入購物車。您可以自訂子類圓角元素在網路商店中的顯示方式。

  • 輸入:「輸入」欄為需要顧客輸入的互動區域,例如數量選擇器、電子郵件訂閱表單或購物車備註。您可以調整網路商店「輸入」欄的外觀。

  • 透過商品卡、商品系列卡和網誌卡的設定,即可自訂每種類型的卡片在頁面區段中的顯示樣式。 - 商品卡片:商品卡片會在佈景主題列出多種商品的區域顯示商品相關資訊,如商品系列範本、商品系列區段和搜尋結果。 - 商品系列卡片:商品系列卡片會在佈景主題列出商品系列的區域中顯示商品系列相關資訊,如商品系列範本或區段。 - 網誌卡片:網誌卡片會在佈景主題區域中顯示網誌文章相關資訊,當中會列出多種商品,如網誌範本、網誌區段和搜尋結果。。

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

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

  • 下拉式選單與彈出式視窗:您可以調整網路商店的下拉式選單、彈出式互動視窗,以及購物車彈出式視窗的外觀。

  • 導覽匣:導覽匣是隱藏的互動式容器,會在使用者點選或點按時顯示,例如可收合的選單或商品系列篩選選項。您可以在網路商店上自訂導覽匣的邊框和陰影。

  • 徽章:商品降價或庫存數量為 0 時,系統會自動為產品圖片加入「特惠」與「售罄」徽章。您可以在佈景主題設定中個別調整「特惠」與「售罄」徽章的位置、形狀和顏色。頁面網誌徽章顯示在相關的搜尋結果中。您可以自訂這些徽章的位置和形狀,但不能變更頁面網誌徽章的顏色。

  • 品牌資訊:您可以在網路商店中加上品牌的相關資訊。完成以下步驟後,您可以在網路商店的頁尾中新增「品牌資訊」區塊。

步驟如下:

電腦版
  1. 在 Shopify 管理介面中,前往「網路商店」>「佈景主題」。

  2. 在您要編輯的佈景主題旁邊點擊「自訂」。

  3. 點按「設定」圖示。

  4. 點按一項元素以開啟設定。

  5. 調整任何可用設定。您可以透過在預覽視窗中前往佈景主題的不同區域來查看變更。

  6. 按一下「儲存」。

iPhone
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選要編輯的佈景主題旁邊的「自訂」。

  4. 點選「設定」圖示。

  5. 點選一項元素以開啟設定。

  6. 調整任何可用設定。您可以透過在預覽視窗中前往佈景主題的不同區域來查看變更。

  7. 點選「」。

Android
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選要編輯的佈景主題旁邊的「自訂」。

  4. 點選「設定」圖示。

  5. 點選一項元素以開啟設定。

  6. 調整任何可用設定。您可以透過在預覽視窗中前往佈景主題的不同區域來查看變更。

  7. 點選「」。

社群媒體

您可以新增指向網路商店頁尾所顯示的社群媒體帳號的連結。

步驟如下:

電腦版
  1. 在 Shopify 管理介面中,前往「網路商店」>「佈景主題」。

  2. 尋找要編輯的佈景主題,然後點擊「自訂」。

  3. 點擊佈景主題設定 設定圖示。

  4. 點擊「社交媒體」。

  5. 若要新增社群媒體帳號的連結,請在相關的「社群帳號」欄位中輸入您帳號的網站位址。請輸入完整連結,例如 https://instagram.com/shopifyhttps://tiktok.com/@shopify

  6. 按一下「儲存」。

iPhone
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要編輯的佈景主題,然後點選「自訂」。

  5. 依序點選「」和「佈景主題設定」。

  6. 點選「社群媒體」。

  7. 若要新增社群媒體帳號的連結,請在相關的「社群帳號」欄位中輸入您帳號的網站位址。請輸入完整連結,例如 https://instagram.com/shopifyhttps://tiktok.com/@shopify

  8. 點選「」。

Android
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要編輯的佈景主題,然後點選「自訂」。

  5. 依序點選「...」和「佈景主題設定」。

  6. 點選「社群媒體」。

  7. 若要新增社群媒體帳號的連結,請在相關的「社群帳號」欄位中輸入您帳號的網站位址。請輸入完整連結,例如 https://instagram.com/shopifyhttps://tiktok.com/@shopify

  8. 點選「」。

搜尋行為

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

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

您可以自訂向顧客顯示搜尋建議的方式。

步驟如下:

電腦版
  1. 在 Shopify 管理介面中,前往「網路商店」>「佈景主題」。

  2. 尋找要編輯的佈景主題,然後點擊「自訂」。

  3. 點擊佈景主題設定 設定圖示。

  4. 按一下「搜尋行為」。

  5. 若要啟用或停用搜尋建議,請選取或取消選取「啟用搜尋建議」。

  6. 選用:若要在搜尋建議中顯示或隱藏商品廠商,請選取或取消選取「顯示商品廠商」。

  7. 選用:若要在搜尋建議中顯示或隱藏商品價格,請選取或取消選取「顯示商品價格」。

  8. 按一下「儲存」。

iPhone
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要編輯的佈景主題,然後點選「自訂」。

  5. 依序點選「」和「佈景主題設定」。

  6. 點選「搜尋行為」。

  7. 若要啟用或停用搜尋建議,請選取或取消選取「啟用搜尋建議」。

  8. 選用:若要在搜尋建議中顯示或隱藏商品廠商,請選取或取消選取「顯示商品廠商」。

  9. 選用:若要在搜尋建議中顯示或隱藏商品價格,請選取或取消選取「顯示商品價格」。

  10. 點選「」。

Android
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要編輯的佈景主題,然後點選「自訂」。

  5. 依序點選「...」和「佈景主題設定」。

  6. 點選「搜尋行為」。

  7. 若要啟用或停用搜尋建議,請選取或取消選取「啟用搜尋建議」。

  8. 選用:若要在搜尋建議中顯示或隱藏商品廠商,請選取或取消選取「顯示商品廠商」。

  9. 選用:若要在搜尋建議中顯示或隱藏商品價格,請選取或取消選取「顯示商品價格」。

  10. 點選「」。

幣別格式

您可以選擇將幣別代碼與商品價格一起顯示。

步驟如下:

電腦版
  1. 在 Shopify 管理介面中,前往「網路商店」>「佈景主題」。

  2. 尋找要編輯的佈景主題,然後點擊「自訂」。

  3. 點擊佈景主題設定 設定圖示。

  4. 點擊「幣別格式」。

  5. 若要顯示幣別代碼,請選取「顯示幣別代碼」。

  6. 按一下「儲存」。

iPhone
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要編輯的佈景主題,然後點選「自訂」。

  5. 依序點選「」和「佈景主題設定」。

  6. 點選「幣別格式」。

  7. 若要顯示幣別代碼,請選取「顯示幣別代碼」。

  8. 點選「」。

Android
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要編輯的佈景主題,然後點選「自訂」。

  5. 依序點選「...」和「佈景主題設定」。

  6. 點選「幣別格式」。

  7. 若要顯示幣別代碼,請選取「顯示幣別代碼」。

  8. 點選「」。

購物車

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

步驟如下:

電腦版
  1. 在 Shopify 管理介面中,前往「網路商店」>「佈景主題」。

  2. 尋找要編輯的佈景主題,然後點擊「自訂」。

  3. 點擊佈景主題設定 設定圖示。

  4. 按一下「購物車」。

  5. 使用「購物車類型」下拉式選單選取一種購物車樣式:「導覽匣」、「頁面」或「彈出式視窗通知」。

  6. 選用:若要顯示顧客購物車內品項的廠商,請選取「顯示廠商」。

  7. 選用:若要提供能讓顧客輸入特殊要求或新增其他訂單資訊的文字方塊,請選取「啟用購物車備註」。

  8. 選用:如果您選取「導覽匣」作為「購物車類型」,則可以在購物車導覽匣清空時,在其中顯示商品系列:

    1. 在「購物車導覽匣」區域中,按一下「選取商品系列」。
    2. 按一下要顯示的商品系列名稱,然後再點按「選取」。
  9. 選用:如果您選取「導覽匣」作為「購物車類型」,則可以透過執行以下步驟來變更購物車導覽匣的顏色配置:

    1. 在「購物車導覽匣」>「顏色配置」區域中,按一下「變更」。
    2. 選取要用於購物車導覽匣的顏色配置。
  10. 按一下「儲存」。

iPhone
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要編輯的佈景主題,然後點選「自訂」。

  5. 依序點選「」和「佈景主題設定」。

  6. 點選「購物車」。

  7. 選取以下其中一選項作為「購物車類型」:「導覽匣」、「頁面」或「彈出式視窗通知」。

  8. 選用:若要顯示顧客購物車內品項的廠商,請選取「顯示廠商」。

  9. 選用:若要提供能讓顧客輸入特殊要求或新增其他訂單資訊的文字方塊,請選取「啟用購物車備註」。

  10. 選用:如果您選取「導覽匣」作為「購物車類型」,則可以在購物車導覽匣清空時,在其中顯示商品系列:

    1. 在「購物車導覽匣」區域中,點選「選取商品系列」。
    2. 點選要顯示的商品系列名稱,然後再點選「完成」。
  11. 選用:如果您選取「導覽匣」作為「購物車類型」,則可以透過執行以下步驟來變更購物車導覽匣的顏色配置:

    1. 在「購物車導覽匣」>「顏色配置」區域中,點選「變更」。
    2. 選取要用於購物車導覽匣的顏色配置,然後點選「完成」。
  12. 點選「」。

Android
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要編輯的佈景主題,然後點選「自訂」。

  5. 依序點選「...」和「佈景主題設定」。

  6. 點選「購物車」。

  7. 選取以下其中一選項作為「購物車類型」:「導覽匣」、「頁面」或「彈出式視窗通知」。

  8. 選用:若要顯示顧客購物車內品項的廠商,請選取「顯示廠商」。

  9. 選用:若要提供能讓顧客輸入特殊要求或新增其他訂單資訊的文字方塊,請選取「啟用購物車備註」。

  10. 選用:如果您選取「導覽匣」作為「購物車類型」,則可以在購物車導覽匣清空時,在其中顯示商品系列:

    1. 在「購物車導覽匣」區域中,點選「選取商品系列」。
    2. 點選要顯示的商品系列名稱,然後再點選「完成」。
  11. 選用:如果您選取「導覽匣」作為「購物車類型」,則可以透過執行以下步驟來變更購物車導覽匣的顏色配置:

    1. 在「購物車導覽匣」>「顏色配置」區域中,點選「變更」。
    2. 選取要用於購物車導覽匣的顏色配置,然後點選「完成」。
  12. 點選「」。

自訂 CSS

自訂 CSS」區段可讓您輸入自己的 CSS 程式碼,例如,除了可用的預設設定之外,您可以自訂網路商店按鈕的外觀,或將獨特樣式套用至特定文字元素。

佈景主題設定中的自訂 CSS 會影響網路商店中的所有頁面 (結帳頁面除外)。

深入瞭解如何將自訂 CSS 加入您的佈景主題

佈景主題樣式

佈景主題樣式是由佈景主題設計師選擇的一系列設定。您可以將佈景主題樣式套用至您的商店,為商店打造設計精美的外觀和風格。所有的佈景主題都具有預設套用的佈景主題樣式。您擁有的其他佈景主題樣式選項取決於您所使用的佈景主題。

自訂佈景主題時,可以使用自己的佈景主題樣式設定取代佈景主題樣式設定。如果將佈景主題樣式套用於佈景主題,您目前的設定 (如顏色和字體) 將會隨之變更。

步驟如下:

電腦版
  1. 在 Shopify 管理介面中,前往「網路商店」>「佈景主題」。

  2. 尋找要編輯的佈景主題,然後點擊「自訂」。

  3. 點擊佈景主題設定 設定圖示。

  4. 點擊「佈景主題樣式」。

  5. 選取要使用的佈景主題樣式,然後按一下「變更樣式」。

  6. 按一下「儲存」。

iPhone
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要編輯的佈景主題,然後點選「自訂」。

  5. 依序點選「」和「佈景主題設定」。

  6. 點選「佈景主題樣式」。

  7. 選取要使用的佈景主題樣式,然後點選「完成」。

  8. 點選「」。

Android
  1. Shopify 應用程式中,點選「選單」圖示。

  2. 在「銷售管道」區段中,點選「網路商店」。

  3. 點選「管理所有佈景主題」。

  4. 尋找要編輯的佈景主題,然後點選「自訂」。

  5. 依序點選「...」和「佈景主題設定」。

  6. 點選「佈景主題樣式」。

  7. 選取要使用的佈景主題樣式,然後點選「完成」。

  8. 點選「」。

沒有找到您需要的答案嗎?我們很樂意為您提供協助。