PICTIFY
Shopify

Shopify
+ Pictify

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

E-Commerce

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.

Key Capabilities

Product webhook integration

Liquid template support

Metafield storage

App embed blocks

Common Use Cases

Product social cards

Sale promo graphics

Dynamic product badges

Integration Guide

20 minutes

Prerequisites

  • Shopify store (any plan)
  • A Pictify account with an API key
  • A template created in Pictify
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
!

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
!

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
!

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
!

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
!

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
!

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/
!

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

Ready to build with Shopify?

Get your API key in seconds and start generating images programmatically.

View Documentation Start For Free