Shop the Article

A JS-enhanced block that renders a product card inline in the article body. Pass a product handle and the block fetches the product data and renders a card with image, title, price, description, and a link to the product.

Syntax

<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 Cold Press Juicer</a>
</div>

The <a class="nama-handle"> link is a durable fallback. Shopify’s visual editor strips data-* attributes but leaves links intact. The JavaScript reads the handle from data-handle first, then falls back to parsing the last path segment from the .nama-handle link’s href. The link is hidden on the live site via CSS.

Always include the fallback link

If an editor opens the article in visual mode, data-handle will be stripped and the block will break. The .nama-handle link is the safety net — always include it.

How It Works

This is a JS-enhanced block. JavaScript reads the product handle (from data-handle or the .nama-handle link), fetches product data via /products/{handle}.js, and injects the product card HTML. The block starts hidden (opacity: 0) and fades in once loaded.

Settings

Attribute	Description
data-handle	The Shopify product handle (e.g. nama-j2-cold-press-juicer). May be stripped by visual editor.
.nama-handle link	Fallback — href must point to the product URL (e.g. /products/nama-j2-cold-press-juicer). Link text is for editor readability only.

Notes

• The block renders nothing in the Shopify editor preview — only on the live site.
• The product card includes: image (248×314px), product title, price, and description.
• On mobile, the card stacks vertically.
• Always include class="nama-shop-article" for visual editor durability.
• The .nama-handle link is hidden via display: none — it’s purely a data carrier.