Forms

Shopify provides a variety of form types for different use cases, such as login, signup, cart, address, and newsletter forms. To implement these forms in Webflow, use the li-form attribute on the appropriate form element. In the value field of the custom attribute, specify the desired form type (e.g., login, signup, cart, etc.).

For a complete overview of all supported form types, refer to the Shopify documentation.

Webflow

li-form = customer

Shopify

{% form 'customer', class: 'footer_form' %}
      // your form content
{% endform %}

Form modifier

Some Shopify forms need more details than just the form type. For example, a product form might need to know which product to add, or a return form might need a specific return URL. To handle this, you can use form modifiers. Simply add a colon (:) at the end of li-form and write the modifier you want to use. if the modifier requires a value, you can include it in the value field of the attribute.

Return to: if you want to redirect users to a specific page after form submission, you can add an additional li-form attribute using the :return_to modifier. This does not replace the original li-form attribute — it works alongside it.

Webflow

li-form = customer
li-form:return_to = /pages/thank-you

Shopify

{% form 'customer', return_to: '/pages/thank-you', class: 'footer_form' %}
      // your form content
{% endform %}

In this example, you will also notice that a class is assigned to the element. This class is taken directly from the element to which the li-form attribute is applied.

Product: In a product form, you need to pass the product information — otherwise, Shopify won’t know which product to add. For example, this is necessary on a collection page. You can easily do this by adding the :product modifier.

Webflow

li-form = product
li-form:product =

Shopify

{% form 'product', product, class: 'product_form' %}
      // your form content
{% endform %}

Within the form, you can use input elements tailored to the specific form you wish to create. These inputs require unique names, which you can reference in the Shopify documentation and soon in our own documentation.

Most forms are already included in the Starter Template, making it convenient for you to reference them whenever needed.