# Component - Liquid Tag Reference

Source: https://support.storeconnect.com/articles/component-tag-reference · Last modified 21 August 2026

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.

## 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](context-tag-reference) 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](theme-components) — how to create and use components
- [Context tag reference](context-tag-reference) — persist state across reloads
- [Render tag reference](render-tag-reference) — render a static snippet inline

---

## Follow StoreConnect

- [Email Newsletter](https://getstoreconnect.com/c/lp-newsletter)
- [LinkedIn Newsletter](https://www.linkedin.com/build-relation/newsletter-follow?entityUrn=7444956928444862464)
- [YouTube](https://www.youtube.com/channel/UCngKdP2x8l1wcbAKW3tvU8g)
- [LinkedIn](https://www.linkedin.com/company/storeconnect)
- [X / Twitter](https://x.com/storeconnecthq)

## Popular Links

- [Partners](https://getstoreconnect.com/partners)
- [News](https://getstoreconnect.com/articles/news)
- [Events](https://getstoreconnect.com/articles/events)
- [Feature Comparison](https://getstoreconnect.com/how-we-compare)
- [Download a free trial](https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000FMkeKUAT)
- [Book a Demo](https://getstoreconnect.com/contact)

## Documentation

- [Help documentation](https://support.storeconnect.com/help-documentation)
- [AI agents](https://support.storeconnect.com/ai)
- [Videos & tutorials](https://support.storeconnect.com/videos-tutorials)
- [Developer reference](https://support.storeconnect.com/developer-reference)
- [Release notes](https://support.storeconnect.com/release-notes)
- [Troubleshooting](https://support.storeconnect.com/troubleshooting)
- [Trust Center](https://trust.getstoreconnect.com/)
- [Status Page](https://status.storeconnect.com/)

## Contact

- info@getstoreconnect.com
- US +1 415 745 3230
- AUS +61 2 8365 2308

100 S Ashley Dr, Suite 600-2461
Tampa FL 33602-600 USA

Level 22, Sydney Place
180 George Street
Sydney, NSW, 2000, AUS

---

StoreConnect Support — https://support.storeconnect.com/articles/component-tag-reference