「Shopify模板」如何自定義模板?Shopify自定義模板指南詳解

設計 HTML 跳槽那些事兒 CSS 動畫 雨果網 2019-06-14
「Shopify模板」如何自定義模板?Shopify自定義模板指南詳解

Shopify自定義模版

選擇定義您Shopify在線商店基本外觀的模版後,您可以對模版進行自定義以適應您獨特的品牌需求。您可以使用模版編輯器從Shopify後臺自定義您的模版設置。模版編輯器包括模版預覽以及可用於添加和刪除內容並且對設置進行更改的工具欄。若要了解您的模版可用的設置,請參閱您模版的文檔。

如果模版中不包含用於您想進行的更改的設置,並且您很熟悉 HTML、CSS 和 Liquid,則可以編輯模版代碼。

Shopify自定義模版總共分為9部分內容

1. 模板文檔

2. 編輯模版設置

3. 編輯模版代碼

4. 更改措辭

5. 添加免費的圖庫照片

6. 上傳圖片

7. 模版的可訪問性

8. 商店中的轉換貨幣

9. 問題排查

一、Shopify模板文檔

您可以使用模版的文檔來查看模版中包含哪些分區和設置,以及查看如何使用模版功能的指南。您可以在Shopify模版商店中找到每個模版的文檔。

在模板文檔中分為2大塊:Shopify中的免費模版和付費模版

1.Shopify中的免費模版

注:此部分介紹由Shopify製作的模版,這些模版提供在Shopify模版商店中。Shopify製作的所有模版均免費。

Boundless

「Shopify模板」如何自定義模板?Shopify自定義模板指南詳解

Boundless 非常適合展示攝影作品,其 UI 極小,可顯示無邊框的攝影作品。Boundless 可在移動設備上呈現最佳效果,適用於中型到大型庫存的商店。

Minimal

「Shopify模板」如何自定義模板?Shopify自定義模板指南詳解

Minimal 是一個響應迅速的寬佈局,在任何設備上都可呈現極佳效果。它加載了經過精心設計的功能,可提供全面的靈活性,您可以使用附加布局選項、產品視圖、產品系列視圖、網站地圖樣式和版式選擇來自定義您的商店。

Jumpstart

「Shopify模板」如何自定義模板?Shopify自定義模板指南詳解

Jumpstart 專為眾籌的畢業生而設計,但它也非常適合銷售一至十種產品。它的主頁展示了一個視頻和一個功能分區。

Supply

「Shopify模板」如何自定義模板?Shopify自定義模板指南詳解

Supply 是一款簡潔、易於網站地圖的模版,非常適合擁有大量庫存和多個產品系列的商家。它的特色包括包括傑出的網站地圖、多個主頁產品系列、側邊欄篩選,並可輕鬆與 Product Reviews 應用集成。

Pop

「Shopify模板」如何自定義模板?Shopify自定義模板指南詳解

極簡風格的模版,旨在使您的內容易於訪問。Pop 是中小型庫存的商店適用的理想模版,Pop 採用大型側邊欄網站地圖的設計,使您的內容易於訪問。

默認模版

「Shopify模板」如何自定義模板?Shopify自定義模板指南詳解

默認模版十分靈活,適用於所有的商店,無論庫存大小。通過默認模版,您可以快速開設商店並開始進行銷售;默認模版外觀精美,沒有任何模版自定義項。

Simple

「Shopify模板」如何自定義模板?Shopify自定義模板指南詳解

Simple 是一款清爽、簡約的模版,非常適合展示產品。它的特色包括最適用於移動設備的響應式設計、側邊欄網站地圖、圖片動畫和產品圖片縮放。

Venture

「Shopify模板」如何自定義模板?Shopify自定義模板指南詳解

Venture 是一個大膽而簡約的模版,專為擁有大量庫存的大流量商店而設計。它的特色包括採用無邊框設計的幻燈片、多列下拉菜單和促銷欄。

Brooklyn

「Shopify模板」如何自定義模板?Shopify自定義模板指南詳解

Brooklyn 是為現代服裝店量身打造的模版。它的特色包括採用無邊框設計的主頁幻燈片、動態產品網格以及各種尺寸的供貨情況都一目瞭然的產品頁面。

Narrative

「Shopify模板」如何自定義模板?Shopify自定義模板指南詳解

Narrative 是專為視覺敘事而設計的精品模版。Narrative 的獨特之處在於它注重用圖片來講述故事。默認情況下,主頁具有全寬幻燈片、帶文本的圖片和視頻。這種佈局具有強烈的視覺衝擊力,您無需使用大量文字就能講述您的品牌故事。

2.Shopify付費模版

您可以從Shopify模版商店查看付費模版的文檔。

步驟:

1.在Shopify後臺中,轉到在線商店 > 模版。

2.找到您要編輯的模版,然後點擊自定義。

3.單擊模版設置。

在工具欄的底部,單擊閱讀文檔:

「Shopify模板」如何自定義模板?Shopify自定義模板指南詳解

第二部分編輯Shopify模板設置和第三部分的編輯Shopify模板代碼(點擊查閱),之前文章有詳細介紹過,在這就不過多贅述

四、更改Shopify模板中的措辭

通過更改模版中的默認文本,您可以對Shopify商店進行自定義。例如,您可以將“購物車”更改為“購物袋”,或者將“售罄”改為“無貨”。每個模版都包括一個語言編輯器,您可以在其中編輯模版的文本。

1.語言編輯器概述

通過使用語言編輯器,您可以更改顯示在您Shopify商店中的字詞和句子。如果您的模版包含其他語言,你還可以更改這些語言的文本。

語言編輯器在屏幕頂部有一系列選項卡。您可能需要單擊右側的 ... 以查看所有選項卡:

「Shopify模板」如何自定義模板?Shopify自定義模板指南詳解

語言編輯器具有以下類別的選項卡:

「Shopify模板」如何自定義模板?Shopify自定義模板指南詳解

2.更改Shopify模版中的默認措辭

您可以更改Shopify模版中的默認措辭。具體操作步驟:

(1)在Shopify後臺中,轉到在線商店 > 模版。

(2)找到要編輯的模版,然後單擊操作 > 編輯語言。

(3)單擊包含要更改的文本的選項卡。

(4)編輯文本。

(5)單擊保存。

五、向Shopify模版添加免費的圖庫照片

Burst 是一個由 Shopify 提供支持的圖庫平臺,提供免費的高分辨率圖片。在Shopify模版編輯器中,您可以瀏覽 Burst 中的數千張照片並將其添加到您的在線商店。您可以從數十個類別中進行選擇,找到適合您業務的圖片。將高質量照片添加到在線商店的不同部分,例如主頁幻燈片、博客或產品頁面。

Burst 上的圖片採用免版稅許可提供,因此您可以按照您喜歡的任何方式使用和編輯照片。鼓勵使用屬性,但這並非強制要求。

向模版中添加圖庫照片具體操作如下:

1.轉到模版編輯器。

2.在模版編輯器工具欄中,單擊要向其添加圖片的分區。選擇包含圖片選擇器的分區:

「Shopify模板」如何自定義模板?Shopify自定義模板指南詳解

3.單擊瀏覽免費圖片。

4.使用搜索欄或單擊圖片類別瀏覽圖片:

「Shopify模板」如何自定義模板?Shopify自定義模板指南詳解

5.單擊圖片以在您的模版中查看圖片預覽。找到您要使用的圖片後,單擊選擇。

6.單擊保存

六、在Shopify店鋪上上傳您喜歡的圖片

您可以在您的在線商店中使用許多不同類型的圖片,包括您的公司logo、產品圖片、幻燈片、橫幅和博客文章圖片。根據您想使用圖片的方式和位置,最好以特定大小或格式上傳這些圖片。

七、Shopify模版的可訪問性

自定義Shopify模版時,最好選擇有助於保持在線商店可訪問性的設計和內容。設計易於訪問的網站,以便每個人都可以使用該網站,包括殘疾人。您的在線商店的可訪問性對於為您的客戶提供包容性體驗至關重要。

八、商店中的貨幣轉換

您可以在Shopify模版中使用多種貨幣腳本,從而以客戶熟悉的貨幣顯示價格。

九、問題排查

如果您在使用Shopify模版編輯器時遇到了問題,需對Shopify進行排查

相關推薦

推薦中...