Theme Assets

The assets directory is rendered as the assets folder in the theme editor. It contains all the assets used in the theme, including images, stylesheets, and javascript files.

The editor_assets folder is a theme-editor preview mirror of assets. It holds the versions of the same files that the editor uses when rendering a live preview, so changes can be previewed before they are published.

Assets are referenced with filter such as asset_url and global_asset_url, and turned into HTML with stylesheet_tag or script_tag. See the Filters reference for the full list of filters.

asset_url

The asset_url returns the URL of a file in the "assets" folder of a theme.

Input

{{ 'shop.css' | asset_url }}

Output

https://s3-ap-southeast-1.amazonaws.com/easystore.co/101502/themes/28/assets/shop.css

global_asset_url

The global_asset_url returns the URL of a global asset. Global assets are kept in a directory on EasyStore's servers. Using global assets can improve the load times of your pages.

Input

{{ 'shop.css' | global_asset_url | script_tag }}

Output

<script src="/assets/prototype.js?1" type="text/javascript"></script>

stylesheet_tag

The stylesheet_tag wraps a stylesheet URL in an HTML <link> tag. It is usually chained after asset_url.

Input

{{ 'section-main-product.css' | asset_url | stylesheet_tag }}

Output

<link href="//cdn.easystore.co/.../section-main-product.css" rel="stylesheet" type="text/css" media="all">

script_tag

The script_tag wraps a script URL in an HTML <script> tag. It is usually chained after asset_url.

Input

{{ 'product-form.js' | asset_url | script_tag }}

Output

<script src="//cdn.easystore.co/.../product-form.js" type="text/javascript"></script>

img_url

The img_url returns the URL of an image resized to a requested size, such as small, medium, large, or grande.

Input

<img src="{{ image.src | img_url: 'grande' }}">