Content Commerce

Content Commerce

Overview

Content commerce bridges editorial content — blog posts, buying guides, lookbooks — with direct product purchasing, capturing high-intent organic traffic and shortening the path from discovery to purchase. Shopify and WooCommerce both have built-in blog functionality where you can link products directly; headless setups require a CMS integration. The key goal is making it easy for your editorial team to embed products without engineering help, and tracking which content pieces actually drive revenue.

When to Use This Skill

• When a blog drives significant organic traffic but contributes little to revenue
• When editorial team needs a no-code way to embed products inside articles
• When implementing SEO-optimized buying guides that rank for "best [product category]" queries
• When building a lookbook or collection page with editorial text and shoppable product grids
• When needing to track which content pieces drive the most revenue

Core Instructions

Step 1: Determine the merchant's platform and content setup

Step 2: Set up shoppable content

---

Shopify

Option A: Shopify Blog with native product links (free, simple)

1. Go to Shopify Admin → Online Store → Blog Posts 2. In any blog post, highlight text and click the link icon to link to a product page (e.g., /products/product-handle) 3. To embed a product image with a buy button, use a section or block in your theme:

• Go to Online Store → Themes → Customize
• On the blog post template, add a "Product" or "Featured Product" section and configure it for each post

4. Limitations: no inline product cards; products appear as separate sections above/below the article body

Option B: Shogun or PageFly (recommended for buying guides)

1. Install Shogun or PageFly from the Shopify App Store 2. Create a new landing page for your buying guide or lookbook 3. Drag and drop Product Card elements directly into the editorial content 4. Each product card shows image, price, and "Add to Cart" button with live Shopify inventory 5. Publish the page and link to it from your blog or navigation

Option C: Instant (previously known as EcomSend) — for in-blog product embeds

1. Install the Instant page builder app 2. Use the blog post editor to add product cards inline within article text

---

WooCommerce

Using Gutenberg product blocks (built-in with WooCommerce):

1. Open any WordPress post in the Gutenberg editor 2. Click the + block button and search for "Products" 3. Insert a Products (Beta) block or Hand-picked Products block 4. Search for products by name and select them — a product grid with prices and "Add to Cart" appears inline in the article 5. For a single inline product card, use the Single Product block

Using WooCommerce Shortcodes (classic editor):

Insert a product anywhere in article text:

[product id="123"]
[products ids="123,456,789" columns="3"]
[product_page id="123"]

---

BigCommerce

1. For BigCommerce's built-in blog, you are limited to manual product links — no native product embed blocks 2. Recommended: run WordPress on a subdomain (blog.yourstore.com) with the BigCommerce for WordPress plugin 3. This gives you Gutenberg product blocks (same as WooCommerce setup above) while the main store runs on BigCommerce

---

Custom / Headless

For headless setups with Contentful, Sanity, or Prismic, build a product embed content type:

Sanity schema for a product embed:

// schemas/productEmbed.ts
export const productEmbedType = {
  name: 'productEmbed',
  title: 'Product Embed',
  type: 'object',
  fields: [
    {
      name: 'productId',
      title: 'Product ID',
      type: 'string',
      description: 'Shopify/BigCommerce product ID or handle',
    },
    {
      name: 'displayStyle',
      title: 'Display Style',
      type: 'string',
      options: { list: ['card', 'inline', 'full'] },
      initialValue: 'card',
    },
    {
      name: 'ctaText',
      title: 'CTA Text',
      type: 'string',
      initialValue: 'Shop Now',
    },
  ],
};

React component that fetches live price and inventory from the Storefront API:

export function ProductEmbed({ productId, displayStyle, ctaText, articleSlug }: ProductEmbedProps) {
  const [product, setProduct] = useState<Product | null>(null);

  useEffect(() => {
    fetch(`/api/products/${productId}?fields=name,price,images,slug,inStock`)
      .then(r => r.json())
      .then(setProduct);
  }, [productId]);

  if (!product) return <div className="product-embed-skeleton" />;

  return (
    <div className={`product-embed product-embed--${displayStyle}`}>
      <img src={product.images[0]?.url} alt={product.name} />
      <div className="product-embed__info">
        <h3>{product.name}</h3>
        <p>${(product.priceInCents / 100).toFixed(2)}</p>
        {!product.inStock && <span>Out of stock</span>}
      </div>
      <a href={`/products/${product.slug}?utm_source=content&utm_campaign=${articleSlug}`}>
        {ctaText}
      </a>
    </div>
  );
}

Step 3: Add UTM attribution to all content links

Append UTM parameters to every product link within content so you can track which articles drive revenue in Google Analytics:

• For Shopify/WooCommerce native embeds: add ?utm_source=content&utm_medium=blog&utm_campaign=ARTICLE-SLUG to product URLs manually or via a theme setting
• For Shogun/PageFly: each button has a URL field — include UTM params there
• For headless: build UTM parameters into the product embed component automatically using the article slug

Step 4: Track content-driven revenue

In Google Analytics 4: 1. Go to Reports → Acquisition → Traffic Acquisition 2. Filter by Session source = content to see all orders attributed to blog content 3. For more detail: go to Explore → Funnel Exploration and filter by utm_medium = blog

In Shopify Analytics: 1. Go to Analytics → Reports → Sales by traffic source 2. Filter by source to see UTM-tagged content traffic

Best Practices

• Fetch product prices live — never hardcode prices in CMS content; prices change and stale prices erode trust
• Show "Out of Stock" state in product embeds — a broken-looking card hurts conversion more than no card at all
• Place product embeds high in the article — data shows most readers don't scroll past 60% of an article; embed the first product recommendation within the first 400 words
• Use UTM `utm_content` = product slug — this lets you see which specific product in an article drove the conversion, not just which article
• Give editorial team a product search tool — in Shopify, editors can search products by name when building pages in Shogun/PageFly; do not require them to know product IDs

Common Pitfalls

Related Skills

• @social-commerce
• @influencer-tracking
• @ecommerce-seo
• @email-marketing-automation
• @marketing-attribution-dashboard

Structured Data for a Product-Rich Buying Guide

Problem/Feature Description

The SEO team at a home goods retailer has published a "Best Ergonomic Office Chairs 2026" buying guide — a long-form article that recommends five specific chairs, each with pricing and stock status. The team wants Google to show this article as a rich result in search, specifically the kind that surfaces an article alongside a product carousel in Google Search. Without structured data, the page is treated as plain editorial content and misses these high-value placements.

Your task is to write a TypeScript function that generates the correct JSON-LD structured data for this type of article. The data will be injected into the page's <head> as a <script type="application/ld+json"> block. The structured data must contain all the information Google needs to understand both the article and the products it features.

Output Specification

Write a TypeScript file schema.ts that exports a function buildArticleSchema(article, products) which returns a valid JSON-LD object. Also write a schema.test.ts file (or a plain schema_output.json) that calls the function with realistic sample data and writes (or logs/exports) the result so the output can be inspected.

Use the following types as your starting point — do not modify them, but you may import or copy them:

interface Article {
  id: string;
  slug: string;
  title: string;
  body: string;
  featuredProductIds: string[];
  categories: string[];
  publishedAt: Date;
  updatedAt: Date;
}

interface Product {
  id: string;
  name: string;
  slug: string;
  images: { url: string }[];
  priceInCents: number;
  inventory: number;
}

The STORE_NAME is "ErgoHome" and the STORE_URL is "https://ergohome.example.com". Hardcode these or use them as constants.

Produce a file schema_output.json containing the result of calling buildArticleSchema with a sample article (slug: "best-ergonomic-chairs-2026", title: "Best Ergonomic Office Chairs 2026") and at least 3 sample products. Make the sample data realistic.

Shoppable Product Widget for a Lifestyle Blog

Problem/Feature Description

A direct-to-consumer lifestyle brand runs a content-heavy blog on a Next.js headless frontend, separate from their Shopify storefront. Writers frequently mention specific products in articles — running gear reviews, gift guides, seasonal lookbooks — and the marketing team wants those mentions to become purchasable product cards embedded directly in the article body. Readers should see a product image, name, price, and a call-to-action button without leaving the article.

The marketing team also needs to understand which specific articles and which specific in-article product placements are driving purchases. This data will feed a monthly content ROI report. Without knowing which embedded product within which article a reader clicked before buying, the team can only attribute revenue to the whole site, not to individual pieces of content.

Build a React TypeScript component called ProductEmbed that can be dropped into an article renderer. The component should handle all the product data fetching, display, and analytics concerns.

Output Specification

Create the following files:

• components/ProductEmbed.tsx — the React component
• components/ProductEmbed.types.ts — the TypeScript interfaces/types it uses (or inline them in the component file)

The component must:

• Accept at minimum productId, displayStyle, ctaText, and one more prop needed for revenue attribution
• Fetch product data from /api/products/{productId}?fields=name,price,images,slug,inStock
• Show an appropriate loading state while data is being fetched
• Render the product image, name, price, and a CTA button
• Handle the case where a product is out of stock
• Send an analytics event when the CTA is clicked

The CTA button should navigate to the product page. Include the articleId in a way that allows the analytics team to join article clicks to orders.

Write a short IMPLEMENTATION_NOTES.md explaining any attribution decisions you made.

Content Revenue Attribution System

Problem/Feature Description

A mid-size outdoor gear retailer publishes buying guides and gear reviews that attract significant organic search traffic. The head of content wants to prove that the editorial team drives real revenue, not just pageviews. Currently, when a reader clicks a product in a buying guide and later completes a purchase, there is no way to tie that order back to the article that started the journey — all that revenue is lumped into "direct" or "organic" in the existing analytics dashboards.

The engineering team needs to build the tracking layer that connects articles to orders. When a reader clicks a product link in an article, specific tracking parameters must be passed along in the URL so that when an order is placed, the attribution can be captured and stored. There is also a complication: the same customer may have come from a Google Ads campaign earlier in the same session, and the team does not want paid search spend to be eclipsed or confused by content attribution — each channel should receive credit according to a defined priority.

Your task is to implement the TypeScript functions that power this attribution pipeline, and to write a SQL query that the data team can use to report on content-driven revenue.

Output Specification

Create a file attribution.ts containing:

1. A function buildContentProductUrl(product, article) that generates a product URL with tracking parameters embedded. The URL should uniquely identify both the article and the specific product placement.

2. A function captureOrderAttribution(orderId, utmParams) that stores attribution data for an order (you may use a mock db object — just show the call with all necessary fields).

3. A function (or constant/comment) resolveAttributionSource(touchpoints) that documents or implements the priority logic for determining which channel gets credit for an order when multiple channels are present in the customer journey.

Create a file attribution_report.sql containing a SQL query that reports content-driven revenue per article over the last 90 days, showing article slug, number of orders, total revenue, and average order value.

Write a short ATTRIBUTION_NOTES.md explaining how the URL parameters connect to the order attribution record.