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

Platform	Content Tool	Shoppable Embedding Approach
Shopify	Shopify Blog (built-in)	Use Shogun or PageFly page builder to embed product cards; or use Shopify's native blog with manual product links
WooCommerce	WordPress native blog	Use WooCommerce product blocks (Gutenberg) or WooCommerce Shortcodes to embed products inline
BigCommerce	BigCommerce Blog or WordPress	WordPress: use WooCommerce Shortcodes or a product block plugin; BigCommerce blog: manual product linking only
Headless / Custom CMS	Contentful, Sanity, Prismic	Build a product embed component using the CMS's custom content type system and Storefront API

Step 2: Set up shoppable content

Shopify

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

Go to Shopify Admin → Online Store → Blog Posts
In any blog post, highlight text and click the link icon to link to a product page (e.g., /products/product-handle)
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
Limitations: no inline product cards; products appear as separate sections above/below the article body

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

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

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

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

WooCommerce

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

Open any WordPress post in the Gutenberg editor
Click the + block button and search for "Products"
Insert a Products (Beta) block or Hand-picked Products block
Search for products by name and select them — a product grid with prices and "Add to Cart" appears inline in the article
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

For BigCommerce's built-in blog, you are limited to manual product links — no native product embed blocks
Recommended: run WordPress on a subdomain (blog.yourstore.com) with the BigCommerce for WordPress plugin
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:

Go to Reports → Acquisition → Traffic Acquisition
Filter by Session source = content to see all orders attributed to blog content
For more detail: go to Explore → Funnel Exploration and filter by utm_medium = blog

In Shopify Analytics:

Go to Analytics → Reports → Sales by traffic source
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

Problem	Solution
Product prices in articles are stale	Always fetch prices from the storefront API at render time; never embed prices as static CMS content
Out-of-stock products remain embedded in live articles	Add an inventory check in your product embed component; show "notify me" or a related product instead
CMS editors can't find products to embed	Use Shogun/PageFly's product search widget; for headless, build a product picker that queries the Storefront API
Content attribution double-counts — same order attributed to both content and email	In GA4, use last non-direct click as the attribution model, or manually review multi-touch paths in the Path Exploration report
Buying guide SEO titles not ranking	Ensure article titles match the exact query format ("Best [Product Type] for [Use Case] in [Year]") and include product schema.org markup

Related Skills

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

content-commerce