{"title":"Component - Liquid Tag Reference","slug":"component-tag-reference","url":"https://support.storeconnect.com/articles/component-tag-reference","url_markdown":"https://support.storeconnect.com/articles/component-tag-reference.md","subtitle":null,"summary":"The `component` simple tag renders a reusable component template that can reload itself from the server without a full page refresh. Use it to keep parts of a page in sync as the shopper interacts with your store.","type":"Developer_Documentation","video_url":"","keywords":"liquid, tags, component, simple tag, reload, defer, lazy, dynamic content, storeconnect","last_modified":"2026-08-21T07:12:35+0000","body_markdown":"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](theme-components) for the full guide.\n\n## Syntax\n\n\n```liquid\n\n{% component \"name\" %}\n```\n\n\n\n```liquid\n\n{% component \"name\", param: value, reload: \"event-one event-two\", lazy: true %}\n```\n\n\n| Property | Value |\n|----------|-------|\n| **Tag Name** | `component` |\n| **Type** | Simple tag |\n| **Source** | Hydrofoil (core) |\n\n## Description\n\nThe `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.\n\n## Options\n\n| Option | Type | Description |\n|--------|------|-------------|\n| `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. |\n| `defer` | boolean | Render a loading placeholder first, then fetch the real content automatically as soon as the page loads. |\n| `lazy` | boolean | Render empty; only fill the component in when one of its `reload` events fires. |\n| any other key | any | Passed to the component template as a parameter. Parameters are available on the first render only. Use the [`context` tag](context-tag-reference) to keep values across reloads. |\n\n## Examples\n\nRender a component:\n\n\n```liquid\n\n{% component \"cart\" %}\n```\n\n\nPass a parameter:\n\n\n```liquid\n\n{% component \"orders/order_summary\", source: current_cart %}\n```\n\n\nReload on cart and voucher events:\n\n\n```liquid\n\n{% component \"cart-menu\", reload: \"sc.cart-updated sc.voucher-applied sc.voucher-removed\" %}\n```\n\n\nDefer loading until after the page renders:\n\n\n```liquid\n\n{% component \"checkout/shipping_rates/page\", defer: true %}\n```\n\n\n## Related\n\n- [Components](theme-components) — how to create and use components\n- [Context tag reference](context-tag-reference) — persist state across reloads\n- [Render tag reference](render-tag-reference) — render a static snippet inline"}