Back to the top

Filters

Filters are simple methods to format or manipulate output.
Learn how to use filters »

Filters

Array

size(array)

Returns the size of an array.

join(array, connector)

Joins elements of an array with a connector.

Options

  • connector (' ' by default)
{{ options | join: ', ' }} # => "Small, Medium, Large"
sort(array)

Sorts the elements of an array.

first(array)

Returns the first element of an array.

last(array)

Returns the last element of an array.

Math

minus(number, number_to_subtract)

Subtracts two numbers.

{{ option.sold | minus: option.quantity }}
plus(number, number_to_add)

Adds two numbers.

{{ option.sold | plus: option.quantity }}
times(number, number_to_multiply)

Multiplies two numbers.

{{ 4 | times: 3 }} # => 12
divided_by(number, number_to_divide_by)

Divides a number by another number.

{{ 10 | divided_by: 2 }} # => 5
num_lt(number, number_to_compare)

Returns true or false if a number is less than the other.

{{ 3 | num_lt: 2 }} # => false
num_lte(number, number_to_compare)

Returns true or false if a number is less than or equal to the other.

{{ 3 | num_lte: 3 }} # => true
num_gt(number, number_to_compare)

Returns true or false if a number is greater than the other.

{{ 10 | num_gt: 2 }} # => true
num_gte(number, number_to_compare)

Returns true or false if a number is greater than or equal to the other.

{{ 1 | num_gte: 2 }} # => false
num_eq(number, number_to_compare)

Returns true or false if a number is equal the other.

{{ 10 | num_eq: 2 }} # => false

Money

money(number)

Formats a number into money format.

        {{ 1 | money }} # => 1.00
        {{ product.price | money }} # => 9.50
money_with_sign(number)

Formats a number into money format, and adds your currency sign. Set on the Store > Settings page of the admin.

        {{ 1 | money_with_sign }} # => $1.00
        {{ product.price | money_with_sign }} # => $9.50
money_with_code(number)

Formats a number into money format, and adds your currency code. Set on the Store > Settings page of the admin.

        {{ 1 | money_with_code }} # => 1.00 USD
        {{ product.price | money_with_code }} # => 9.50 USD
money_with_sign_and_code(number)

Formats a number into money format, and adds your currency sign and code. Set on the Store > Settings page of the admin.

        {{ 1 | money_with_code }} # => $1.00 USD
        {{ product.price | money_with_code }} # => $9.50 USD

Special

font_family_for_group(font)

Returns the full font family for a given base font.

Ex: "Verdana" returns "Verdana, Arial, Helvetica, sans-serif"

Options

  • font (Ex: Arial, Helvetica, Times New Roman, or Verdana)
      body { font-family: {{ theme.font | font_family_for_group }}; }
default_pagination(paginate, id, class_name, prev_label, next_label)

Creates pagination links (1 2 3 ... 5) for the given paginate object.

Options

  • id ("pagination" by default)
  • class_name ("pagination" by default)
  • prev_label ("« Previous" by default)
  • next_label ("Next »" by default)
      {% paginate products from products.all by 10 %}
        <p>{{ product.name }}</p>
        {{ paginate | default_pagination }}
      {% endpaginate %}
paginate(products, id, class_name, prev_label, next_label, inner_window, outer_window, separator)

DEPRECATED: please use the above default_pagination filter.

Creates pagination (1 2 3 ... 5) for the given products.current variable. Only used on the Products page.

Options

  • id ("pagination" by default)
  • class_name ("pagination" by default)
  • prev_label ("« Previous" by default)
  • next_label ("Next »" by default)
  • inner_window (4 by default)
  • outer_window (1 by default)
  • separator (" " by default).
        {{ products.current | paginate }}
shipping_name(area, everywhere, everywhere_else)

Returns the name of a shipping area. If the shipping area is a for a country, it will use the country’s name. Otherwise it will use everywhere if it’s the only shipping option, and everywhere_else if there are multiple shipping areas.

Options

  • everywhere ("Everywhere" by default)
  • everywhere_else ("Everyone else" by default)
        {% for area in product.shipping %}
          <p>{{ area | shipping_name }}</p>
        {% endfor %}
hidden_option_input(option, id, class_name)

Returns a hidden form input for the given option to be added to the cart. Useful for when there is only one default option.

Options

  • id ("option" by default)
  • class_name (blank by default)
        {% if product.has_default_option %}
          {{ product.option | hidden_option_input }}
        {% endif %}
options_select(options, id, class_name)

Returns a select combobox for the given options to be added to the cart.

Options

  • id ("option" by default)
  • class_name (blank by default)
        {{ product.options_in_stock | options_select }}
options_radio(options, id, class_name)

Returns an unordered list of radio buttons for the given options to be added to the cart.

Options

  • id ("option" by default)
  • class_name (blank by default)
        {{ product.options_in_stock | options_radio }}
product_quantity_input(product, quantity, id, class_name)

Returns a text input for the given product to specify what quantity to add to the cart.

Options

  • quantity (1 by default)
  • id ("quantity_product.id" by default)
  • class_name (blank by default)
        Quantity: {{ product | product_quantity_input }}
item_quantity_input(options, id, class_name)

Returns a text input for the given option to update it’s quantity on the Cart page.

Options

  • id ("item_item.id_qty" by default)
  • class_name (blank by default)
        Quantity: {{ item | item_quantity_input }}
country_select(country, label, id, class_name)

Returns a select combobox of all countries with the given country selected. To be used on the Cart page.

Options

  • label ("Select your country..." by default)
  • id ("country" by default)
  • class_name (blank by default)
        Shipping: {{ store.country | country_select }}
discount_code_input(discount, id, class_name)

Returns a text input for the cart’s discount. To be used on the Cart page.

Options

  • id ("cart_discount_code" by default)
  • class_name (blank by default)
        Discount: {{ cart.discount | discount_code_input }}
contact_input(contact, field, id, class_name)

Returns a text input for the given contact field. To be used on the Contact page.

Options

  • field ("name", "email", "subject", "message", or "captcha")
  • id (matches field by default)
  • class_name (blank by default)
        Name: {{ contact | contact_input: 'name' }}<br/>
        Email: {{ contact | contact_input: 'email' }}<br/>
        Subject: {{ contact | contact_input: 'subject' }}<br/>
        Message: {{ contact | contact_input: 'message' }}<br/>
        Spam Check: {{ contact.captcha }}<br/>
        Enter the letters from the above image:
        {{ contact | contact_input: 'captcha' }}

String

size(string)

Returns the size of a string.

downcase(string)

Converts a string to lower case.

upcase(string)

Converts a string to upper case.

capitalize(string)

Capitalizes words in a string.

escape(string)

Removes special characters from a string. Useful for outputting attributes in HTML.

        <a href="{{ product.url }}" title="View {{ product.name | escape }}">{{ product.name }}</a>
pluralize(string, count, singular, plural)

Returns the singular version of a word if there are one, and the plural version otherwise.

Options

  • count (the number of items)
  • singular (the singular name of the item, ex: "product")
  • plural (the plural name of the item, ex: "products")
        You have {{ cart.item_count | pluralize: 'item', 'items' }} in your cart!
truncate(string, length, truncate_string)

Trims a string down to the length you specify.

Options

  • length (the number of characters to allow, 50 by default)
  • truncate_string (how to end a truncated string, "..." by default)
        {{ product.name | truncate: 18 }} # => "Once upon a ti..."
truncatewords(string, length, truncate_string)

Trims a string down to the length you specify.

Options

  • length (the number of words to allow, 15 by default)
  • truncate_string (how to end a truncated string, "..." by default)
        {{ product.name | truncatewords: 4 }} # => "Once upon a time..."
strip_html(string)

Removes all HTML tags from a string.

strip_newlines(string)

Removes all newlines (returns) from a string.

newline_to_br(string)

Converts newlines (returns) into <br /> tags.

paragraphs(string)

Converts newlines (returns) into <br /> tags and consecutive newlines into <p> tags.

replace(string, string_to_find, replacement_string)

Replaces all occurrences of a string with another string.

        {{ product.description | replace: "hello", "goodbye" }}
replace_first(string, string_to_find, replacement_string)

Same as replace, but only replaces the first occurrence.

remove(string, string_to_remove)

Removes all occurrences of a given string.

remove_first(string, string_to_remove)

Same as remove, but only removes the first occurrence.

prepend(string, string_to_prepend)

Adds a string to the beginning of another string.

append(string, string_to_append)

Adds a string to the end of another string.

date(date, format)

Formats a date.

        %a - The abbreviated weekday name (``Sun'')
        %A - The  full  weekday  name (``Sunday'')
        %b - The abbreviated month name (``Jan'')
        %B - The  full  month  name (``January'')
        %c - The preferred local date and time representation
        %d - Day of the month (01..31)
        %H - Hour of the day, 24-hour clock (00..23)
        %I - Hour of the day, 12-hour clock (01..12)
        %j - Day of the year (001..366)
        %m - Month of the year (01..12)
        %M - Minute of the hour (00..59)
        %p - Meridian indicator (``AM''  or  ``PM'')
        %S - Second of the minute (00..60)
        %U - Week  number  of the current year,
             starting with the first Sunday as the first
             day of the first week (00..53)
        %W - Week  number  of the current year,
             starting with the first Monday as the first
             day of the first week (00..53)
        %w - Day of the week (Sunday is 0, 0..6)
        %x - Preferred representation for the date alone, no time
        %X - Preferred representation for the time alone, no date
        %y - Year without a century (00..99)
        %Y - Year with century
        %Z - Time zone name
        %% - Literal ``%'' character

URL

link_to(item, text, title, id, class, rel)

Creates a link to any page, product, artist, or category.

Options

  • text (item’s name by default)
  • title ("View {{ item.name}}" by default)
  • id (blank by default)
  • class (blank by default)
  • rel (blank by default)
        {{ page | link_to }}
        {{ product | link_to: 'My Product' }}
        {{ category | link_to: 'Tees', 'View tees category', 'tees_category', 'categories' }}
product_image_url(image, size)

Returns the URL of the specified product image and size.

Options

  • size ("thumb" (75x75), "medium" (175x175), "large" (300x300), or leave it blank for the largest image)
        {{ image | product_image_url }}
        {{ image | product_image_url: "thumb" }}
        <img src="{{ product.image | product_image_url size:"large" }}" />
theme_js_url(name)

Returns the URL of a JavaScript file used by a specific theme. Use this over calling the URLs directly.

        <script src="{{ 'prototype' | theme_js_url }}" type="text/javascript"></script>
        <script src="{{ 'api' | theme_js_url }}" type="text/javascript"></script>
theme_css_url(theme)

Returns the URL of your custom CSS StyleSheet.

        <link href="{{ theme | theme_css_url }}" media="screen" rel="Stylesheet" type="text/css" />
theme_image_url(name)

Returns the URL of an image file used by a specific theme. Use this over calling the URLs directly.

        a#website_back {
          background-image: url({{ 'btn_website.png' | theme_image_url }});
          }

Related questions from our Q&A forums

Still have a question? Check out our questions forum or contact our support team.