# shopify-liquid

Builds Shopify theme components with Liquid schemas and strict validation. It searches docs and tests markup before sending code to the chat.

- skill · `type=skill` · Codex, ChatGPT · ★ 7604
- Author: Shopify · official OpenAI repository
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/openai/plugins/tree/HEAD/plugins/shopify/skills/shopify-liquid/SKILL.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/skills/shopify-liquid

## What it does

This skill guides the agent through constructing Shopify storefront components. Before writing templates, the model runs `scripts/search_docs.mjs` via `bash` to verify filter syntax or object schemas. It then builds sections and theme blocks following official directory conventions.

Generated code does not reach the chat right away. The assistant executes `scripts/validate.mjs` against schemas and retries up to 3 times whenever syntax checks report issues. Output is released only after the validation script succeeds.

Node.js is mandatory for the execution environment. Without Node.js, running `validate.mjs` fails immediately. The skill also enforces Liquid constraints, such as using `{% paginate %}` for collections exceeding 50 items and isolating variable scopes inside `{% render %}` tags.

## Install

### Codex (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add openai/plugins --skill shopify-liquid -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/shopify-liquid/SKILL.md` — For all projects use ~/.agents/skills/

### Claude Code

1. **Skills CLI (Vercel)**
```bash
npx skills add openai/plugins --skill shopify-liquid -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/shopify-liquid/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/shopify-liquid/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/shopify-liquid/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install openai/plugins shopify-liquid
```

2. **Manually: put the files in place**
- File: `.github/skills/shopify-liquid/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/openai/plugins --path plugins/shopify/skills/shopify-liquid
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/shopify-liquid/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/openai/plugins/tree/HEAD/plugins/shopify/skills/shopify-liquid/SKILL.md

## When to use it
- write section files with `{% schema %}` JSON settings and theme blocks
- generate Liquid snippets annotated with `{% doc %}` parameter tags
- paginate collections when loop counts exceed the 50 item threshold
- validate generated Liquid templates against schemas prior to saving

## Example prompts
- Create an announcement bar section with customizable background settings in `{% schema %}`.
- Build a reusable product badge snippet with LiquidDoc parameter documentation.
- Add a customer registration form that handles submission errors via Liquid tags.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [openai/plugins](https://affpapa.org/en/nevibecode/by/openai/plugins.md) — 596 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md