Shopify + Pictify

Generate product images, social cards, and promo graphics for Shopify.

E-COMMERCE · 20-MINUTE SETUP

About Integration

The Pictify Shopify integration helps store owners automate product image generation, create consistent social cards for product shares, and generate promotional graphics for sales and campaigns.

Start on Free Read the docs
Pictify Shopify

Trigger in any app → render in Pictify → use the URL

01

Key Capabilities

  • Product webhook integration
  • Liquid template support
  • Metafield storage
  • App embed blocks
02

Common Use Cases

  • Product created Render a product social card Store the URL in a product metafield USE TEMPLATE
  • Sale starts Render promo graphics Post them to your social accounts USE TEMPLATE
  • Product updated Re-render the product badge The theme reads the new URL from the metafield USE TEMPLATE
03

Integration Guide

ABOUT 20 MINUTES 8 STEPS

  1. Create Metafield for Generated Images

    Add a metafield to products to store the generated image URL.

    CODE 
    1. Go to Shopify Admin → Settings → Custom data
2. Click "Products" under Metafield definitions
3. Click "Add definition"
4. Configure:
   - Name: Generated OG Image
   - Namespace and key: custom.og_image
   - Type: URL
5. Save

// This metafield will store the Pictify-generated image URL

    TIP Use a consistent namespace (like "custom" or "pictify") for all your metafields.

  2. Set Up Webhook in Shopify

    Create a webhook that fires when products are created or updated.

    CODE 
    1. Go to Shopify Admin → Settings → Notifications
2. Scroll to "Webhooks" section
3. Click "Create webhook"
4. Configure:
   - Event: "Product creation" (add another for "Product update")
   - Format: JSON
   - URL: https://api.pictify.io/webhooks/shopify/YOUR_WEBHOOK_ID
5. Click "Save"

// Get your Webhook ID from:
// Pictify Dashboard → Integrations → Webhooks → Create Webhook

    TIP Create separate webhooks for "Product creation" and "Product update" events.

  3. Configure Pictify Webhook

    Set up variable mapping to use Shopify product data in your template.

    CODE 
    In Pictify Dashboard → Webhooks → Configure:

// Shopify sends this product payload:
{
  "id": 123456789,
  "title": "Classic T-Shirt",
  "body_html": "<p>Product description</p>",
  "vendor": "Your Brand",
  "product_type": "Apparel",
  "handle": "classic-t-shirt",
  "images": [
    { "src": "https://cdn.shopify.com/..." }
  ],
  "variants": [
    { "price": "29.99", "compare_at_price": "39.99" }
  ]
}

// Map to template variables:
title       → title
description → body_html (will strip HTML)
price       → variants[0].price
sale_price  → variants[0].compare_at_price
image       → images[0].src
brand       → vendor

  4. Enable Metafield Update

    Configure Pictify to write the generated image back to Shopify.

    CODE 
    In Pictify webhook settings → Response Action:

1. Enable "Update Source System"
2. Platform: Shopify
3. Enter Shopify credentials:
   - Store URL: your-store.myshopify.com
   - Admin API Access Token: (see below)

4. Configure update:
   - Resource: Product Metafield
   - Namespace: custom
   - Key: og_image
   - Value: {{imageUrl}}

// To get Admin API Access Token:
1. Shopify Admin → Apps → Develop apps
2. Create or select an app
3. Configure Admin API scopes:
   - read_products, write_products
4. Install app and copy the token

    TIP Store API tokens securely. Never expose them in client-side code.

  5. Update Theme to Use OG Image

    Modify your Shopify theme to use the generated image for social sharing.

    CODE 
    Edit theme file: theme.liquid or product.liquid

Find the <head> section and add/modify OG tags:

{% if product.metafields.custom.og_image %}
  <meta property="og:image" content="{{ product.metafields.custom.og_image }}" />
{% elsif product.featured_image %}
  <meta property="og:image" content="{{ product.featured_image | image_url: width: 1200 }}" />
{% endif %}
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
{% if product.metafields.custom.og_image %}
  <meta name="twitter:image" content="{{ product.metafields.custom.og_image }}" />
{% endif %}

// Save and preview changes before publishing

    TIP Use Shopify's theme editor preview to test before going live.

  6. Alternative: Use Shopify Flow

    For Shopify Plus stores, use Flow for more control.

    CODE 
    1. Go to Shopify Admin → Apps → Flow
2. Create new workflow
3. Trigger: "Product created"
4. Add Action: "Send HTTP request"
   - Method: POST
   - URL: https://api.pictify.io/v1/render
   - Headers:
     Authorization: Bearer YOUR_PICTIFY_API_KEY
     Content-Type: application/json
   - Body:
     {
       "templateId": "your-template-id",
       "variables": {
         "title": "{{ product.title }}",
         "price": "{{ product.variants[0].price }}",
         "image": "{{ product.featured_image.src }}"
       }
     }

5. Add Action: "Update product metafield"
   - Use the imageUrl from the previous step

    TIP Shopify Flow is available on Shopify Plus plans only.

  7. Bulk Generate for Existing Products

    Generate images for products that existed before the integration.

    CODE 
    // Option 1: Use Pictify's bulk generator
1. Go to Pictify Dashboard → Bulk Generate
2. Select "Shopify" as source
3. Connect your store
4. Select products to process
5. Choose your template
6. Click "Generate All"

// Option 2: Use a script (requires coding)
// Export products from Shopify as CSV
// Process with Pictify API
// Import metafields back to Shopify

// Option 3: Use Matrixify app
// Export products → Add to spreadsheet →
// Generate images → Import with metafields

    TIP Process in batches of 50-100 to avoid rate limits.

  8. Test the Integration

    Create a test product and verify the image is generated.

    CODE 
    1. Create a new product in Shopify
2. Add title, description, price, and image
3. Save the product
4. Wait 30-60 seconds
5. Check the product metafields:
   - Product → Metafields → custom.og_image
6. Share the product URL on social media to verify

// Debug tools:
- Facebook: developers.facebook.com/tools/debug/
- Twitter: cards-dev.twitter.com/validator
- LinkedIn: linkedin.com/post-inspector/

    TIP Check Pictify webhook logs if the image doesn't appear.

ONE API KEY

Ready to build with Shopify?

Grab a free API key, pick a template, and your first render comes back in about 20 minutes.

Start on Free OR OPEN THE SHOPIFY DOCS →

OTHER INTEGRATIONS

ALL INTEGRATIONS →
AUTOMATION Zapier Connect Pictify to 5,000+ apps without code using Zapier automations. AUTOMATION Make (Integromat) Build advanced visual automation workflows with Make scenarios. AUTOMATION n8n Self-hosted workflow automation with full control and privacy. PLATFORM WordPress Auto-generate featured images and OG graphics for WordPress.