Skills
.Work. You
Rest

Shopify Section Patterns

Community

Best practices for Shopify 2.0 sections with inline CSS/JS.

Software Engineering#schema#liquid#theme-editor#Shopify sections#inline-css#inline-js
Authorsarojpunde
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill outlines section anatomy and practical patterns for creating Shopify 2.0 sections with Liquid, inline CSS, and JavaScript, improving maintainability and merchant customization.

Core Features & Use Cases

  • Section Anatomy & Best Practices: Liquid markup, optional inline styles/scripts, and schema configuration.
  • Common Patterns: Product Grid, Hero Banner, and Testimonials with section blocks.
  • Section Events: How to respond to theme editor events in JavaScript.

Quick Start

Create a simple product-grid section using the pattern template and hook into shopify:section:load for updates.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: Shopify Section Patterns
Download link: https://github.com/sarojpunde/shopify-dev-toolkit-claude-plugins/archive/main.zip#shopify-section-patterns

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository