Skip to main content
Web Stories for WordPress includes built-in shopping capabilities that allow you to tag products in your stories and connect with e-commerce platforms.

​
Overview

The shopping feature enables you to:
  • Tag products within story pages
  • Connect to WooCommerce or Shopify stores
  • Display product information with pricing
  • Link directly to product pages
  • Include product schema in structured data

​
Supported Platforms

The plugin includes native integrations for popular e-commerce platforms (from includes/Shopping/Shopping_Vendors.php:90-114):

WooCommerce

Native WordPress e-commerce integration. Automatically syncs your WooCommerce product catalog with the story editor.

Shopify

Connect your Shopify store to pull product data. Requires Shopify API credentials.

​
Setting Up Shopping

​
WooCommerce Integration

  1. Install and activate WooCommerce plugin
  2. Set up your WooCommerce store and add products
  3. Navigate to Stories > Settings > Shopping
  4. Select WooCommerce as your shopping provider
  5. Save settings
WooCommerce products are automatically available in the story editor after configuration. No additional API setup required.

​
Shopify Integration

  1. Log in to your Shopify admin panel
  2. Go to Apps > Develop apps (or create a private app)
  3. Create a new app with Storefront API access
  4. Copy your Storefront API token
  5. In WordPress, go to Stories > Settings > Shopping
  6. Select Shopify as your shopping provider
  7. Enter your Shopify store URL (e.g., yourstore.myshopify.com)
  8. Enter your Storefront API token
  9. Save settings
Keep your Shopify API credentials secure. Never share them publicly or commit them to version control.

​
Adding Products to Stories

​
Using the Product Picker

  1. Open a story in the editor
  2. Navigate to the page where you want to add a product
  3. Click the Shopping icon in the left toolbar
  4. Search for products from your connected store
  5. Select a product to add it to the page
  6. Position and style the product tag as desired
  7. Publish your story

​
Product Tag Options

Customize product display:
  • Product image: Show/hide product thumbnail
  • Product title: Display product name
  • Price: Show current price
  • Brand: Display brand name (if available)
  • Link: Direct link to product page
  • Background color: Tag background
  • Text color: Label text color
  • Border radius: Rounded corners
  • Shadow: Drop shadow effect
  • Position: Place anywhere on the page

​
Product Data Structure

Products are stored as structured data in story metadata (from includes/Shopping/Product.php:56-369).

​
Product Schema

{
  "productId": "12345",
  "productTitle": "Red Running Shoes",
  "productBrand": "Nike",
  "productPrice": 99.99,
  "productPriceCurrency": "USD",
  "productUrl": "https://example.com/products/red-running-shoes",
  "productDetails": "Comfortable running shoes with breathable mesh upper",
  "productImages": [
    {
      "url": "https://example.com/images/shoe-1.jpg",
      "alt": "Red Nike running shoes"
    }
  ],
  "aggregateRating": {
    "ratingValue": 4.5,
    "reviewCount": 234,
    "reviewUrl": "https://example.com/products/red-running-shoes#reviews"
  }
}

​
Storage

Product data is stored in post meta (from includes/Shopping/Product_Meta.php:44): 
// Products are stored as serialized JSON
add_post_meta(
    $story_id,
    'web_stories_products',
    $products_array,
    true
);

​
SEO and Structured Data

Products tagged in stories automatically generate rich schema.org metadata for improved SEO (from includes/Discovery.php:385-429).

​
Product Schema Output

{
  "@context": "http://schema.org",
  "mainEntity": {
    "@type": "ItemList",
    "numberOfItems": "3",
    "itemListElement": [
      {
        "@type": "Product",
        "productID": "12345",
        "name": "Red Running Shoes",
        "brand": "Nike",
        "description": "Comfortable running shoes",
        "url": "https://example.com/products/red-running-shoes",
        "image": "https://example.com/images/shoe-1.jpg",
        "offers": {
          "@type": "Offer",
          "price": "99.99",
          "priceCurrency": "USD"
        },
        "aggregateRating": {
          "@type": "AggregateRating",
          "ratingValue": 4.5,
          "reviewCount": 234,
          "url": "https://example.com/products/red-running-shoes#reviews"
        }
      }
    ]
  }
}
This structured data helps Google and other search engines understand the products featured in your stories.

​
Custom Shopping Integration

Developers can add custom shopping vendors using the plugin’s vendor system.

​
Register Custom Vendor

add_filter('web_stories_shopping_vendors', function($vendors) {
    $vendors['custom_platform'] = [
        'label' => 'My E-commerce Platform',
        'class' => MyCustom\Product_Query::class,
    ];
    
    return $vendors;
});

​
Implement Product Query Interface

Create a class that implements the Product_Query interface: 
namespace MyCustom;

use Google\Web_Stories\Interfaces\Product_Query;
use Google\Web_Stories\Shopping\Product;

class Product_Query implements Product_Query {
    
    public function get_search_results(string $query, int $page = 1): array {
        // Search your product database
        $results = $this->search_products($query, $page);
        
        // Convert to Product objects
        return array_map(function($item) {
            return new Product([
                'id'             => $item['id'],
                'title'          => $item['name'],
                'brand'          => $item['brand'],
                'price'          => (float) $item['price'],
                'price_currency' => 'USD',
                'url'            => $item['permalink'],
                'images'         => [[
                    'url' => $item['image'],
                    'alt' => $item['name']
                ]],
                'details'        => $item['description'],
            ]);
        }, $results);
    }
    
    public function get_product_by_id(string $id): ?Product {
        // Fetch single product
        $item = $this->fetch_product($id);
        
        if (!$item) {
            return null;
        }
        
        return new Product([
            'id'             => $item['id'],
            'title'          => $item['name'],
            'brand'          => $item['brand'],
            'price'          => (float) $item['price'],
            'price_currency' => 'USD',
            'url'            => $item['permalink'],
            'images'         => [[
                'url' => $item['image'],
                'alt' => $item['name']
            ]],
            'details'        => $item['description'],
        ]);
    }
}

​
Product Analytics

Product interactions are tracked through the analytics integration:

​
Tracked Events

  • Product view: When a story page with products is viewed
  • Product click: When user clicks on a product tag
  • Outbound link: When user clicks through to product page

​
Custom Tracking

// Track product interactions
amp-analytics.on('click', (event) => {
  if (event.target.matches('[data-product-id]')) {
    const productId = event.target.dataset.productId;
    
    // Send to analytics
    gtag('event', 'product_click', {
      'product_id': productId,
      'story_id': storyId,
    });
  }
});

​
Best Practices

  • Feature products relevant to story content
  • Limit to 2-3 products per story page
  • Choose products with high-quality images
  • Ensure product links are working
  • Update prices regularly
  • Position product tags strategically
  • Avoid covering important content
  • Use consistent styling across stories
  • Ensure tags are readable on all backgrounds
  • Test on mobile devices
  • Add clear call-to-action
  • Include product benefits in story
  • Show products in context/use
  • Provide adequate product information
  • Make links obviously clickable
  • Optimize product images
  • Minimize number of products per page
  • Use lazy loading for product data
  • Cache product information
  • Monitor API rate limits

​
Troubleshooting

  1. Verify shopping integration is configured correctly
  2. Check that your e-commerce platform has published products
  3. Ensure API credentials are valid (Shopify)
  4. Check for PHP errors in debug log
  5. Try re-saving shopping settings
  1. Products are cached for performance
  2. Clear WordPress object cache
  3. Update story to refresh product data
  4. Check product still exists in source system
  5. Verify API connection is working
  1. Verify store URL format (yourstore.myshopify.com)
  2. Check API token has correct permissions
  3. Ensure Storefront API is enabled
  4. Test API credentials in Shopify admin
  5. Check for SSL/TLS connection issues
  1. Ensure products are published (not draft)
  2. Check products aren’t hidden from catalog
  3. Verify WooCommerce is active and up to date
  4. Clear WooCommerce transients
  5. Check product visibility settings
Monitor product performance through Google Analytics: 
add_filter('web_stories_product_url', function($url, $product) {
    // Add UTM parameters for tracking
    return add_query_arg([
        'utm_source'   => 'web-story',
        'utm_medium'   => 'product-tag',
        'utm_campaign' => 'story-shopping',
        'utm_content'  => $product->get_id(),
    ], $url);
}, 10, 2);

Build docs developers (and LLMs) love

Get started for freeTalk to us