Simple

Simple 是一款清晰而簡約的佈景主題,非常適合展示產品。其功能包括以行動裝置為主的回應式設計、側邊欄導覽、圖片動畫和產品圖片縮放。

使用 Simple 的線上商店範例

Simple 適用於有以下需求的客戶:

  • 側邊欄導覽
  • 大型選單
  • 超過 50 種產品

佈景主題編輯器

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

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

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

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

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

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

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

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

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

Simple 包括以下的靜態區段:

  • 標頭
  • 側邊欄選單
  • 頁尾
  • 產品頁面
  • 商品系列頁面
  • 商品系列清單頁面
  • 文章頁面

動態區段

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

Simple 包括以下的動態區段:

  • 部落格文章
  • 商品系列清單
  • 精選商品系列
  • 精選產品橫幅
  • 附文字的圖片
  • 投影片輪播
  • 精選產品
  • 電子報
  • 地圖
  • RTF 文字
  • 影片
  • 自訂 HTML

標頭

您可以將貴公司的標誌新增至商店的標頭中。您可以使用 Simple 自訂標誌圖片。最佳格式為包含透明底色的 .png 檔。標誌圖片應為 450 x 200 像素。您可以透過縮減寬度來調整商標圖片的大小。

如要上傳自訂標誌:

  1. 在「Simple」區段中,按一下「自訂」。

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

  3. 按一下「標頭」

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

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

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

  2. 在「標語」區域中,新增要顯示在標頭右上角的文字。

  3. 按一下「儲存」

側邊欄選單

Simple 的特色在於包含導覽選單的側邊欄:

  1. 在「Simple」區段中,按一下「自訂」。

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

  3. 按一下「側邊欄」。

  4. 從「選單」清單中,選擇側邊欄選單的選單。

  5. 按一下「儲存」

頁尾

Simple 的特色在於頁尾,您可以在其中顯示導覽選單、文字區域和訂閱電子報。Simple 預設會包含一個首頁區段:

  • 連結」會提供來自導覽選單的連結。

連結

您可以使用 Simple 在首頁的頁尾顯示連結。

  1. 在「Simple」區段中,按一下「自訂」。

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

  3. 按一下「頁尾」。

  4. 按一下「連結」。

  5. 在「標題」欄位中,輸入要顯示在頁尾連結上方的文字。

  6. 在「選單」清單中,選擇頁尾連結的選單。

  7. 按一下「儲存」

電子報

您可以使用 Simple 在首頁顯示電子報訂閱表單。此區段類型不包括任何選項 - 如果要顯示電子報表單,請保留此區段。如果您不想顯示電子報表單,可以從首頁中刪除此區段

當有人訂閱電子報時,會以客戶的身分加入您的商店。「電子報」區段包含指向管理員中「客戶」頁面的連結。您可以按一下此連結以查看最新的客戶清單。

  1. 在「Simple」區段中,按一下「自訂」。

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

  3. 按一下「頁尾」。

  4. 按一下「新增內容」,然後按一下「訂閱電子報」。

  5. 按一下「儲存」

文字

使用「文字」區段提供您要在頁尾顯示的任何文字內容,或嵌入在 Shopify 管理員介面中建立的任何頁面。例如,您可以透過嵌入部落格頁面來展示即將舉辦的活動,或顯示包含以下內容的頁面:

  1. 在「Simple」區段中,按一下「自訂」。

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

  3. 按一下「頁尾」。

  4. 按一下「新增內容」,然後按一下「文字」。

  5. 在「標題」欄位中,輸入要顯示在 RTF 文字上方的文字。

  6. 如要新增文字,請在「文字」欄位中輸入文字。按一下粗體或斜體圖示以格式化所選文字。

  7. 按一下「儲存」

產品頁面

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

  • 數量選擇器
  • 產品品牌或供應商
  • 社交分享圖示
  • 產品說明中的標籤
  • 圖片縮放
  • 動態結帳按鈕
  • 商品推薦

您也可以設定產品說明的位置。

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

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

  2. 按一下「區段」

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

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

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

  6. 如要顯示社交分享圖示,請勾選「啟用產品分享」。

  7. 如要設定產品說明的位置,請從「位置」下拉式選單中選擇「圖片右側」或「圖片下方」。

  8. 如要在產品說明中使用標籤,請執行以下任務:

    1. 勾選「顯示在產品說明旁的索引標籤」。如此一來就會在索引標籤上顯示您的產品說明,並在第二個索引標籤上顯示其他內容 (例如尺寸表或退貨政策)。
    2. 在「索引標籤內容」區域中,按一下「選擇頁面」,然後選擇包含要在第二個索引標籤上顯示內容的頁面。
  9. 如要選擇精選圖片的圖片縮放類型,請從「縮放類型」下拉式選單中選擇「燈箱」、「放大」或「無縮放」。

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

  11. 按一下「儲存」

新增或移除產品推薦

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

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

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

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

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

  5. 選用:若要在產品推薦中顯示產品廠商,可選取「顯示產品廠商」。

  6. 按一下「儲存」

商品系列頁面

您可以設定商品系列頁面,讓客戶對商品系列中的產品進行篩選和排序。

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

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

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

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

  4. 如要顯示產品供應商,請勾選「顯示產品供應商」。

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

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

  7. 按一下「儲存」

精選商品系列

您可以使用 Simple 在首頁展示來自其中一個商品系列的產品。您可以選擇要在首頁顯示精選商品系列的標題和列數。

  1. 在「Simple」區域中,按一下「自訂」。

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

  3. 在「標題」欄位中,輸入要顯示在商品系列上方的文字。

  4. 從「商品系列」清單中選擇商品系列。從您選擇的商品系列中,最多會顯示 50 項產品。

  5. 從「列數」清單中選擇要顯示的列數。

  6. 按一下「儲存」

精選產品橫幅

您可以使用 Simple,將精選產品橫幅圖片加入首頁。您也可以加入標題和圖片連結:

如要在首頁加入精選產品橫幅區段:

  1. 在「Simple」區段中,按一下「自訂」。

  2. 按一下「區段」

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

  4. 按一下「精選產品橫幅」,然後按一下「新增」。

  5. 在「標題」欄位中,輸入此區段的新標題。

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

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

  1. 在「圖片連結」欄位中,選擇您希望圖片連結的商店頁面。

  2. 按一下「儲存」

附文字的圖片

您可以使用 Simple 新增附文字的圖片以顯示在圖片的左右側。您也可以新增連結至商店頁面的按鈕:

通常,您可以使用「附文字的圖片」區段來宣傳產品或商品系列,或將網站流量帶到您的部落格頁面。

若要為首頁新增帶有文字區段的圖片:

  1. 在「Simple」區段中,按一下「自訂」。

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

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

  4. 按一下「附文字的圖片」,然後按一下「新增」。

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

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

  1. 從「版面配置」清單中,選擇是否要將圖片顯示在文字的右側或左側。

  2. 「標題」欄中輸入此區段的新標題。

  3. 「文字」欄中輸入要在標頭下方顯示的文字。

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

  5. 「按鈕連結」欄中,選擇您希望按鈕連結到的商店頁面。

  6. 按一下「儲存」

投影片輪播

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

Simple 佈景主題中的投影片輪播區段

投影片輪播圖片的建議大小為 1280 x 460 像素。

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

  • 投影片高度 - 設定投影片高度。選擇「配合第一張圖片投影片高度」,以第一張圖片的高度做為投影片高度的基礎。
  • 自動輪播投影片 - 設定自動開始投影片輪播。
  • 變更投影片的頻率 - 選擇變更投影片的頻率。
  • 轉場效果 - 選擇要讓圖片滑動或淡化。
  • 文字大小 - 設定您投影片的文字大小。
  • 圖片 - 將圖片投影片新增至投影片輪播。
  • 圖片位置 - 選擇圖片中最重要的區域,當作投影片的焦點。
  • 疊加不透明度 - 設定圖片疊加的陰影。疊加陰影可以加深您的圖片外觀,讓投影片文字易於閱讀。
  • 文字顏色 - 設定投影片的文字顏色。
  • 文字對齊 - 對齊投影片的文字。
  • 標題 - 新增標題到投影片。
  • 按鈕標籤 - 將含有文字標籤的按鈕新增到投影片。
  • 按鈕連結 - 將您的按鈕連結至線上商店的其他部分。

將投影片新增至您的首頁:

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

  2. 按一下「幻燈片」

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

  4. 按一下「儲存」

電子報

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

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

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

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

  2. 按一下「區段」

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

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

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

  6. 按一下「儲存」

RTF 文字

使用「RTF 文字」區段提供您要在首頁上顯示的任何文字內容,或嵌入在 Shopify 管理員中建立的任何頁面。例如,您可以透過嵌入部落格頁面來展示即將舉辦的活動,或顯示包含以下內容的頁面:

  1. 在「Simple」區段中,按一下「自訂」。

  2. 按一下「區段」

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

  4. 按一下「RTF 文字」,然後按一下「新增」。

  5. 如要新增文字,請按一下「RTF 文字」,然後在「文字」欄位中輸入文字。按一下粗體或斜體圖示以調整所選文字格式。

  6. 如果要展示商店中的精選頁面,請按一下「新增內容」,然後按一下「頁面」。從下拉式選單中選擇要展示作為首頁的頁面。

  7. 在「標題」欄位中,輸入要顯示在 RTF 文字上方的文字。

  8. 按一下「儲存」

影片

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

如要為首頁新增影片:

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

  2. 按一下「區段」

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

  4. 在「標題」欄位中,輸入影片的標題。

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

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

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

  6. 按一下「儲存」

自訂 HTML

您可以在「自訂 HTML」區段內用 HTML 程式碼為首頁建立自訂內容。舉例來說,您可以透過 HTML 設定文字方塊的格式、建立表格,或內嵌來自第三方網站的內容。

若要為首頁新增自訂 HTML:

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

  2. 按一下「區段」。

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

  4. 「進階版面配置」區域中,按一下「自訂 HTML > 新增」

  5. 按一下「自訂 HTML」,然後輸入要新增到首頁的 HTML 程式碼。

  6. 按一下「儲存」。

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

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

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

顏色

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

調整顏色設定

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

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

  3. 按一下「顏色」。

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

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

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

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

  1. 按一下「儲存」。

印刷樣式

您可以使用 Simple 變更商店中文字的字體和字體大小。

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

自訂您的字體設定

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

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

  3. 按一下「字體」。

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

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

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

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

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

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

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

  8. 按一下「儲存」。

社交媒體

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

如要自訂社交媒體設定:

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

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

  3. 按一下「社交媒體」。

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

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

  6. 如要為部落格新增豐富網站摘要 (或稱 RSS),請在「社交帳戶」區域中按一下「選擇部落格」

    指向您社交媒體帳號的連結和部落格 RSS 會顯示在您線上商店的側邊欄。

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

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

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

  1. 按一下「儲存」

分享選項

您也可以讓您的客戶將線上商店的內容分享到他們的社群媒體帳號。在「分享選項」區段中,勾選核取方塊以選擇您要允許的每種社群媒體分享類型:

  • 勾選「在 Facebook 上分享」以啟用產品或部落格貼文的 Facebook 分享按鈕。

  • 勾選「在 Twitter 上發佈推文」,以啟用產品或部落格貼文的 Twitter 分享按鈕。

  • 勾選「在 Pinterest 上收藏為釘圖」,以啟用產品或部落格貼文的 Pinterest 分享按鈕。

Favicon

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

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

如要上傳 Favicon:

  1. 在「Simple」區段中,按一下「自訂」。

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

  3. 按一下「Favicon」。

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

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

秘訣:Simple 的建議大小為 32 x 32 像素。較大的圖片會縮小為 32 x 32 像素。

  1. 按一下「儲存」

導覽秘訣

新增下拉式選單

如要在主選單中加入下拉式選單,您需要在導覽頁面上建立選單。我們會在本文向您說明如何操作。

圖片秘訣

Simple 的最佳產品圖片類型

較高解析度的照片在 Simple 佈景主題中會看起來更加精緻而專業,因此建議您提供至少 1024 x 1024 像素的圖片。您的圖片可以大到 2048 x 2048 像素。必要時會自動縮減圖片,因此最好挑選品質較佳的圖片。

產品照片的最佳寬高比為正方形。

理想情況下,您的照片沿著邊緣會有原色的背景。單色為沒有陰影或加亮的純色。所有的照片應該沿著邊緣都使用相同的單色。

為部落格貼文設定圖片

您部落格文章中的第一張圖片會被選為部落格登陸頁面的精選圖片。按一下這裡以深入瞭解如何將圖片加入部落格文章。

變更頁面底部的信用卡圖示

我們會在本文向您說明如何新增信用卡,以及如何移除部分或全部信用卡。

在部落格貼文中顯示影片的縮圖

如果您的部落格文章中有影片,請將該影片的縮圖新增至文章的摘要中,縮圖將會顯示在部落格登陸頁面上。

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

免費試用