廣告
如果您已經擁有 Shopify 商店，Shopify Liquid 將可供您免費使用。我們將在下面討論如何找到液體。但現在您需要知道的是，在 Shopify 上建立的每個網站都是使用 Liquid 建立的，因此您在建立網站後就可以開始手動編輯此程式碼。
但是，如果您沒有 Shopify 商店，則需要建立商店才能開始使用 Liquid。
首先，前往 Shopify 並選擇一個計劃。填寫您的詳細資料並建立您的帳戶。
在您的 Shopify 後台中，點擊主題。 Shopify 會自動提供預設主題。您可以保持原樣或選擇另一個主題開始。
Shopify 有一個清單，您可以透過檢查清單來完成您的商店。您需要完成所有基礎操作，例如新增產品頁面、設計店面等。
現在您已經有了線上商店的基本框架，您可以從 Shopify 伺服器中提取這些資料並使用 Liquid 對其進行自訂（更多內容請參閱下文）。
雖然您不需要任何編碼經驗即可開始使用 Liquid，但熟悉基本編碼原則將使您的旅程更加輕鬆。但在大多數情況下，您可以在 Shopify 開發人員入口網站上找到大量的自助文件和教學課程。在這裡您將找到專門介紹液體基礎知識的整個部分 。
建議您在開始之前花一些時間瀏覽這些指南。雖然 Liquid 是一個強大的客製化工具，但如果您不知道自己在做什麼，它也有可能破壞您的網站！
轉到頂部
Shopify Liquid 入門
因此，利用我們迄今為止所學到的知識，讓我們看看如何使用 Liquid 編輯Shopify主題。
要存取 Liquid請按照下列步驟操作：
複製您的主題： 為了防止任何重大事故，明智的做法是在開始之前複製您的主題。這樣，如果您犯了任何錯誤，您原來的 Shopify 主題仍保持不變。為此，請導航至 Shopify 儀表板右側的主題部分。選擇您要編輯的主題，然後按一下操作以查看下拉式功能表。現在，選擇重複。
重新命名您的副本： 當您複製主題時，您會看到它出現在主題清單中。您可以重新命名副本，這樣就不會混淆原始副本和副本。只需再次單擊操作按鈕，然後點擊下拉式選單上的重命名即可。
進入程式碼編輯器： 現在，再次選擇副本上的操作，然後選擇編輯程式碼。您將被引導至主題內的完整代碼清單。查看右側列出的資料夾。您應該會看到一堆包含主題不同方面的資料夾，例如佈局、模板、部分等。
使用 Liquid 進行編碼： 在範本資料夾中，您將看到文件類型為 .liquid 的文件清單。您也可以透過選擇範本資料夾上的加號按鈕來建立新的 Liquid 檔案範本。它會詢問您要製作什麼模板，即頁面、部分、部落格等，並命名文件。要編輯文件，請雙擊模板文件，它將在右側的程式碼編輯器中開啟。
在任何 Liquid 檔案中，您都會看到一個 HTML 腳本。這是您網站的骨架。您可以使用此 HTML 中的 Liquid 語言從 Shopify 伺服器擷取資訊。只要您使用正確的 Liquid 語法（即括號），它就應該相應地呈現您的內容。
為了說明這一點，讓我們來看一個簡單的例子：
轉到頂部
使用 Shopify Liquid 調整圖片大小
圖片是大多數 Shopify 商店的重要組成部分。但如果您使用多個圖像，那麼正確調整它們的大小以使其顯示整齊可能是一場噩夢。為了解決這個問題，我們正在研究 img_url 過濾器。與其他過濾器一樣，img_url 旨在修改從 Shopify 伺服器取得的內容。您可以使用此濾鏡變更影像的大小、比例、格式和裁剪。
這是一項出色的技術，因為濾鏡僅 服務不可用 臨時修改現有影像；它不會每次都創建新圖像來渲染您的模板，因此不會減慢網站的載入時間。
那麼我們要如何調整影像的大小呢？
首先，我們需要決定要在哪裡套用變更。您可以將 img_url 過濾器 應用於具有圖像屬性的任何對象，包括：
產品
產品型號
行項目
收藏
文章
一旦決定要編輯哪些圖像，您需 类型、示例和技巧：平面设计中有关网格的所有信息 要知道要定位哪個屬性。若要了解哪些屬性具有圖像屬性，請查看 Shopify 的物件 及其屬性清單。
在此範例中，我們將定位部落格文章圖像。
這是基本程式碼：
{{ 部落格.文章.圖 | img_url: ‘100×100’ }}
分解：
Blog 是我們正在尋找的對象，我們需要 items 屬性 ，因為它包含我們部落格中的所有文章。具體來說，我們想要更改部落格文章中的圖像，因此我們的目標是 文章中的圖像 屬性。
現在我們套用過濾器 img_url。 如果我們保持原樣，它只會顯示從 Shopify 伺服器提供的 URL 中提取的圖像。但是，我們還將提供一個額外的參數：圖片尺寸 「100×100」（請注意，Shopify 使用像素來確定尺寸範圍）。
最後，我們使用 Liquid 雙括號語法包 艾鉛 裝程式碼，該語法用於過濾器。
我們就完成了！這應該會傳回我們所有部落格圖像的輸出，使它們的大小為 100 x 100 像素。