skills.rest
ProxiBlue
ProxiBlueCOMMUNITY
Explore all skills by this author →
Website𝕏@proxiblueGitHub

email-theme-styling

Theme Magento 2 transactional emails with Hyvä and CSS inlining.

15|1|Updated Oct 24, 2025
Search Tags:#theming#templates#email#css-inlining#hyva#magento#LESS
One-click install
npx skills add https://github.com/ProxiBlue/claude-skills --skill email-theme-styling
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: email-theme-styling
Source: https://github.com/ProxiBlue/claude-skills/tree/main/email-theme-styling
Command: npx skills add https://github.com/ProxiBlue/claude-skills --skill email-theme-styling

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured approach to theming and styling Magento 2 transactional emails, addressing the complexity of CSS inlining, template overrides, and Hyvä compatibility.

Core Features & Use Cases

  • Theming transactional emails via theme files and template overrides (header/footer patterns, logo placement, and consistent branding across email templates)
  • CSS inlining architecture and Hyvä integration (manage inline vs non-inline CSS, leverage Emogrifier for inlining)
  • Debugging & testing across email clients using Magento's email pipeline and Hyvä email module setup, including responsive design guidelines and fallback patterns

Quick Start

Start by enabling the Hyvä Email module and creating theme overrides at app/design/frontend/<Vendor>/<Theme>/Magento_Email/. Then rebuild static content, flush caches, and trigger a test transactional email to verify styling via Mailpit.

Frequently Asked Questions about email-theme-styling

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

FAQPage Schema
How do I style Magento 2 transactional emails using Hyvä?▼

To style Magento 2 transactional emails using Hyvä, enable the Hyvä Email module and create theme overrides at app/design/frontend/<Vendor>/<Theme>/Magento_Email/. This workflow leverages template overrides and CSS inlining architecture for consistent branding.

What is CSS inlining architecture in Magento 2 email theming?▼

CSS inlining architecture in Magento 2 email theming manages inline versus non-inline CSS using Emagrifier. This mechanism ensures styles render correctly across various email clients by injecting styles directly into HTML tags.

Do I need knowledge of Magento's LESS pipeline for email template customization?▼

Yes, you need knowledge of Magento's LESS pipeline and theme design path conventions for email template customization. This prerequisite knowledge is required to effectively manage header/footer overrides and template logic.

What's the best way to debug Magento 2 transactional email styling across email clients?▼

The best way to debug Magento 2 transactional email styling is to use Magento's email pipeline with the Hyvä email module setup. Trigger a test transactional email and verify styling via Mailpit to check responsive design and fallback patterns.

Why are my Magento 2 email header and footer overrides not applying?▼

Magento 2 email header and footer overrides fail when theme files are not placed at app/design/frontend/<Vendor>/<Theme>/Magento_Email/. Rebuild static content, flush caches, and verify your theme design path conventions to resolve the issue.

Related Skills

Explore More Design & Creative Skills→
Happy-HorizonHappy-Horizon

hyva-child-theme

Scaffold Hyvä child themes for Magento 2 with Tailwind setup.

Official
Intermediate
global-ministriesglobal-ministries

resend-email-design

Creates React Email templates for transactional messages using Resend.

Community
Intermediate
maxnormmaxnorm
26

magento-css-specialist

Develop modular LESS and CSS styles for Magento 2 themes.

Community
Intermediate
ProxiBlueProxiBlue
15

magento2-widget-creation

Create custom Magento 2 widgets for CMS pages and blocks.

Community
Advanced