HTML Tags

❮ Previous Next ❯

HTML tags display elements with attributes specific to Shopify.

form

Creates an HTML <form> tag with needed <input> tags to send the form to a specific endpoint.

Since Shopify themes have various form types, the form tag needs a type. Some types may need an extra parameter. You can choose from these form types:

activate_customer_password
cart
contact
create_customer
currency
customer
customer_address
customer_login
guest_login
localization
new_comment
product
recover_customer_password
reset_customer_password
storefront_password

{% form 'form_type' %}
content
{% endform %}

form_type

The type of form you want

content

The form contents

activate_customer_password

{% form 'activate_customer_password', article %}
form_content
{% endform %}

Creates a form to activate a customer account. For more details on how to use this form and what it includes, see the customers/activate_account template.

{% form 'activate_customer_password' %}

{% endform %}

cart

{% form 'cart', cart %}
form_content
{% endform %}

Creates a form to make a checkout with the items in the cart. The cart form needs a cart array as a parameter. For more details on using the cart form in your theme, check the cart template.

{% form 'cart', cart %}

{% endform %}

contact

{% form 'contact' %}
form_content
{% endform %}

Generates a form to send an email to the seller. For details on incorporating this form into your theme, see Adding a contact form to your theme.

Note: To learn more about how merchants experience receiving submissions, visit the Shopify Help Center.

{% form 'contact' %}

{% endform %}

create_customer

{% form 'create_customer' %}
form_content
{% endform %}

Generates a form for making a new customer account. To understand how to use this form and its contents, refer to the customers/register template.

{% form 'create_customer' %}

{% endform %}

currency

{% form 'currency' %}
form_content
{% endform %}

Creates a form where customers can choose their desired currency.

Note: Apply the currency_selector filter to embed a currency selection tool within the form.

{% form 'currency' %}
{{ form | currency_selector }}
{% endform %}

customer

{% form 'customer' %}
form_content
{% endform %}

Generates a form for adding a new customer without requiring them to create an account. This form is helpful for gathering customer details without needing them to log into your website, for example, when collecting email addresses for a newsletter subscription.

Note: To create a form for registering a customer account, utilize the create_customer form.

customer_address

{% form 'customer_address', address_type %}
form_content
{% endform %}

Generates a form to create a new address on a customer account or edit an existing one. The customer_address form needs a specific parameter. It varies based on whether you're creating a new address or editing an existing one:

Parameter value	Use-case
customer.new_address	When a new address is being created.
address	When an existing address is being edited.

{% form 'customer_address', customer.new_address %}

{% endform %}

customer_login

{% form 'customer_login' %}
form_content
{% endform %}

Generates a form to log into a customer account. For more information on how to use this form and its contents, refer to the customers/login template.

{% form 'customer_login' %}

{% endform %}

guest_login

{% form 'guest_login' %}
form_content
{% endform %}

Generates a form, for use in the customers/login template, that directs customers back to their checkout session as a guest instead of logging in to an account.

{% form 'guest_login' %}

{% endform %}

localization

{% form 'localization' %}
form_content
{% endform %}

Generates a form for customers to choose their preferred country so they see the correct language and currency. The localization form includes either:

A country selector
A language selector

Note: The localization form updates the old currency form.

new_comment

Creates a form to add a comment to an article. The form for adding a new comment needs an article object as input.

{% form 'new_comment', article %}
form_content
{% endform %}

product

Creates a form to add a product variant to the shopping cart. The form needs a product object to work.

{% form 'product', product %}
form_content
{% endform %}

recover_customer_password

{% form 'recover_customer_password' %}
form_content
{% endform %}

Creates a form for the customers/login template, allowing customers to recover their lost or forgotten passwords.

reset_customer_password

Creates a form for users to reset their passwords.

storefront_password

{% form 'storefront_password' %}
form_content
{% endform %}

Creates a form to enter a password-protected storefront.

form tag parameters

return_to

{% form 'form_type', return_to: string %}
content
{% endform %}

Each form type automatically sends customers to a specific page after submission. For example, the product form redirects to the cart page.

The return_to parameter lets you set a URL to redirect to. You can use the following values:

Value	Description
back	Go back to the same page the customer was on after submitting the form.
A relative path	A specific URL path. For example /collections/all.
A routes attribute	For example, routes.root_url

{% form 'customer_login', return_to: routes.root_url %}

{% endform %}

HTML attributes

{% form 'form_type', attribute: string %}
content
{% endform %}

You can define HTML attributes by adding a parameter prefixed with "data-" followed by the attribute name and its value.

{% form "product", product, id: 'custom-id', class: 'custom-class', data-example: '100' %}

{% endform %}

style

Generates an HTML <style> tag with an attribute of data-shopify.

Note: If you specify color settings within style tags, the corresponding CSS rules will automatically adjust whenever the setting is modified in the theme editor, without needing to refresh the page.

{% style %}
CSS_rules
{% endstyle %}

CSS_rules

The desired CSS rules for the <style> tag.

{% style %}
.h1 {
color: {{ settings.colors_accent_1 }};
}
{% endstyle %}