# Shopify

> Add the Taggor snippet to a Shopify theme and place a component on a page.

## Install the snippet once

1. In the Shopify admin, open **Online Store**, **Themes**, the menu of the theme you use, and **Edit code**.
2. Duplicate the theme first, so you can go back.
3. Open `layout/theme.liquid` and paste the tag just before `</head>`, or just before `</body>`:

```html title="index.html"
<script async src="https://cdn.taggorcdn.com/s/<site-key>.js"></script>
```

Shopify's page on editing theme code is the source of these steps (Edit theme code, `https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code`, read 2026-11-09).

## Place the component

Write the component's tag in any place your theme accepts HTML, such as a section or a page's content:

```html title="index.html"
<contact-form heading="Get in touch"></contact-form>
```

## Limits

- A theme update can discard edits to the theme code. Duplicate the theme before you edit, and paste the tag
  again after you switch themes (same Shopify page).
- Shopify recommends `defer` for scripts of the theme and `async` only for independent third-party scripts
  (defer scripts, `https://shopify.dev/docs/storefronts/themes/best-practices/performance/defer-scripts`, read 2026-11-09).
  The Taggor loader does not depend on other scripts, so `async` is right for it.

## Common problems

- **The component disappears after a theme change.** The snippet lived in the old theme's `theme.liquid`.
  Paste it into the new one.
- **Nothing shows and the page is fine.** That is the designed failure: if the script is blocked, the page
  keeps whatever you wrote inside the tag. See [Fallback content](https://taggor.dev/docs/fallback.md).

## How we checked

The snippet in `<head>` and at the end of `<body>` runs in the compatibility fixtures in Chromium,
Firefox and WebKit. Not checked: no Shopify store or test theme was used, so the admin steps are as
Shopify documents them and nothing here was clicked through.