Liquid Render Skill

Capabilities

This skill allows you to "compile" Liquid logic instantly without waiting for Shopify. You can check if your logic (loops, filters, math) is correct. It also allows you to render a snippet into an HTML file (save_preview) so you can open it with Playwright and see the result.

Dependencies

• Local MCP Server: This skill comes with a built-in Node.js server.
• Node.js: Required to run the server.

Tools Usage Guide

1. render_liquid

Render a piece of code and get the HTML string back.

• Param template: {% if products.size > 0 %}...{% endif %}
• Param data: { "products": [{"title": "Shirt"}] }

2. save_preview (Best for UI Testing)

Render liquid code into a real .html file that you can inspect visually.

• Param template: The code.
• Param data: Mock data.
• Param filename: (Optional) e.g., my_test.html.

Workflow: Virtual Lab

1. Mock Data: Agent invents JSON data describing a scenario (e.g. product_with_50_variants.json).
2. Render: Agent calls save_preview.
3. Verify: Agent calls playwright_navigate(url="file:///path/to/my_test.html") to see the result.

Limitations

• This uses liquidjs (Node.js), not the official Shopify Ruby engine.
• Standard filters like | asset_url are mocked to return strings, so CSS/Images might not load if they rely on CDN.
• Use this for LOGIC testing mainly.