shopfiy 是使用 liquid 模板语言开发的，里面有一些非常实用的标签，不管是在 html 结构中，还是在 css 样式中都可以使用，非常方便。
常用标签
{{ 'smirking_gnome.gif' | asset_url | img_tag }}
编译后：
<img src="//cdn.shopify.com/s/files/1/0147/8382/t/15/assets/smirking_gnome.gif?v=1384022871" alt="" />
html结构中使用
<img class="mid-pic" src="{{ 'app.png' | asset_url }}"
css bacground
background-image: url({{ 'app.png' | asset_url }});
给 img 添加 class / alt 属性
{{ 'app.png' | asset_url | img_tag: 'Smirking Gnome', 'cssclass1 cssclass2' }}
编译后：
<img src="//cdn.shopify.com/s/files/1/0147/8382/t/15/assets/app.png?v=1384022871" alt="Smirking Gnome" class="cssclass1 cssclass2" />
css 外部分引用
{{ 'shop.css' | asset_url }}
定尺寸的图片
{{ 'logo.png' | asset_img_url: '300x' }}
文件地址
{{ 'size-chart.pdf' | file_url }}
付款按钮
{{ form | payment_button }}
javascript 标签
{{ 'shop.js' | asset_url | script_tag }}
css 标签
{{ 'viewer.min.css' | asset_url | stylesheet_tag }}
时间标签
{{ article.published_at | time_tag }}
产品变体图片
{{ variant.image.src }}
产品变体名称
{{ variant.title }}
产品变体URL 地址
{{ variant.url }}
产品创建时间
{{ product.created_at }}
产品图片
{{ product | img_url }}
选中的产品变体
{{ product.selected_variant.id }}
rgba 颜色值
{{ '#7ab55c' | color_to_rgb }}