email-template-design
Email Template Design
Design production-ready HTML email templates using table-based layouts and inline CSS for maximum email client compatibility.
Workflow
- Clarify purpose - Determine the email type (marketing, transactional, lifecycle) and brand context
- Select base template - Start from an asset template in
assets/or build from scratch using the patterns below - Build structure - Use table-based layout with the boilerplate from
assets/base.html - Style inline - Apply all CSS as inline styles; use
<style>block only as progressive enhancement - Test compatibility - Review against the client quirks in
references/client-compatibility.md - Optimize - Compress images, add alt text, verify dark mode, ensure accessibility
Email Type Selection
| Type | Key characteristics | Template asset |
|---|---|---|
| Marketing / Newsletter | Hero image, CTA buttons, multi-section content | assets/marketing.html |
| Transactional | Data-driven, minimal design, clear information hierarchy | assets/transactional.html |
More from toilahuongg/shopify-agents-kit
shopify-polaris-icons
Guide for using Shopify Polaris Icons in Shopify Apps. Covers icon usage patterns, accessibility, tone variants, and common icon categories for commerce applications.
19shopify-extensions
Guide for building and managing Shopify Extensions (Admin, Checkout, Theme, Post-purchase, etc.) using the latest Shopify CLI and APIs.
14shopify-api
Comprehensive guide for Shopify APIs in Remix apps. Covers Admin GraphQL/REST, Storefront API, all resources (products, orders, customers, inventory, collections, discounts, fulfillments, metafields, files), bulk operations, webhooks, resource pickers, and TypeScript patterns. Use when querying/mutating Shopify data or building integrations.
14shopify-polaris-viz
Guide for creating data visualizations in Shopify Apps using the Polaris Viz library. Use this skill when building charts, graphs, dashboards, or any data visualization components that need to integrate with the Shopify Admin aesthetic. Covers BarChart, LineChart, DonutChart, SparkLineChart, and theming.
13code-investigator
Comprehensive code investigation and audit tool. Discovers all project features, then dispatches parallel subagents to analyze issues, risks, dead code, missing functionality, and redundancies. Produces a prioritized risk report. Use this skill when the user asks to "investigate code", "audit project", "find risks", "check code quality", "analyze codebase", "what's wrong with this code", "project health check", "code review entire project", "find dead code", "find redundant code", or any request for a thorough codebase analysis.
11shopify-polaris-design
Design and implement Shopify Admin interfaces using the Polaris Design System. Use this skill when building Shopify Apps, Admin extensions, or any interface that needs to feel native to Shopify.
11