feat: Add Shopify Theme Development Best Practices guide #126
Conversation
WalkthroughA new best practices guideline document for Shopify theme development has been added. The document provides recommendations on Liquid templating, JavaScript, CSS/SCSS, sections and blocks, performance, accessibility, maintenance, scalability, and quality testing, as well as conventions for project structure and coding standards. Changes
Sequence Diagram(s)No sequence diagram generated, as the change is documentation only. Assessment against linked issues
Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
rules-new/shopify-theme-dev-liquid.mdc (3)
17-24: Strengthen Liquid guidance with pagination & loop limits
Mentionpaginateandlimit/offsetattributes onforloops. These are the primary tools to curb excessive object iteration and DB hits, complementing the existing N+1 bullet.
25-31: Add note on Shopify-specific JS lifecycle & removing jQuery reliance
Most themes still ship jQuery; recommending its removal (or at least no new dependencies) would modernise the advice. Also add a bullet on listening forshopify:section/blockload/unload events so modules initialise correctly in the Theme Editor.
57-63: Expand A11y section to reference WCAG 2.1 and landmark roles
Calling out WCAG success criteria (e.g., 1.4.3 contrast, 2.4.1 bypass blocks) plusheader/main/nav/footerlandmarks and skip-links gives developers testable targets.
| --- | ||
| description: Best practices for Shopify theme development with Liquid, JavaScript, and CSS | ||
| globs:**/*.liquid, assets/*.js, assets/*.css, sections/*.liquid, snippets/*.liquid, templates/**/*.liquid | ||
| --- |
There was a problem hiding this comment.
Front-matter globs field is not valid YAML – parsing will fail
The key/value pair is missing a space after the colon and should be an array (each glob quoted or indented). Broken front-matter prevents the rule engine or any static-site generator from reading the metadata.
-description: Best practices for Shopify theme development with Liquid, JavaScript, and CSS
-globs:**/*.liquid, assets/*.js, assets/*.css, sections/*.liquid, snippets/*.liquid, templates/**/*.liquid
+description: Best practices for Shopify theme development with Liquid, JavaScript, and CSS
+globs:
+ - "**/*.liquid"
+ - "assets/*.js"
+ - "assets/*.css"
+ - "sections/*.liquid"
+ - "snippets/*.liquid"
+ - "templates/**/*.liquid"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| --- | |
| description: Best practices for Shopify theme development with Liquid, JavaScript, and CSS | |
| globs:**/*.liquid, assets/*.js, assets/*.css, sections/*.liquid, snippets/*.liquid, templates/**/*.liquid | |
| --- | |
| --- | |
| description: Best practices for Shopify theme development with Liquid, JavaScript, and CSS | |
| globs: | |
| - "**/*.liquid" | |
| - "assets/*.js" | |
| - "assets/*.css" | |
| - "sections/*.liquid" | |
| - "snippets/*.liquid" | |
| - "templates/**/*.liquid" | |
| --- |
🤖 Prompt for AI Agents
In rules-new/shopify-theme-dev-liquid.mdc at lines 1 to 4, the front-matter
globs field is not valid YAML because it lacks a space after the colon and is
not formatted as an array. Fix this by adding a space after the colon and
converting the globs value into a properly indented YAML array with each glob
pattern quoted or listed on separate lines.
feat: Add Shopify Theme Development Best Practices guide
Description
This Pull Request introduces a comprehensive Best Practices guide for Shopify Theme Development. As an active Shopify theme developer, I've identified a need within the community for a centralized resource that outlines effective strategies for building robust, performant, and maintainable Shopify themes.
This guide covers key areas of Shopify theme development, including:
Motivation
While the "Awesome Cursor Rules" project primarily focuses on development efficiency through cursor rules, I believe including best practices guides aligns with the broader goal of empowering developers. This guide serves as a valuable resource that can:
I've structured this guide to be clear, actionable, and easy to follow, mirroring the format of other best practices documents within the broader developer community.
Related Issue
Closes #125
Checklist
Thank you for considering this contribution. I believe it will be a valuable addition to the repository.
Summary by CodeRabbit