WYSIWYG Blocks Overview

These are copy-paste HTML snippets that editors drop into the article body via the Shopify WYSIWYG editor (or the HTML view). They use data-nama="..." attributes to trigger styling and behavior.

How They Work

Simple blocks (lead-in, pullquote, callout, narrow-image) are pure CSS. They render instantly with no JavaScript.
Complex blocks (ingredient-grid, shop-article) use JavaScript to inject images or fetch product data. They start hidden and fade in once ready.
Do not use custom HTML elements (<nama-*>) — Shopify strips them on save.

Shopify’s visual/WYSIWYG editor strips data-* attributes when you edit in visual mode. To protect against this, every block uses both a data-nama attribute and a mirror class:

<div data-nama="pullquote" class="nama-pullquote">

Style variants also need mirror classes:

<div data-nama="callout" class="nama-callout nama-size-sm" data-size="sm">

Content attributes like data-attribution should use a child element as the durable version:

<div data-nama="pullquote" class="nama-pullquote" data-attribution="— Author">
  Quote text
  <cite class="nama-pullquote-attribution">— Author</cite>
</div>

API-driven blocks (data-handle) should use a .nama-handle link as the durable version:

<div data-nama="shop-article" class="nama-shop-article" data-handle="nama-j2-cold-press-juicer">
  <a class="nama-handle" href="/products/nama-j2-cold-press-juicer">Nama J2</a>
</div>

The link is hidden on the live site. JS/Liquid reads the handle from data-handle first, then falls back to the last path segment of the .nama-handle href.

Always edit articles in HTML view (<> button). If the visual editor accidentally strips data attributes, the mirror classes and fallback links keep blocks working.

Quick Reference

Block	Type	Syntax
Lead-in	CSS	`<div data-nama="lead-in" class="nama-lead-in">`
Pullquote	CSS	`<div data-nama="pullquote" class="nama-pullquote">`
Callouts & Popout	CSS	`<div data-nama="callout" class="nama-callout">` / `<div data-nama="popout" class="nama-popout">`
Inset Callout	CSS	`<div data-nama="inset-callout" class="nama-inset-callout">`
Inline Q&A	CSS	`<div data-nama="inline-qa" class="nama-inline-qa">`
Accordion	CSS	`<div data-nama="accordion" class="nama-accordion">`
Data Table	CSS	`<div data-nama="table" class="nama-table">`
Comparison Table	CSS	`<div data-nama="comparison" class="nama-comparison">`
Content Cards	CSS	`<div data-nama="content-card" class="nama-content-card">`
Recipe	CSS/Liquid	`<div data-nama="recipe" class="nama-recipe">`
Text Image Split	CSS	`<div data-nama="text-image" class="nama-text-image">`
Image Lockups	CSS	`<div data-nama="image-lockup" class="nama-image-lockup">`
Interview	CSS	`<div data-nama="interview" class="nama-interview">`
Ingredient List	CSS	`<div data-nama="ingredient-list" class="nama-ingredient-list">`
Ingredient Grid	JS	`<div data-nama="ingredient-grid" class="nama-ingredient-grid">`
Buttons	CSS	`<div data-nama="buttons" class="nama-buttons">`
Shop the Article	JS	`<div data-nama="shop-article" class="nama-shop-article">`

Demo Article

There is a hidden article called “WYSIWYG Block Demo” in Fresh Press that demonstrates every block. Preview it from the Shopify admin to see them all rendered live.

Tips for Editors

Always use the HTML view (the <> button) in the WYSIWYG to paste block markup.
After pasting, switch back to the visual editor to verify the structure looks reasonable (divs with attributes visible).
Blocks won’t preview in the editor — they only render on the live site.
Don’t nest blocks inside each other unless the docs say it’s supported.