skills.rest
tomtoto757
tomtoto757COMMUNITY
Explore all skills by this author →
GitHub

shopify-theme-development

Build Shopify Online Store 2.0 themes with Liquid templates and JSON sections.

14|3|Updated Mar 22, 2026
Search Tags:#performance#theme#liquid#shopify#sections#online-store-2.0#ajax-cart
One-click install
npx skills add https://github.com/tomtoto757/ecomm-ai-skills-hub --skill shopify-theme-development-tomtoto757
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shopify-theme-development
Source: https://github.com/tomtoto757/ecomm-ai-skills-hub/tree/main/skills/platform-integrations-infrastructure/finsilabs/platform-shopify/shopify-theme-development
Command: npx skills add https://github.com/tomtoto757/ecomm-ai-skills-hub --skill shopify-theme-development-tomtoto757

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a practical, repeatable workflow to build and customize Shopify Online Store 2.0 themes so merchants can configure layouts without developer edits and stores load quickly for shoppers.

Core Features & Use Cases

  • Theme scaffolding & workflow: Guidance for using Shopify CLI, theme directory structure, and Online Store 2.0 JSON templates to initialize and develop themes.
  • Merchant-configurable sections & blocks: Patterns for building sections with blocks and schema presets so non-technical merchants can add, remove, and reorder content in the theme editor.
  • Responsive media, performance & AJAX: Best practices for responsive image_tag usage, critical CSS inlining, deferred non-critical assets, and an AJAX cart pattern that posts to /cart/add.js, fetches /cart.js, and updates header badges.
  • Use Case: Create a product page with dynamic blocks (title, price, variant picker, buy buttons, description), wire it via a product.json template, and implement a cart manager to provide seamless add-to-cart behavior without full page reloads.

Quick Start

Initialize a new theme with the Shopify CLI, add a product section with schema and presets, and implement an assets/cart.js that uses /cart/add.js and fetches /cart.js to update the header badge.

Frequently Asked Questions about shopify-theme-development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build merchant-configurable sections and blocks for Shopify Online Store 2.0?▼

To build merchant-configurable Shopify Online Store 2.0 sections, you create Liquid templates with JSON section schemas and block presets. This allows non-technical merchants to add, remove, and reorder content directly within the theme editor without requiring developer edits.

What is the best way to implement an AJAX cart in a Shopify theme?▼

The best way to implement an AJAX cart in a Shopify theme is to post product data to /cart/add.js and fetch /cart.js. This pattern updates the cart UI and header badges seamlessly without requiring full page reloads during the add-to-cart process.

How do I handle responsive images and optimize performance in Shopify Liquid templates?▼

To handle responsive images and optimize performance in Shopify Liquid templates, use the image_tag with responsive parameters specifying widths and sizes. You should also inline critical CSS and defer loading non-critical JavaScript and CSS assets.

How do I wire a product template using JSON in Shopify Online Store 2.0?▼

To wire a product template in Shopify Online Store 2.0, you create a product.json template file that links to dynamic section blocks like title, price, variant picker, and buy buttons. This JSON template structure enables merchant-configurable product page layouts.

Do I need Shopify CLI to develop and customize Online Store 2.0 themes?▼

You need Shopify CLI to initialize new themes, manage the theme directory structure, and develop Online Store 2.0 themes locally. It provides the scaffolding and local development workflow required to build merchant-configurable templates efficiently.

Can I use theme app extensions with merchant-configurable sections in Shopify?▼

Yes, you can use theme app extensions alongside merchant-configurable sections in Shopify Online Store 2.0. This combination lets developers integrate app functionality directly into themes while merchants retain the ability to configure layouts through the theme editor.

Related Skills

Explore More Software Engineering Skills→
dragnoirdragnoir
45

theme-development

Develop, customize, and deploy Shopify themes using Liquid and JSON templates.

Community
Intermediate
finsilabsfinsilabs
44

shopify-theme-development

Develop and customize Shopify themes with Liquid, JSON sections, and theme app extensions.

Official
Intermediate
kos3nzkos3nz

shopify-liquid

Template Shopify storefronts using the Liquid templating language.

Community
Advanced
BrandondaymdrBrandondaymdr
1

shopify-storefront

Develop Shopify Online Store 2.0 themes with Liquid and JSON templates.

Community
Advanced