Theme API / Custom HTML
If you have any questions, please send us a message.
Every Asset in a Theme supports Limited Run's Theme API and there are two main ways to use the API:
- Output -
{{ }}
for things like{{ store.name }}
, which will output something, likeExit Records
. - Tags -
{% %}
for things likeif
,unless
,for
, andpaginate
.
Output
There are many objects that can be used to output data from your Store to your Storefront and each object's data can be output directly or sent through a filter.
A filter is structured like data
, followed by a pipe
, followed by the filter name and any options, like:
{{ item.published_at | date: "%B, %d %Y" }}
In the above example, the data item.published_at
is piped into the date
filter with the option "%B, %d %Y", which formats the date.
There are many filters available including:
asset_url
- Stylesheet Usage:
{{ 'default.css' | asset_url | stylesheet_tag: 'screen' }}
- Javascript Usage:
{{ 'default.js' | asset_url | script_tag }}
- Generates a
link
orscript
tag for a stylesheet or javascript Theme Asset.
img_tag
- Usage:
{{ 'http://.../logo.png' | img_tag }}
- Generates an
img
tag.
script_tag
- Usage:
{{ 'http://.../jquery.js' | script_tag }}
- Generates a
script
tag.
stylesheet_tag
- Usage:
{{ 'http://.../main.css' | stylesheet_tag }}
- Generates a
stylesheet
tag.
link_to
- Usage:
{{ 'Google' | link_to: 'http://google.com' }}
- Generates an
a
tag.
link_to_javascript
- Usage:
{{ 'Alert!' | link_to_javascript: "alert('Hello, World!');" }}
- Generates an
a
tag to inline javascript.
link_to_category
- Usage:
{{ category | link_to_category }}
- This is a shortcut to generate a link to a category page, from a category object. Note this uses
{{ category.name }}
and{{ category.url }}
to generate a simplea
tag.
link_to_download
- Usage:
{{ download | link_to_download }}
- This is a shortcut to generate a link to a download, from a download object. Note this uses
{{ download.name }}
to generate a speciala
tag that opens the download overlay.
link_to_news_item
- Usage:
{{ item | link_to_news_item }}
- This is a shortcut to generate a link to a news item page, from a news item object. Note this uses
{{ news_item.title }}
and{{ news_item.url }}
to generate a simplea
tag.
link_to_page
- Usage:
{{ page | link_to_page }}
- This is a shortcut to generate a link to a page page, from a page object. Note this uses
{{ page.title }}
and{{ page.url }}
to generate a simplea
tag.
link_to_product
- Usage:
{{ product | link_to_product }}
- This is a shortcut to generate a link to a product page, from a product object. Note this uses
{{ product.name }}
and{{ product.url }}
to generate a simplea
tag.
ordinalize
- Usage:
{{ 2 | ordinalize }}
- Generates: 2nd
simple_format
- Usage: {{ product.description | simple_format }}
- Converts text broken up with line breaks into HTML paragraphs.
money
- Usage: {{ 10 | money }}
- Generates
$10.00
, in your Storefront's currency.
money_with_currency
- Usage: {{ 10 | money_with_currency }}
- Generates
$10.00 USD
, in your Storefront's currency.
money_without_currency
- Usage: {{ 10 | money_without_currency }}
- Generates
10.00
, without any currency symbols or codes.
capitalize
- Usage: {{ 'hello there' | capitalize }}
- Generates: Hello There
downcase
- Usage: {{ 'Hello There' | downcase }}
- Generates: hello there
upcase
- Usage: {{ 'Hello There' | upcase }}
- Generates: HELLO THERE
first
- Usage: {{ store.products | first }}
last
- Usage: {{ category.products | last }}
join
- Usage: {{ product.price_range | money | join: ' - ' }}
- Generates: $10.00 - $15.00
size
- Usage: {{ category.products.size }}
- Generates: 15
API
Aside from filters, there are objects that can be used to access data in your Store. The objects are as follows:
store:
- Available in all Theme Assets.
attributes:
- name -
{{ store.name }}
ex: Exit Records - url -
{{ store.url }}
ex: http://exitrecords.limitedrun.com
collections:
- categories -
{% for category in store.categories %}
…{% endfor %}
- products -
{% for product in store.products %}
…{% endfor %}
- products in a specific category -
{% for product in store.category_by_slug['category-slug'].products %}
…{% endfor %}
- events -
{% for event in store.events %}
…{% endfor %}
- pages -
{% for page in store.pages %}
…{% endfor %}
- page by name -
{{ store.page_by_path['sidebar'].body }}
- calendar -
{% for event in store.calendar.events %}
…{% endfor %}
- news -
{% for item in store.news.items %}
…{% endfor %}
- history -
{% for item in store.history.items %}
…{% endfor %}
- gallery -
{% for item in store.gallery.items %}
…{% endfor %}
category:
- Available alone, on a single category page, in the
category.html
template. - Available within a for loop of
store.categories
. - Available within a for loop of
product.categories
.
attributes:
- name -
{{ category.name }}
ex: Vinyl - slug -
{{ category.slug }}
ex: vinyl - url -
{{ category.url }}
ex: /categories/vinyl - custom['key'] - Custom fields are supported via the Custom Theme Fields Module
collections:
- products -
{% for product in category.products %}
…{% endfor %}
product:
- Available alone, on a single product page, in the
product.html
template. - Available within a for loop of
category.products
. - Available alone when loaded by id using
{% assign product = store.product_by_id[some-product-id] %}
- useful in conjunction with custom fields. - Available alone when loaded by catalog number using
{% assign product = store.product_by_music_catalog_number[some-catalog-number] %}
- useful in conjunction with the history item catalog_number field and custom fields.
attributes:
- state -
{{ product.state }}
ex: available - name -
{{ product.name }}
ex: Silent Majority - Life of a Spectator - slug -
{{ product.slug }}
ex: 1-silent-majority-life-of-a-spectator - description -
{{ product.description }}
ex: This is a great record! - unlisted? -
{% if product.unlisted? %}Unlisted{% endif %}
- announced? -
{% if product.announced? %}Announced{% endif %}
- available? -
{% if product.available? %}Available{% endif %}
- unavailable? -
{% if product.unavailable? %}Unavailable{% endif %}
- url -
{{ product.url }}
ex: /products/1-silent-majority-life-of-a-spectator - price_range -
{{ product.price_range | money | join: ' - ' }}
ex: $5.00 - $10.00 - music_catalog_number -
{{ product.music_catalog_number }}
ex: EX-001 - music_pressing_information -
{{ product.music_pressing_information }}
ex: 500 / White - custom['key'] - Custom fields are supported via the Custom Theme Fields Module
collections:
- categories -
{% for category in product.categories %}
…{% endfor %}
- images -
{% for image in product.images %}
…{% endfor %}
- variations -
{% for variation in product.variations %}
…{% endfor %}
- music_track_listings -
{% for track in product.music_track_listings %}
…{% endfor %}
event:
- Available alone, on a single event page, in the
event.html
template. - Available within a for loop of
store.events
, in theevents.html
template. - Available within a for loop of
store.events
.
attributes:
- state -
{{ event.state }}
ex: available - name -
{{ event.name }}
ex: Silent Majority Reunion Show - slug -
{{ event.slug }}
ex: 1-silent-majority-reunion-show - description -
{{ event.description }}
ex: This is a great record! - unlisted? -
{% if event.unlisted? %}Unlisted{% endif %}
- announced? -
{% if event.announced? %}Announced{% endif %}
- available? -
{% if event.available? %}Available{% endif %}
- unavailable? -
{% if event.unavailable? %}Unavailable{% endif %}
- url -
{{ event.url }}
ex: /shows/1-silent-majority-reunion-show - price_range -
{{ event.price_range | money | join: ' - ' }}
ex: $5.00 - $10.00 - custom['key'] - Custom fields are supported via the Custom Theme Fields Module
collections:
- images -
{% for image in event.images %}
…{% endfor %}
- variations -
{% for variation in event.variations %}
…{% endfor %}
image
- Available within a for loop of
product.images
.
attributes:
- url - Full Size
- v075_url - Max. 75px x 75px
- v150_url - Max. 150px x 150px
- v200_url - Max. 200px x 200px
- v300_url - Max. 300px x 300px
- v600_url - Max. 600px x 600px
variation
- Available within a for loop of
product.variations
.
attributes:
- name
- description
- price
- weight
- requires_exact_payment
- available?
track listing
- Available within a for loop of
product.music_track_listings
.
attributes:
- id3_track_number
- id3_track_artist
- id3_track_name
order
- Available on a single order page, in the
order.html
template.
attributes:
- key
- paypal_pay_key
- number
- state
- status
- attempted?
- transaction_id
- pending_reason
- customer - Customer object
- shipping_address - Address object
- item_count
- digital - Digital only?
- subtotal
- shipping
- total_price
- total_weight
collections:
- items -
{% for item in order.items %}
…{% endfor %}
- downloads -
{% for download in order.downloads %}
…{% endfor %}
order item
- Available within a for loop of
order.items
.
attributes:
- name
- digital - Digital only?
- unit_price
- unit_weight
- quantity
- total_price
- total_weight
download
- Available within a for loop of
order.downloads
.
attributes:
- name
usage:
<ul>
{% for download in order.downloads %}
<li>{{ download | link_to_download }}</li>
{% endfor %}
</ul>
customer
- Available from an order, like
order.customer
.
attributes:
- first_name
- last_name
address
- Available from an order, like
order.shipping_address
.
attributes:
- first_name
- last_name
- street_address_1
- street_address_2
- city
- state
- postal_code
- country
page
- Available within a for loop of
store.pages
.
attributes:
- title
- path
- url
- body
calendar
Note: This requires the Ticket Selling Module.
- Available from a store, like
store.calendar
. - Available on the events page, in the
events.html
template. - Available on the event page, in the
event.html
template.
attributes:
- title
- path
- url
collections:
- events
news
Note: This requires the News Module.
- Available from a store, like
store.news
. - Available on the news page, in the
news.html
template.
attributes:
- title
- path
- url
collections:
- items
news item
Note: This requires the News Module.
- Available alone, on a single news item page, in the
news-item.html
template. - Available within a for loop of
store.news.items
. - Available within a for loop of
news.items
.
attributes:
- title
- slug
- url
- body
- published_at
- custom['key'] - Custom fields are supported via the Custom Theme Fields Module
history
Note: This requires the History Module.
- Available from a store, like
store.history
. - Available on the history page, in the
history.html
template.
attributes:
- title
- path
- url
collections:
- items
history item
Note: This requires the History Module.
- Available within a for loop of
store.history.items
. - Available within a for loop of
history.items
.
attributes:
- released_on
- released_by
- catalog_number
- name
- description
- release_information - Array of released_on, released_by and catalog_number.
- custom['key'] - Custom fields are supported via the Custom Theme Fields Module
collections:
- images
- links
roster
Note: This requires the Roster Module.
- Available from a store, like
store.roster
. - Available on the roster page, in the
roster.html
template. - Available on the roster item page, in the
roster-item.html
template. - Available alone when loaded by id using
{% assign item = store.roster_item_by_slug[some-roster-item-slug] %}
- useful in conjunction with custom fields on other objects.
attributes:
- title
- path
- url
collections:
- items
roster item
Note: This requires the Roster Module.
- Available within a for loop of
store.roster.items
. - Available within a for loop of
roster.items
.
attributes:
- name
- slug
- description
- url
- custom['key'] - Custom fields are supported via the Custom Theme Fields Module
collections:
- history_items
- images
- links
- products
link
- Available within a for loop of history items like
item.links
. - Available within a for loop of roster items like
item.links
.
attributes:
- name
- url
gallery
Note: This requires the Gallery Module.
- Available from a store, like
store.gallery
. - Available on the gallery page, in the
gallery.html
template.
attributes:
- title
- path
- url
collections:
- items
gallery item
Note: This requires the Gallery Module.
- Available within a for loop of
store.gallery.items
. - Available within a for loop of
gallery.items
.
attributes:
- url - Full Size
- v075_url - Max. 75px x 75px
- v150_url - Max. 150px x 150px
- v200_url - Max. 200px x 200px
- v300_url - Max. 300px x 300px
- v600_url - Max. 600px x 600px
Miscellaneous
{{ current_path }}
- If the current url is your-store.limitedrun.com/about, thencurrent_path
would be "about".{{ current_asset }}
- If a product page is currently being displayed,current_asset
would be "product.html".
Tags
In addition to output tags, there are logic tags that let you do more things with the API objects. There are various tags available, including:
- if
- unless
- for
- paginate
An example using if
and for
tags:
{% if store.pages.size > 0 %}
<h4>Info</h4>
<ul>
{% for page in store.pages %}
<li>{{ page | link_to_page }}</li>
{% endfor %}
</ul>
{% endif %}
An example of pagination:
{% paginate store.products by 30 %}
{% for product in store.products %}
<div class="product">
<a class="info" href="{{ product.url }}">
{{ product.name }} - {{ product.price_range | money | join: ' - ' }}
</a>
</div>
{% endfor %}
{{ store.products_pagination }}
{% endpaginate %}