Pullquote

A pullquote highlights a key quote or statement in the article body. It renders as large, centered serif text with subtle top/bottom borders.

Syntax

<div data-nama="pullquote" class="nama-pullquote">
  Quote text here
</div>

With Attribution

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

Visual editor durability

The <cite> child element is the durable way to add attribution — it survives the visual editor. The data-attribution is kept for backward compatibility but will be stripped by the visual editor. Always include both.

XL Variant

<div data-nama="pullquote" class="nama-pullquote nama-size-xl" data-size="xl">
  Larger quote text
</div>

Settings

Attribute	Mirror class	Values	Default	Description
data-attribution	—	Any string	(none)	Small text below the quote (use <cite> element too)
data-size	.nama-size-xl	xl	(standard)	Larger font size variant

Visual Editor Durability

Shopify’s visual editor strips data-* attributes but keeps class attributes. To protect against this:

1. Always include class="nama-pullquote" alongside data-nama="pullquote"
2. Add mirror classes for variants: class="nama-pullquote nama-size-xl" alongside data-size="xl"
3. Use <cite class="nama-pullquote-attribution"> for attribution text — don’t rely solely on data-attribution

Notes

• Always edit articles in HTML view (<> button) — never the visual/WYSIWYG view.
• If the visual editor accidentally strips data attributes, the mirror classes keep styling working.