Component - Liquid Tag Reference

The component simple tag renders a component template inline. Unlike a snippet rendered with render, a component can reload itself from the server without a full page refresh. See Components for the full guide.

Syntax

```liquid

{% component “name” %} ```

```liquid

{% component “name”, param: value, reload: “event-one event-two”, lazy: true %} ```

Property	Value
Tag Name	component
Type	Simple tag
Source	Hydrofoil (core)

Description

The component tag renders the component template whose key is components/name and wraps its output so the client can reload it in place when a matching browser event fires. The first argument is the component name; all remaining arguments are options.

Options

Option	Type	Description
reload	string	A space-separated list of browser event names. When any of these events fires, the component re-fetches itself from the server and swaps into place.
defer	boolean	Render a loading placeholder first, then fetch the real content automatically as soon as the page loads.
lazy	boolean	Render empty; only fill the component in when one of its reload events fires.
any other key	any	Passed to the component template as a parameter. Parameters are available on the first render only. Use the context tag to keep values across reloads.

Examples

Render a component:

```liquid

{% component “cart” %} ```

Pass a parameter:

```liquid

{% component “orders/order_summary”, source: current_cart %} ```

Reload on cart and voucher events:

```liquid

{% component “cart-menu”, reload: “sc.cart-updated sc.voucher-applied sc.voucher-removed” %} ```

Defer loading until after the page renders:

```liquid

{% component “checkout/shipping_rates/page”, defer: true %} ```

Related

• Components — how to create and use components
• Context tag reference — persist state across reloads
• Render tag reference — render a static snippet inline