neuro-shopify-liquid

Generates Shopify Liquid templates using documented objects, filters, tags, and Online Store 2.0 patterns.

Updated Apr 18, 2026
One-click install
npx skills add https://github.com/webdevarif/claude-skills --skill neuro-shopify-liquid-webdevarif
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: neuro-shopify-liquid
Source: https://github.com/webdevarif/claude-skills/tree/main/neuro-shopify-liquid
Command: npx skills add https://github.com/webdevarif/claude-skills --skill neuro-shopify-liquid-webdevarif

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing Shopify Liquid code from memory leads to guessed filter names, deprecated syntax like include or img_url, and missed Online Store 2.0 conventions. This Skill provides a verified reference of Liquid objects, tags, filters, and section schemas so generated theme code is correct and performant. ## Core Features & Use Cases - Complete Object Reference: Covers global, product, variant, collection, cart, customer, order, section, and block objects with exact property names. - Filter and Tag Library: Documents string, math, array, money, date, color, and media filters plus conditional, iteration, form, and schema tags with working examples. - Modern Image Patterns: Enforces image_url and image_tag with responsive widths, sizes, and lazy loading instead of deprecated img_url. - Use Case: Ask for a product card snippet showing compare-at pricing and a responsive featured image, and receive Liquid code using product.compare_at_price, the money filter, and image_tag with srcset widths. ## Quick Start Write a Liquid section that displays a collection's products in a paginated grid with responsive images and sale badges.

Frequently Asked Questions about neuro-shopify-liquid

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I display responsive images in Shopify Liquid?

Use the image_url filter with a width parameter chained into image_tag with widths and sizes attributes. This generates an img element with srcset so browsers load the appropriate size, and Shopify serves WebP or AVIF automatically.

How do I show sale pricing with compare-at price in Liquid?

Check if product.compare_at_price is greater than product.price, then render the compare-at price struck through and the actual price using the money filter. Subtract the two values to display savings, since prices are stored in cents.

Should I use render or include for Shopify snippets?

Always use render for snippets in new code because it isolates scope and performs better. The include tag is deprecated, leaks variables into the parent scope, and should not appear in Online Store 2.0 themes.

Why does Liquid divided_by return a whole number?

The divided_by filter performs integer division when both operands are integers, so 10 divided by 3 returns 3. Use a float divisor like 3.0 to get a decimal result.

What is the difference between img_url and image_url filters?

img_url is deprecated and should not be used in new theme code. The image_url filter requires at least a width or height parameter, supports cropping and format conversion, and pairs with image_tag for responsive output.