Theme tags

Theme tags have many functions, including:

  • Outputting template-specific HTML markup
  • Telling the theme which layout and snippets to use
  • Splitting a returned array into multiple pages.

comment

Allows you to leave un-rendered code inside a Liquid template. Any text within the opening and closing comment blocks will not be output, and any Liquid code within will not be executed.

echo

Outputs an expression in the rendered HTML. This is identical to wrapping an expression in {{ and }}, but works inside liquid tags and supports Filters.

form

Creates an HTML <form> element along with the required <input> elements to submit the form to a particular endpoint.

form types and tag parameters

There are many types of forms that can be created and submitted in Shopify themes. Adding a product to the cart, creating a customer account, and commenting on a blog article all require <form> elements with different attributes and <input> elements.

To create different forms, the {% form %} tag requires a type and might require additional parameters. For example, the form used to submit a comment on a blog article requires the type of new_comment and needs an article object as a parameter.

The different form types and their required parameters are listed below.

activate_customer_password

Generates a form for activating a customer account on the activate_account.liquid template.

contact

Generates a form for submitting an email through the Liquid contact form.

customer

Generates a form for creating a new customer without registering a new account. This form is useful for collecting customer information when you don't want customers to log in to your store, such as building a list of emails from a newsletter signup.

To generate a form that registers a customer account, use the create_customer form.

create_customer

Generates a form for creating a new customer account on the register.liquid template.

customer_address

Generates a form for creating or editing customer account addresses on the addresses.liquid template. When creating a new address, include the parameter customer.new_address. When editing an existing address, include the parameter address.

customer_login

Generates a form for logging into Customer Accounts on the login.liquid template.

guest_login

Generates a form on the login.liquid template that directs customers back to their checkout session as a guest instead of logging in to an account.

localization

Generates a form for customers to select their preferred country so they're shown the appropriate language and currency. Inside the form, you can build two different selectors:

Country selector

You can create a country selector using the available_countries and country attributes of the localization object. Making a selection will update to the currency associated with the selected country, and if the currently selected language is not available, then it will be updated to the selected country's default language.

For example:

Language selector

You can create a language selector using the available_languages and language attributes of the localization object.

For example:

new_comment

Generates a form for creating a new comment in the article.liquid template. Requires the article object as a parameter.

product

Generates a form for adding a product variant to the cart. Requires a product object as a parameter.

recover_customer_password

Generates a form for recovering a lost password on the login.liquid template.

reset_customer_password

Generates a form on the customers/reset_password.liquid template for a customer to reset their password.

storefront_password

Generates a form on the password.liquid template for entering a password-protected storefront.

Modifying form attributes

When you create a <form> element, you can modify its default attributes, or add new attributes. You can do this by including the attribute that you want to add or modify to the form tag as a named parameter, and assigning a value.

You can also use Liquid variables as parameters:

Redirecting customers with the return_to form tag parameter

By default, each form type redirects your customers to a particular page. For example, the product form type redirects to the cart page.

You can use the return_to form tag parameter to redirect to a page you specify in one of the following ways:

  • Use 'back' to redirect back to the same page your customers were on before they submitted the form.
  • Use a relative path value, for example '/collections/all'.
  • Use a routes attribute, for example routes.all_products_collection_url.

In the following example, return_to redirects the currency form to the all-products collection page:

layout

Include {% layout 'alternate' %} at the beginning of a template file to use an alternate layout file from the Layout folder of your theme. If you don't define an alternate layout, the theme.liquid template file is used by default:

If you want a template to use no layout file, you can specify none as the layout:

liquid

Allows writing multiple tags within one set of delimiters.

Use the echo tag to output an expression within a {% liquid %} tag.

paginate

Splitting products, blog articles, and search results across multiple pages is a necessary part of theme design as you are limited to 50 results per page in any for loop.

The paginate tag works with the for tag to split content into many pages. It must wrap a for tag block that loops through an array, as shown in the example below:

The by parameter is followed by an integer between 1 and 50 that tells the paginate tag how many results it should output per page.

Within paginate tags, you can access attributes of the paginate object. This includes the attributes to output the links required to navigate within the generated pages.

raw

Allows output of Liquid code on a page without being parsed.

{% raw %}{{ 5 | plus: 6 }}{% endraw %} equals 11.

render

Renders a snippet from the snippets folder of a theme.

Note that you don't need to write the file's .liquid extension.

When a snippet is rendered, the code inside it does not automatically have access to the variables assigned using variable tags within the snippet's parent template. Similarly, variables assigned within the snippet can't be accessed by the code outside of the snippet. This encapsulation increases performance and helps make theme code easier to understand and maintain.

Passing variables to a snippet

Variables assigned using variable tags can be passed to a snippet by listing them as parameters on the render tag:

Global objects don't need to be passed down. They are accessible from all files.

The with parameter

A single object can be passed to a snippet by using the with and as parameters:

In the example above, the product variable in the snippet will hold the value of featured_product in the parent template.

The for parameter

A snippet can be rendered once for each value of an enumerable object by using the for and as parameters:

In the example above, the snippet will be rendered once for each variant of the product, and the variant variable will hold a product variant object within the snippet.

When using the for parameter, the forloop object is accessible within the snippet.

section

Renders a section from the sections folder of a theme.

Including section files with the {% section %} tag will render a "static" section. To learn more about sections and how to include them in your theme, check out the documentation on theme sections.

Each section supports section-specific tags for defining settings, styles, and scripts that are unique to a section file.

style

The Liquid {% style %} tag renders an HTML <style> tag with a Shopify data attribute. Placing color settings within a {% style %} tag allows you to make live color updates from the theme editor without a full page refresh.