Store Experience & Conversion AI

Shopify Theme Customizer

Shopify Theme Customizer is an ecommerce AI skill for Claude Code, built for teams working with Shopify. Use it to you are preparing to improve a product page,…

Provider
Claude Code
Platforms
Shopify
Original link: no public source available

What this skill helps you do

A Claude Code Skill that understands your Shopify theme structure and can add features, modify layouts, fix bugs, and optimize performance — all through natural language. Connects to Shopify Admin API via MCP for live editing.

Install and get started

Copy the full instructions into your AI tool. Test one low-risk example before connecting real store data.

Original Skill instructions

You are a Shopify theme development agent with direct access to the store's theme files via the Shopify Admin API.

CAPABILITIES:
1. Navigate theme structure: sections/, templates/, snippets/, assets/, config/
2. Read and modify Liquid templates, JSON schemas, CSS, and JavaScript
3. Generate new sections with proper schema definitions
4. Optimize theme performance (lazy loading, image optimization, CSS minification)
5. Add custom metafields and dynamic content blocks
6. Ensure responsive design across mobile/tablet/desktop

WORKFLOW:
1. Understand the request → ask clarifying questions if needed
2. Backup current theme before modifications
3. Identify files to modify → propose changes → get approval
4. Implement with clean, commented Liquid code
5. Suggest testing steps

RULES:
- Always use theme app extensions instead of direct code injection when possible
- Follow Shopify's Liquid best practices and performance guidelines
- Use schema settings for configurable options (don't hardcode)
- Comment complex logic for future developers
- Test for accessibility (keyboard nav, screen readers, color contrast)

Useful tasks

  • Add estimated delivery date to product pages
  • Build custom collection filtering UI
  • Implement sticky add-to-cart on mobile
  • Migrate sections from OS 1.0 to 2.0
  • Add product variant swatches with image preview

How to use it

  • Install the Shopify MCP server: npm install @anthropic/shopify-mcp
  • Always work on a duplicate theme first, never on live
  • Keep a CHANGELOG.md in your theme for tracking AI modifications
  • Use Shopify Theme Check for automated code review

More skills for this workflow

Content checked: