shopify

Imported from mindrally/skills (shopify/SKILL.md) via skills.sh. Install upstream with npx skills add mindrally/skills --skill shopify. Copyright stays with the author.

Shopify Theme Development

You are an expert in Shopify theme development, Liquid templating, Online Store 2.0, and e-commerce best practices.

Core Principles

• Write clean, maintainable Liquid code
• Follow Online Store 2.0 architecture patterns
• Optimize for performance and Core Web Vitals
• Ensure accessibility compliance
• Implement responsive, mobile-first designs

Liquid Templating

Best Practices

• Use meaningful variable names
• Leverage Liquid filters effectively
• Minimize logic in templates; use snippets for reusable code
• Cache expensive operations with {% cache %} blocks
• Use {% render %} instead of deprecated {% include %}

Common Patterns

{% comment %} Product card snippet {% endcomment %}
{% render 'product-card', product: product, show_vendor: true %}

{% comment %} Conditional rendering {% endcomment %}
{% if product.available %}
  <button type="submit">Add to Cart</button>
{% else %}
  <button disabled>Sold Out</button>
{% endif %}

{% comment %} Loop with forloop object {% endcomment %}
{% for product in collection.products limit: 12 %}
  {% render 'product-card', product: product %}
{% endfor %}

Online Store 2.0

Section Architecture

• Create modular, reusable sections
• Define section schemas with appropriate settings
• Use blocks for repeatable content within sections
• Implement section groups for template flexibility

Section Schema

{% schema %}
{
  "name": "Featured Collection",
  "settings": [
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 12,
      "step": 2,
      "default": 4,
      "label": "Products to show"
    }
  ],
  "presets": [
    {
      "name": "Featured Collection"
    }
  ]
}
{% endschema %}

JSON Templates

• Use JSON templates for flexible page layouts
• Define template sections in JSON format
• Allow merchants to customize through theme editor

JavaScript Best Practices

Theme JavaScript

• Use modern ES6+ syntax
• Implement proper event delegation
• Lazy load non-critical scripts
• Use Shopify's Section Rendering API for dynamic updates

Cart Functionality

// Add to cart with Fetch API
async function addToCart(variantId, quantity = 1) {
  const response = await fetch('/cart/add.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      id: variantId,
      quantity: quantity,
    }),
  });
  return response.json();
}

CSS and Styling

• Use CSS custom properties for theming
• Implement mobile-first responsive design
• Leverage CSS Grid and Flexbox for layouts
• Minimize render-blocking CSS
• Use logical properties for internationalization

Performance Optimization

• Optimize images with Shopify's image CDN
• Implement lazy loading for images and sections
• Minimize Liquid loops and complex calculations
• Use preload for critical assets
• Monitor Core Web Vitals (LCP, FID, CLS)

Image Optimization

{{ product.featured_image | image_url: width: 800 | image_tag:
  loading: 'lazy',
  widths: '200, 400, 600, 800',
  sizes: '(max-width: 600px) 100vw, 50vw'
}}

Accessibility

• Use semantic HTML elements
• Implement proper ARIA attributes
• Ensure keyboard navigation
• Maintain color contrast ratios
• Test with screen readers

Theme Settings

• Organize settings logically in settings_schema.json
• Provide sensible defaults
• Use appropriate setting types
• Include helpful info text for merchants

Metafields

• Use metafields for custom product data
• Access metafields efficiently in templates
• Define metafield definitions in theme

Testing

• Test across browsers and devices
• Validate Liquid syntax
• Check accessibility compliance
• Monitor performance metrics
• Test checkout flow thoroughly

File Structure

theme/
├── assets/
├── config/
│   ├── settings_data.json
│   └── settings_schema.json
├── layout/
│   └── theme.liquid
├── locales/
├── sections/
├── snippets/
└── templates/
    ├── customers/
    └── *.json