theme-shopify-liquid-templates

What problem does it solve?

This Skill provides best practices and guidelines for writing efficient, maintainable, and performant Liquid templates within Shopify themes, addressing common pitfalls in snippet usage, logic flow, image handling, and SVG integration.

Core Features & Use Cases

• Snippet Management: Enforces the use of {% render %} over {% include %} and standardizes snippet structure with usage comments.
• Optimized Liquid Logic: Guides users to employ the {% liquid %} tag for cleaner, more readable logic and advises against deep nesting.
• Responsive Image Handling: Promotes the use of image_tag with srcset and sizes for optimal image delivery across devices.
• SVG Integration: Details the correct method for inlining SVGs using inline_asset_content for dynamic styling.
• Use Case: When developing a new product card component for a Shopify theme, use this Skill to ensure the associated Liquid snippet is structured correctly, uses render, handles product images responsively, and includes clear usage instructions.

Quick Start

Use the theme-shopify-liquid-templates skill to refactor the provided Liquid code snippet to follow best practices for image handling and snippet usage.