Introduction
Fancy Etch is a component library and set of ready-to-use templates for the Etch page builder. It provides creative, distinctive building blocks — heroes, headers, accordions, offcanvas panels, table of contents — so you can build a standout site without settling for the standard layouts most page builders push you toward.
Everything in Fancy Etch is built the same way native Etch components are:
semantic HTML, a small set of fe-* classes, and CSS custom properties on
each component's root class so you can retheme an instance from the Style
Manager without ever opening a nested selector.
Your shop, built in Etch
Etch builds pages, not shops. Fancy Etch adds the WooCommerce components Etch does not ship — product page, catalogue and filters, search, cart, mini cart, checkout and the customer's account — as real Etch components you place, style and bind like any other.
WooCommerce keeps doing the work: its cart, its taxes, its payment gateways and the plugins that extend them. Only the markup changes, so a shop styled with Fancy Etch keeps working the day after a WooCommerce update.
And Etch itself, a little better
The plugin also improves the builder you work in: a @keyframes written inside a
class's CSS actually runs, the structure panel follows what you select and can
close everything else, a cut-short name shows whole on hover, the Content field
grows with its text, and the CSS toolbar can be reached with a mouse. One switch
each, on every page Etch builds, shop or no shop — Etch improvements.
What you'll find in these docs
- Getting Started — what Fancy Etch needs to run (Prerequisites), the free variable framework it ships with (Fancy Framework), the premium alternative (ACSS 4), and how to paste your first template (Quickstart).
- Etch improvements — what the plugin adds to the builder itself, and the switch and filter behind each one.
- WooCommerce — every shop component, grouped the way the builder panel groups them, with its options, its CSS variables and step-by-step guides (Overview).
- Advanced Components — individual components with their full props, CSS variables, and behavior documented. Accordion is the most complete reference right now; the rest are being filled in as they're re-verified.
- Advanced Layouts — full section/page layouts built from several components together.
- Theme — the shared design-token system (spacing, type scale, color, responsive breakpoints) every component reads from.
This site replaces the previous docs.fancyetch.com content with real, verified documentation instead of placeholder pages — it grows one component at a time as each one is built and tested, rather than all at once.