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

让我们来设计一个Shopify主题

by
Difficulty:IntermediateLength:LongLanguages:

Chinese (Simplified) (中文(简体)) translation by Fuhuan (you can also view the original English article)

Themeforest最近打开了一个新的部分,您可以购买或销售Shopify的主题!Shopify是一款托管式电子商务解决方案,可轻松开始在线业务。你可以在几分钟内快速开张。

要启动ThemeForest的Shopify目录,每个已接受模板的作者将获得100美元的奖金 - 直到该类别中有10个模板。

Shopify以其灵活的设计而闻名。看一些例子。Shopify创建(并且随后以开源形式发布)Liquid Templating Engine。Liquid为设计师提供了完全自由的设计。

在本教程中,我将介绍如何使用Liquid设计Shopify主题。一旦你有了基础知识,你就可以设计一个主题,并将其提交给Themeforest。

让我们来设计一个Shopify主题

什么是.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,Ruby,javascript或(在此插入任何编程语言)使用循环,则它在Liquid中的工作方式相同。

上面代码片段中Liquid的下一行是{{product.title}}。这是Liquid输出的一个例子。这将要求产品的标题并将结果显示在屏幕上。

Liquid的下一行引入了一些新功能:{{product.price |money_with_currency}}这里我们有一个Liquid Filter的例子。它们允许您处理给定的字符串或变量。筛选器将值放在自己的左侧,并对其进行处理。 这个特定的过滤器称为format_as_money; 它需要一个数字,以美元符号为前缀并用正确的货币符号进行包装。

一个简单的例子:

可以生成以下HTML

Liquid上面的最后一行:{{product.description |prettyprint | truncate:200}}显示了如何将过滤器链接在一起。即使该值恰好是另一个过滤器的结果,过滤器也会作用于左侧的值。 因此,有问题的片段会将相纸过滤器应用于product.description,然后将截断过滤器应用于相纸的结果。通过这种方式,您可以根据需要链接尽可能多的Liquid过滤器!

Liquid提供了什么?

在Liquid标签方面,除了标记,还有其他几个。最常见的是:

评论:

如果别的:

案例:

查看完整的标签列表。

Liquid还提供了大量可用于按摩数据的过滤器。一些常见的是:

大写:

参与:

日期:

查看可用的过滤器的完整列表。

Shopify主题的解剖

Shopify主题都有简单的目录结构。它由资产,布局和模板文件夹组成。让我们看看在哪里:

  1. 资产文件夹:在资产文件夹中,您可以存储要用于主题的所有文件。 这包括您将使用的所有样式表,脚本,图像,音频文件等。在您的模板中,您可以使用asset_url过滤器访问这些文件。
  2. 布局文件夹:该文件夹应该只包含一个名为theme.liquid的文件。theme.liquid拥有Shopify主题的全球元素。 此代码将包裹在您店铺中的所有其他模板中。这是一个非常基本的theme.liquid的例子:

    必需的元素

    有两个非常重要的元素必须存在于theme.liquid文件中。第一个是{{content_for_header}}。这个变量必须放在你的theme.liquid的头部。 它允许Shopify在文档头中插入任何必要的代码,例如用于统计跟踪的脚本。对于熟悉WordPress的人来说,这与wp_head()函数非常相似。

    另一个非常重要的元素是{{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可以访问博客变量,并且index.liquid可以访问所有这些变量。 如果您对哪些变量可以在哪个模板中使用感兴趣,请查看Liquid文档。

一个基本的骨架开始

Shopify设计的最大好处是您可以使用已有的所有技能:HTML,CSS,JS等。该过程中唯一的障碍就是熟悉每个模板中的哪些Liquid变量可用。

这是Vision进来的地方。

愿景 - 在一个盒子里Shopify

Vision是什么?

Vision是一个独立的应用程序,允许您在本地机器上为Shopify商店创建主题,而无需注册一个商店或设置数据库或其他所有令人讨厌的东西。

我需要什么来运行Vision?

VISION来完成一切需要直接运行的箱子。如果你已经安装了文本编辑器和网页浏览器,你已经准备好了。

如果这还不够,Vision将预装Shopify的现成主题。Shopify允许人们将这些主题用作构建模块,因此您可以从这些现有主题之一开始作为基础并进行扩展!

概要

Shopify是一个快速发展的电子商务平台,已经有成千上万的卖家展示他们的产品。 使用VISION,你可以立即开始运行并开始发展。发布到Themeforest的Shopify类别的前十个模板额外获得100美元。所以开始吧!

如果您需要更多关于使用Shopify进行设计的信息,他们会在其wiki上提供大量文档。查看Shopify主题指南,使用Liquid和Vision入门。

从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.