Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

讓我們設計一個Shopify主題

by
Difficulty:IntermediateLength:LongLanguages:

Chinese (Traditional) (中文(繁體)) translation by Fuhuan (you can also view the original English article)

Themeforest最近打開了一個新的部分,您可以購買或銷售Shopify的主題!Shopify是一款託管式電子商務解決方案,可輕鬆開始在線業務。你可以在幾分鐘內快速開張。

要啟動ThemeForest的Shopify目錄,每個已接受模板的作者將獲得100美元的獎金 - 直到該類別中有10個模板。

Shopify以其靈活的設計而聞名。看一些例子.Shopify創建(並且隨後以開源形式發布)Liquid Templating Engine.Liquid為設計師提供了完全自由的設計。

在本教程中,我將介紹如何使用液體設計Shopify主題。一旦你有了基礎知識,你就可以設計一個主題,並將其提交給Themeforest。

什麼是.liquid?

.liquid是為Shopify開發和使用的模板引擎。它處理具有“.liquid”擴展名的液體模板文件。  Liquid文件只是帶有嵌入代碼的HTML文件。由於Liquid允許完全定制您的HTML,所以您可以從字面上設計一家商店,看起來像任何東西。

Liquid最初是在Ruby中開發的,用於Shopify,並作為開源項目發布。從那以後,它已被用於其他Ruby on Rails項目,並已被移植到PHP和JavaScript。

Liquid的快速預覽

讓我們來看看使用liquid需要些什麼

正如你所看到的,Liquid只是帶有一些嵌入代碼的HTML。這就是Liquid為什麼如此強大的原因,它可以讓你充分發揮你的代碼的作用,並且很容易處理你可用的變量。以上是怎麼回事?

以上是怎麼回事?

Shopify banner

在Liquid中,有兩種​​標記:輸出和標記.Liquid標籤被大括號和百分號包圍; 輸出被兩個大括號包圍。

在上面的代碼片段中,Liquid的第一行是:{%產品中的產品%} .... {%endfor%}這是Liquid Tag的一個例子。 在對標籤遍歷項目的集合,並允許您與每個人的工作。 如果您曾經在PHP,紅寶石,JavaScript的或(在此插入任何編程語言)使用循環,則它在Liquid中的工作方式相同。

上面代碼片段中的Liquid的下一行是{{product.title}}。這是Liquid輸出的一個例子。這將要求產品的標題並將結果顯示在屏幕上。

Liquid的下一行引入了一些新功能:{{product.price | money_with_currency}}這裡我們有一個Liquid Filter的例子。它們允許您處理給定的字符串或變量。 篩選器將值放在自己的左側,並對其進行處理。這個特定的過濾器稱為format_as_money; 它需要一個數字,以美元符號為前綴並用正確的貨幣符號進行包裝。

一個簡單的例子:

可以生成以下HTML

Liquid上面的最後一行:{{product.description | prettyprint | 截斷:200}}顯示了如何將過濾器鏈接在一起即使該值恰好是另一個過濾器的結果,過濾器也會作用於左側的值。  因此,有問題的片段會將相紙過濾器應用於product.description,然後將截斷過濾器應用於相紙的結果。通過這種方式,您可以根據需要鏈接盡可能多的Liquid過濾器!

Liquid提供了什麼?

在Liquid標籤方面,除了標記,還有其他幾個最常見的是:

評論:

如果別的:

案例:

還提供了大量可用於按摩數據的過濾器一些常見的是:

還提供了大量可用於按摩數據的過濾器一些常見的是:

大寫:

大寫:

日期:

查看可用的過濾器的完整列表。

Shopify主題的解剖

Shopify主題都有簡單的目錄結構它由資產,佈局和模板文件夾組成讓我們看看在哪裡。:

  1. 資產文件夾:在資產文件夾中,您可以存儲要用於主題的所有文件。 這包括您將使用的所有樣式表,腳本,圖像,音頻文件等。在您的模板中,您可以使用ASSET_URL過濾器訪問這些文件。
  2. 佈局文件夾:該文件夾應該只包含一個名為theme.liquid的文件.theme.liquid擁有Shopify主題的全球元素 。此代碼將包裹在您店鋪中的所有其他模板中這是一個非常基本的theme.liquid的例子:

    必需的元素

    有兩個非常重要的元素必須存在於theme.liquid文件中。第一個是{{content_for_header}}。這個變量必須放在你的theme.liquid的頭部。 theme.liquid的頭部。 它允許Shopify在文檔頭中插入任何必要的代碼,例如與wp_head用於統計跟踪的腳本。對於熟悉的WordPress的人來說,這()函數非常相似。

    另一個非常重要的元素是{{content_for_layout}}這個變量必須放在你theme.liquid的主體中。這是所有其他liquid模板將被渲染的地方。

  3. 模板文件夾:此文件夾包含您的Shopify模板的其餘部分它包括:
    1. index.liquid:顯示為您店鋪的主索引頁面。
    2. product.liquid:每個產品都將使用此模板來顯示自己。
    3. cart.liquid:顯示當前用戶的購物車。
    4. collection.liquid:顯示用於產品集合展示。
    5. page.liquid:顯示該商店可能創建的任何靜態頁面。
    6. blog.liquid:顯示Shopify的所有Shopify博客。
    7. article.liquid:顯示任何博客文章,並包含提交評論的表單。
    8. 404.liquid:顯示任何時候商店返回404。
    9. search.liquid:顯示店鋪搜索結果。

正如您可能已經猜到的那樣,這些模板中的每一個都可以訪問不同的變量。例如,product.liquid可以訪問包含當前正在顯示的產品的產品變量,blog.liquid可以訪問博客變量,並且索引。liquid可以訪問所有這些變量。  如果您對哪些變量可以在哪個模板中使用感興趣,請查看Liquid文檔。

一個基本的骨架開始

Shopify設計的最大好處是您可以使用已有的所有技能:HTML,CSS,JS等該過程中唯一的障礙就是熟悉每個模板中​​的哪些Liquid變量可用。

這是視覺進來的地方。

願景 - 在一個盒子裡Shopify

願景是什麼?

願景是一個獨立的應用程序,允許您在本地機器上為Shopify商店創建主題,而無需註冊一個商店或設置數據庫或其他所有令人討厭的東西。

我需要什麼來運行視覺?

VISION來完成一切需要直接運行的箱子。如果你已經安裝了文本編輯器和網頁瀏覽器,你已經準備好了。

如果這還不夠,遠景將預裝Shopify的現成主題.Shopify允許人們將這些主題用作構建模塊,因此您可以從這些現有主題之一開始作為基礎並進行擴展!

概要

Shopify是一個快速發展的電子商務平台,已經有成千上萬的賣家展示他們的產品。 使用VISION,你可以立即開始運行並開始發展。發布到Themeforest的Shopify類別的前十個模板額外獲得100美元。所以開始吧!

如果您需要更多關於使用Shopify進行設計的信息,他們會在其維基上提供大量文檔。查看Shopify主題指南,使用Liquid和視覺入門。

從ThemeForest的最佳Shopify模板....到目前為止!

  • Drifter

    漂泊

    “這款時尚的Shopify主題具有清晰的線條和現代設計風格,可以展示您的產品。自定義jQuery的燈箱可以讓您的產品完整查看。”

    查看主題

  • Drifter

    粉紅色花園

    “採用現代,花哨的web 2.0設計的shopify主題。”

    查看主題

  • 訂閱NETTUTS RSS Feed獲取更多每日網絡開發內容和文章。


关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.