shopify-theme-development

Shopify Theme Development

Overview

Build and customize Shopify themes using Liquid templating, JSON templates, sections and blocks for merchant-customizable layouts, and theme app extensions for app integrations. This skill covers the Shopify theme architecture (Online Store 2.0), the Shopify CLI development workflow, performance optimization with lazy loading and critical CSS, and patterns for building flexible sections that merchants can configure through the theme editor.

When to Use This Skill

• When building a new Shopify theme from scratch or forking Dawn
• When creating custom sections and blocks for the theme editor
• When implementing product pages, collection grids, or cart functionality in Liquid
• When optimizing a Shopify theme for Core Web Vitals and speed
• When building theme app extensions to inject app content into themes

Core Instructions

1. Set up the development environment with Shopify CLI

   # Install Shopify CLI
   npm install -g @shopify/cli @shopify/theme
   
   # Initialize a new theme (or clone Dawn)
   shopify theme init my-theme
   
   # Start development server with hot reload
   shopify theme dev --store=your-store.myshopify.com
   

   Theme directory structure (Online Store 2.0):

   my-theme/
   ├── assets/          # CSS, JS, images
   ├── config/          # settings_schema.json, settings_data.json
   ├── layout/          # theme.liquid (main layout)
   ├── locales/         # Translation files
   ├── sections/        # Sections (reusable, merchant-configurable)
   ├── snippets/        # Partials (reusable Liquid fragments)
   └── templates/       # JSON templates referencing sections
       ├── product.json
       ├── collection.json
       └── index.json
   

2. Create a JSON template with sections

   // templates/product.json
   {
     "sections": {
       "main": {
         "type": "main-product",
         "settings": {}
       },
       "recommendations": {
         "type": "product-recommendations",
         "settings": {
           "heading": "You may also like",
           "products_to_show": 4
         }
       },
       "reviews": {
         "type": "product-reviews",
         "settings": {}
       }
     },
     "order": ["main", "recommendations", "reviews"]
   }