Hosted Actions let a theme update storefront data using ordinary HTML forms. Use them when a shopper adds an item to their cart, saves a product, submits a review, signs in, or performs another storefront action. Each action posts to a stable URL on the store's own domain. JavaScript is optional: the same action works as a native form submission or with fetch when you want a more interactive experience.
CSRF#
The easiest way to build an action form is with Vein's {% form %} tag. It selects the correct action URL and adds the CSRF token for you. If you build the form yourself, request csrf_token in ctx_needs and send it in a hidden _csrf field, or use the X-CSRF-Token header with fetch. Always use the token rendered for the current visitor session.
{% form "cart_add" %}
<input type="hidden" name="product_id" value="{{ product.id }}">
<input type="hidden" name="variant_id" value="{{ product.selected_variant.id }}">
<button type="submit">Add to cart</button>
{% endform %}Response modes#
Use a normal form submission when you want Tringify to continue the shopper's browser flow after the action. For an interactive interface, request JSON with Accept: application/json or add _format=json when the action supports it. Each action page shows its exact success response. Validation failures return user_errors. Localization and media uploads use the specialized error responses shown on their pages. Cart and wishlist actions also accept client_mutation_id, which you can reuse when retrying the same request safely.
User errors#
A user error is ready to show to the shopper. Its message is already translated for the current storefront language and includes any merchant wording overrides. Display message as provided. Use code only when your theme needs different behavior for a particular error, and use field to place feedback beside the relevant input when it is present.