- 浏览: 13632769 次
- 性别:
- 来自: 洛杉矶
文章分类
- 全部博客 (1994)
- Php / Pear / Mysql / Node.js (378)
- Javascript /Jquery / Bootstrap / Web (435)
- Phone / IOS / Objective-C / Swift (137)
- Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux (335)
- Perl / Koha / Ruby / Markdown (8)
- Java / Jsp (12)
- Python 2 / Wxpython (25)
- Codeigniter / CakePHP (32)
- Div / Css / XML / HTML5 (179)
- WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra (275)
- Apache / VPN / Software (31)
- AS3.0/2.0 / Flex / Flash (45)
- Smarty (6)
- SEO (24)
- Google / Facebook / Pinterest / SNS (80)
- Tools (22)
最新评论
-
1455975567:
xuezhongyu01 写道wocan23 写道我想问下那个 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
xuezhongyu01:
wocan23 写道我想问下那个111.1是怎么得来的我也看不 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
18335864773:
试试 pageoffice 在线打开 PDF 文件吧. pag ...
jquery在线预览PDF文件,打开PDF文件 -
青春依旧:
opacity: 0.5; 个人喜欢这种方式!关于其他css特 ...
css透明度的设置 (兼容所有浏览器) -
July01:
推荐用StratoIO打印控件,浏览器和系统的兼容性都很好,而 ...
搞定网页打印自动分页问题
关联:
Themeforest recently opened a new section where you can buy or sell themes for Shopify ! Shopify is a hosted e-commerce solution that makes it easy to get started with an online business. You can have a shop up and running in minutes.
To kick-start ThemeForest’s Shopify catalog, the authors of each accepted template will receive a $100 bonus – until there are ten templates in the category.
Shopify is well known for its flexibility of design. See some examples . Shopify created (and later released as open source) the Liquid Templating Engine . Liquid allows complete design freedom for designers.
In this tutorial I will show how to design a Shopify theme using Liquid. Once you have the basics, you can design a theme, and submit it to Themeforest .
Let’s Design a Shopify Theme
What is Liquid?
Liquid is the templating engine developed for and used by Shopify. It processes Liquid template files, which have the “.liquid” extension. Liquid files are simply HTML files with embedded code. Since Liquid allows full customization of your HTML , you can literally design a shop to look like anything.
Liquid was originally developed in Ruby for use with Shopify and was released as an open source project. Since then, it has been used in other Ruby on Rails projects , and has been ported to PHP and javascript .
A Quick Preview of Liquid
Let’s look at what it takes to get started with liquid.
<ul id="products"> {% for product in products %} <li> <h2>{{ product.title }}</h2> Only {{ product.price | money_with_currency }} <p>{{ product.description | prettyprint | truncate: 200 }}</p> </li> {% endfor %} </ul>
As you can see, Liquid is just HTML with some embedded code. This is why Liquid is so powerful, it gives you full power over your code and makes it easy to work with the variables you have available.
What is going on above?
In Liquid, there are two types of markup: Output and Tags . Liquid Tags are surrounded by curly brackets and percent signs; output is surrounded by two curly brackets.
In the above snippet, the first line of Liquid is: {% for product in products %} .... {% endfor %}
This is an example of a Liquid Tag. The for
Tag loops over a collection of items and allows you to work with each one. If you have ever used for loops in PHP
, Ruby, javascript, or (insert any programming language here), it works the same way in Liquid.
The next line of Liquid in the above snippet is {{ product.title }}
. This is an example of a Liquid Output. This will ask for a product’s title and display the result to the screen.
The next line of Liquid introduces something new: {{ product.price | money_with_currency }}
Here we have an example of a Liquid Filter. They allow you to process a
given string or variable. Filters take the value to the left of
themselves and do something with it. This particular Filter is called format_as_money
; it takes a number, prepends it with a dollar sign and wraps it with the correct currency symbol.
A simple example:
<span class="money">{{ product.price | money_with_currency }}</span>
could generate the following HTML
<span class="money">$45.00 <span class="caps">USD</span></span>
The last line of Liquid above: {{ product.description | prettyprint | truncate: 200 }}
shows how you can chain filters together. Filters act on the value that
is to the left of them, even if that value happens to be the result of
another filter. So the snippet in question will apply the prettyprint
filter to product.description
, and then will apply the truncate
filter to the results of prettyprint
. In this way, you can chain together as many Liquid filters as you need!
What Else Does Liquid Offer?
In terms of Liquid Tags, besides the for
tag, there are several others. Th most common ones are:
Comment:
{% comment %} This text will not be rendered {% endcomment %}
If/Else:
{% if product.description == "" %}
This product has no description!
{% else %}
This product is described!
{% endif %}
Case:
{% case template %} {% when 'product' %} This is a product.liquid {% when 'cart' %} This is a cart.liquid {% endcase %}
Check out the full list of Tags.
Liquid also offers plenty of filters you can use to massage your data. Some common ones are:
Capitalize:
{{ “monday” | capitalize }} #=> Monday
Join:
{{ product.tags | join: ’, ’ }} #=> wooden, deep snow, 2009 season
Date:
Posted on {{ article.created_at | date: “%B %d, ’%y” }} #=> Posted on January 26, ’09
Check out the full list of filters available .
Anatomy of a Shopify Theme
Shopify themes all have a simple directory structure. It consists of an assets, layout, and templates folder. Let’s look at what goes where:
-
assets folder
: In the assets folder you store all
of the files that you want to use with your theme. This includes all
stylesheets, scripts, images, audio files, etc. that you will be using.
In your templates you can access these files with the
asset_url
Filter.{{ "logo.gif" | asset_url | img_tag: "Main Logo" }} #=> <img src="/files/shops/random_number/assets/logo.gif" alt="Main Logo" />
-
layout folder
: This folder should contain just one
file called theme.liquid. The theme.liquid holds the global elements for
your Shopify theme. This code will be wrapped around all of the other
templates in your shop. Here is an example of a very basic theme.liquid:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>{{shop.name}}</title> {{ 'layout.css' | asset_url | stylesheet_tag }} {{ content_for_header }} </head> <body> <div id="header"> <h1 id="logo"><a href="/">{{ shop.name }}</a></h1> </div> <div id="content"> {{ content_for_layout }} </div> <div id="footer"> All prices are in {{ shop.currency }} | Powered by <a href="http://www.shopify.com" title="Shopify, Hosted E-Commerce">Shopify</a> </div> </body> </html>
Required Elements
There are two VERY important elements that must be present in a theme.liquid file. The first is
{{ content_for_header }}
. This variable must be placed in the head of your theme.liquid. It allows Shopify to insert any necessary code in the document head, such as a script for statistics tracking. For thsoe familiar with WordPress, this is quite similar to the wp_head() function.The other VERY important element is
{{ content_for_layout }}
. This variable must be placed in the body of your theme.liquid; it’s the place where all of your other Liquid templates will be rendered. -
templates folder
: This folder holds the rest of your Shopify templates. It consists of:
- index.liquid: Displayed as the main index page of your shop.
- product.liquid: Each product will use this template to display itself.
- cart.liquid: Displays the current user’s shopping cart.
- collection.liquid: Displayed for collections of products.
- page.liquid: Displayed for any static pages that the shop may have created.
- blog.liquid: Displayed for any Shopify blogs for the shop.
- article.liquid: Displayed for any blog articles and includes a form for submitting comments.
- 404.liquid: Displayed for anytime the shop returns a 404.
- search.liquid: Displayed for shop search results.
As you might have guessed, each of these templates has access to
different variables. For example, product.liquid has access to a product
variable which contains the current product being displayed, blog.liquid has access to a blog
variable, and index.liquid has access to all of them. If you’re
interested in which variables you can use in which template, please
review the Liquid documentation
.
A Basic Skeleton to Get Started
The best thing about designing for Shopify is that you get to use all of the skills that you already have: HTML , CSS , JS, etc. The only roadblock in the process is becoming familiar with which Liquid variables are available in each template.
This is where Vision comes in.
Vision – Shopify in a Box
What is Vision?
Vision is a stand-alone application that allows you to create themes for Shopify stores on your local machine without having to sign up for a shop or setup a database or all that other geeky stuff.
What do I need to run Vision?
Vision comes complete with everything needed to run straight out of the box. If you’ve got a text editor and a web browser installed, you are ready to roll.
As if that wasn’t enough, Vision comes pre-loaded with Shopify’s ready-made themes. Shopify has allowed people to use these themes as building blocks, so you can start with one of these existing themes as a base and expand upon on it!
Summary
Shopify is a fast growing e-commerce platform already with thousands of sellers looking to show off their products. Using Vision , you can hit the ground running and begin developing in no time. The first ten templates posted to Themeforest’s Shopify category get an extra $100 . So get started!
If you need more information about designing with Shopify, they have extensive documentation on their wiki . Check out The Shopify Theme Guide , Using Liquid , and Getting Started with Vision .
The Best Shopify Templates from ThemeForest….So Far!
-
Drifter
“This sleek Shopify theme features clean lines and modern design accents that showcase your products. Custom jQuery lightboxes allow your products to be viewed in full detail.”
-
Fancy Pink
“A shopify theme with modern, fancy web 2.0 design.”
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
关联:
来源: http://net.tutsplus.com/tutorials/other/let%E2%80%99s-design-a-shopify-theme/
发表评论
-
Magento: 后台显示图片不能找到 Image file was not found on product tab
2016-08-30 02:22 2883I was uploading some images f ... -
理解WordPress的PingBack和TrackBack
2016-08-26 02:21 5669pingback和trackback的功 ... -
零基础 Amazon Web Services (AWS) 入门教程图文版(四)
2016-06-07 11:40 982自上一篇之后,5天过去了,这篇文章总算是挤出来了... 其实 ... -
零基础 Amazon Web Services (AWS) 入门教程图文版(三)
2016-06-07 11:41 2000原则上WDCP安装好了,就可以直接使用了,FTP、MySQL ... -
零基础 Amazon Web Services (AWS) 入门教程图文版(二)
2016-06-07 01:33 948上一篇讲到,主机正常运转了。但是此时如果直接访问公网IP是 ... -
零基础 Amazon Web Services (AWS) 入门教程图文版(一)
2016-06-07 01:31 21549现在小站唯一的流量都靠AWS这个关键词了,刚好要用AWS重新 ... -
零基础 Amazon Web Services (AWS) 入门教程 (列表)
2016-06-07 01:32 2033在 Amazon Web Services 上托 ... -
Magento 1.9:新订单通知 Admin Order Notifier
2016-06-02 02:48 800Here is a little Mag ... -
Magento 1.9.X 系列教程
2016-05-14 02:44 2245Magento安装下载教学: Magento教程 1 ... -
Magento: 产品页面下jquery change函数失效 Call javascript function onchange product option
2016-05-05 06:39 1698明显的原因是change函数跟magento默认的oncha ... -
Magento: 判断是否为手机浏览 Optimise Web's Mobile Detect Class for Magento
2016-04-29 07:01 1122项目地址:Optimise Web's Mobile Det ... -
Magento: Gird 和 form 区域 Module Development Series – Magento Admin Module
2016-04-28 02:39 634In this tutorial, we are goi ... -
Magento: addAttributeToFilter 和 addFieldToFilter 的区别 Difference between addAttri
2016-04-28 02:34 983addAttributeToFilter is use ... -
Magento: 后台获取menu链接 Getting the admin panel urls
2016-04-28 02:34 735The url for customer page in t ... -
Magento : 调用文件上传 upload file frontend
2016-04-27 01:25 1317bool mkdir ( string $pathname ... -
Magento: 自定义用户登录导向页面 Redirect Customer to Previous Page After Login
2016-04-26 02:45 1818Configuration Settings – L ... -
Magento: 代替flash上传 How to disable Flash uploader in Magento (product images and
2016-04-06 05:04 10831. 替换产品页flash上传按钮 - 使用 Du ... -
Magento: 在客户账户中添加自定义链接 My Account Add Link
2016-04-05 14:05 1196This extension add new link an ... -
Magento: 根据产品属性加载产品信息 Load A Category or Product by an Attribute
2016-03-26 01:35 895Load a Product by ID <?ph ... -
Magento模块开发之数据库SQL操作方法说明
2016-03-26 01:31 1292今天主要来看Magento中的Mysql4/Resource ...
相关推荐
Shopify入门到精通,视频教程,独立站跨境电商教程这一套就够了 十年资深shopify跨境电商分享shopify从入门到精通
Shopify 入门主题 这是用于 Shopify 主题开发的 Sass 和 Gulp-ready 入门主题。 它旨在为每个自定义主题项目进行大量编辑和修改。 依赖关系 这个主题要求你的电脑上安装了 Node、Sass 和 Gulp。 您可能还想使用 ,...
盖茨比Shopify入门 这是一个Gatsby Shopify Store入门程序,具有购物车和结帐功能,并使用样式设置。 它可用于任何Shopify商店的配置和使用。 有可能的使用 我建立了这个入门工具,作为其他人学习和了解如何创建...
Shopify节点应用 该示例应用程序的目标是为Shopify应用程序开发人员提供一个起点,使他们能够使用Node和Express.js快速启动嵌入式Shopify应用程序,并开始使用Polaris设计系统和React组件。 此示例应用程序使用Node...
基于无头Shopify入门 :sign_of_the_horns: 由提供支持的无头CMS :high_voltage: ••••• :sparkles: 特征 实用程序优先 由驱动的 由提供支持的购物车 使用对产品进行实时库存检查 缺货产品的Klaviyo等待列表 ...
Master the design techniques and practical skills needed to build Shopify themes and make you and your clients profitable. An increasing number of businesses use Shopify and all of them need a well-...
适用于 , 和Shopify的未经修饰的入门工具包大感谢 :spaghetti: :spaghetti: 用于无服务器功能。 克隆此存储库以引导由Sanity CMS支持的新的Gatsby网站,并在Web Hook的帮助下将Shopify产品动态导入Sanity。 注意:...
Shopify-api-node, 由 MONEI.net 赞助的官方 node Shopify连接器 Shopify node.js ( 官方模块) Node.js.的官方 Shopify API绑定插件安装:$ npm install --save shopify-api-node API这个模块导出一
:自从不赞成Shopfiy Slate以来,这是作为入门主题将现代构建工具引入Shopify开发的。 此入门主题已尽可能简化,因此您可以从空白画布开始。 享受。 先决条件:需要安装, , 。 配置 克隆repo之后,然后执行cd ...
使用Gatsby CLI创建一个新站点,并指定Shopify入门程序。 # create a new Gatsby site using the Shopify starter gatsby new my-shopify-starter https://github.com/gatsbyjs/gatsby-starter-shopify 开始开发...
Shopify主题模板 Foodly-v18-One-Stop-Food-Shopify-Theme
Laravel开发-shopify-api 为PHP购买API
前端项目-shopify-buy,JSBuy SDK是一个轻量级的库,允许您在任何网站中构建电子商务。它基于Shopify的API,并提供从您的商店检索产品和收藏、将产品添加到购物车和结帐的功能。
2022年最新版 44553 Shopify - shopify - 主题助推器.zip
shopify_api, ShopifyAPI是一个轻量级的gem,用于访问Shopify管理 REST Web服务 Shopify API Shopify gem 允许 ruby 开发人员以编程方式访问Shopify存储区的管理部分。API通过使用所有四个动词 (GET/POST/PUT/DELETE...
使用Gatsby CLI创建一个新站点,并指定Shopify入门程序。 # create a new Gatsby site using the Shopify startergatsby new my-shopify-store https://github.com/gatsbyjs/gatsby-starter-shopify 链接到您的商店...
拓荒者Shopify的“酵母”入门主题-简单易用,可用于html和css 感谢的Blankify主题和的Shopify备忘单
omniauth-shopify-oauth2, OmniAuth 1.0的Shopify OAuth2策略 OmniAuth ShopifyOmniAuth 1.0的Shopify OAuth2策略。安装添加到你的Gemfile:gem 'omniauth-shopify-oauth2'然后 bundle instal
Laravel开发-shopify-oauth 用于Shopify应用程序的OAuth 2.0身份验证