How to Create Product Page Thumbnails from a Shopify Catalog in n8n

To create product page thumbnails from a Shopify catalog in n8n, fetch product media through Shopify’s GraphQL Admin API, follow every pagination cursor, transform each source image to the dimensions and crop your theme expects, then store or associate the result. For a one-time run, start with a manual trigger; use a schedule or webhook when you need ongoing updates. Test a few products before processing the whole catalog.

Shopify recommends the GraphQL Admin API for managing product and collection media. Product images are media hosted on Shopify’s CDN, and a MediaImage exposes processed image data and access to its original source file. [Shopify media guide]

1. Decide what “thumbnail” means for your storefront

There is no universal thumbnail size or crop policy. Inspect the actual product-card image slots in your theme and decide:

Target width and height in pixels.
Whether to preserve the whole image with padding or crop to fill the slot.
Output format, such as JPEG, PNG, or WebP, based on your storefront requirements.
Whether to use Shopify’s processed CDN image data or create and upload a separate image.
Whether thumbnails belong to the product, a particular variant, or an external destination such as a CDN or storage bucket.

Keep the original source URL and product/variant identifiers in the workflow data. Avoid overwriting originals during the first run. If the theme already requests appropriately sized Shopify CDN images, generating separate files may be unnecessary; verify the rendered storefront before adding an upload step.

2. Set up Shopify access in n8n

Create or select a Shopify app and configure the access scopes needed for the actual operations. Reading product data requires product read access; uploading or associating media needs the scopes required by the corresponding media operations.
In n8n, add Shopify credentials and use the Shopify node when its available product operations cover your needs. The integration provides product Get and Get Many operations. For custom fields, explicit GraphQL queries, or cursor control, use an HTTP Request or GraphQL connection. See n8n’s Shopify credential notes and verify operation names in your installed n8n version.
Choose a Manual Trigger for a backfill. For ongoing catalog changes, choose a schedule or webhook trigger appropriate to your integration. These are workflow design choices; configure and validate the trigger for your store.

Do not copy a broad scope list without checking what the workflow does. n8n’s credential documentation describes scopes used by full Shopify node functionality, but the narrowest adequate access depends on the nodes and GraphQL mutations you actually use.

3. Fetch products and media, including every page

A basic workflow is: trigger → fetch a page of products and their media references → split products or images into individual items → transform image → optionally upload/associate → record outcome. For a small store, the Shopify Get Many operation may be enough. For a catalog-wide run, confirm how the installed node paginates; do not assume one response includes the entire catalog.

Shopify’s GraphQL Admin products query supports cursor pagination. Request a page of products and retain pageInfo.endCursor and pageInfo.hasNextPage. Continue with the returned cursor until hasNextPage is false. The exact API version is chosen in your Shopify endpoint and should be current when you publish or deploy the workflow.

query ProductsPage($first: Int!, $after: String) {
  products(first: $first, after: $after) {
    nodes {
      id
      title
      media(first: 20) {
        nodes {
          __typename
          ... on MediaImage {
            id
            status
            image {
              url
              altText
              width
              height
            }
          }
        }
        pageInfo {
          hasNextPage
          endCursor
        }
      }
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

This query illustrates product-page pagination and retrieves a bounded number of media items per product. If individual products can have more media than the requested page size, also paginate each product’s media connection. Handle non-image media by checking __typename; do not treat every media item as a downloadable image. A media object’s status can indicate processing state, so wait and re-check before using newly uploaded media that is not ready.

In n8n, maintain a cursor value between requests. A loop can be built with an HTTP Request node for GraphQL, an IF node on hasNextPage, and a connection that sends endCursor into the next request. Alternatively, use a loop or pagination feature available in your installed node version. An n8n template demonstrates a cursor loop, but its description notes that GraphQL pagination behavior may depend on the node version; verify the current behavior rather than relying on an old limitation. [n8n workflow templates]

4. Transform the image into a thumbnail

n8n moves data between services, but the research sources do not establish a particular built-in thumbnail transformation node. Choose a transformation step that accepts the source URL or binary data, applies your chosen dimensions and fit/crop policy, and returns an image binary or a new URL. Before the bulk run, confirm that the step preserves aspect ratio as intended, emits the format you asked for, and does not silently upscale small source images.

If the transform service expects binary input, download the Shopify CDN image first and pass the binary property onward. If it accepts a URL, pass the media image URL and check its response. Keep enough metadata on each item to map the output back to the product and any relevant variant.

5. Store or attach the output

If the thumbnail is only for an external system, send it to that destination and record the resulting URL and product ID. If it should be Shopify product media, use Shopify’s GraphQL media management workflow. Shopify documents uploading a file to its CDN and then referencing that file from products, variants, collections, or themes. [Manage media for products and collections]

Uploads may take time to process. Check the media status before treating the new image as ready, and only associate it after the upload step has returned the file reference required by the relevant mutation. Preserve useful alt text, avoid attaching duplicate files on workflow retries, and validate that the thumbnail is associated with the intended product or variant.

6. Validate, then scale the run

Run the workflow for a handful of products with different source dimensions and formats.
Inspect output dimensions, crop, format, transparency, and visual quality at the actual product-card size.
Check that product IDs, variant associations, alt text, and output URLs remain attached to the correct item through every split, merge, and upload step.
Test a retry and confirm it does not create duplicate media. Store a stable source or product-media identifier as an idempotency key where the destination permits it.
Only then run the catalog backfill. Track processed, skipped, and failed items so you can resume without repeating successful work.

7. Troubleshooting

Symptom	Likely cause	Fix
Only some products are processed	The workflow fetched only the first product page, or only the first media page for each product.	Loop on each connection’s `hasNextPage` and pass its `endCursor` into the next request.
Access denied or GraphQL scope error	The app lacks a scope required by the query or mutation.	Check the exact operation and granted scopes, request the narrow required permissions, then refresh or reconnect credentials as required by your setup.
An image is missing or not ready	The media item is not an image, its URL is absent, or Shopify is still processing it.	Check `__typename`, image data, and media status. Skip unsupported items and retry processing media after a delay.
Thumbnail is stretched or badly cropped	The transformation used fixed dimensions without the intended fit/crop behavior.	Match the storefront slot’s aspect ratio and explicitly select crop-to-fill or contain-with-padding. Review a range of source aspect ratios.
Duplicate media appears after a retry	The workflow repeated an upload after a timeout or partial failure.	Record completed source-to-output mappings and look up an existing result before uploading again.
REST image endpoint is unavailable or deprecated	The workflow uses legacy Product Image REST operations.	Move media management to the GraphQL Admin API. Shopify marks REST Product Image operations deprecated as of API version 2025-01 and says new public apps must use GraphQL Admin API starting April 1, 2025. [REST Product Image status]
Some products fail while the rest succeed	A single bad URL or transformation error stopped the batch, or output-to-product mapping was lost.	Handle errors per item, preserve the product/media identifiers, log the failure reason, and retry only failed items.

8. Performance, reliability, and cost

Catalog size, media count, image dimensions, transformation service, and Shopify/API limits determine runtime. Keep page sizes within API limits, avoid downloading the same source repeatedly, and use bounded concurrency so a large workflow does not overload the transformation destination or exhaust n8n memory. For large images, process and upload in manageable batches rather than accumulating every binary in one execution.

For reliability, make steps restartable: persist cursors or checkpoints, record per-item outcomes, add bounded retries with backoff for transient failures, and separate permanent errors from retryable ones. Re-check media processing status after uploads. A manual backfill and a recurring update workflow can share transformation logic while keeping their triggers and retry behavior distinct.

Cost depends on where transformation and storage occur: n8n hosting or execution, image-processing services, bandwidth, and any storage destination may have separate charges. The cited Shopify and n8n material does not establish a universal cost or performance benchmark. Estimate using a representative sample from your own catalog and the pricing of the services you choose.

Or skip the browser setup

If the job is to capture how product pages render, ScreenshotNeo is a website screenshot API and MCP server. It returns a PNG, JPEG, WebP, or PDF from one GET request. It is not a Shopify image transformation or media-upload workflow; use it when rendered page screenshots are the output you need.

cURL:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python:

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

See the ScreenshotNeo API documentation for request options. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000.

FAQ

Do I need a physical product or special capture hardware?

No. This is a software and API workflow that processes catalog media.

Can I use the Shopify node instead of GraphQL?

Yes, when its Get or Get Many product operations expose the fields and paging behavior you need in your installed n8n version. Use GraphQL/HTTP Request when you need precise media fields or cursor handling.

Should I replace the product’s original image?

Usually keep the original and add or deliver a derivative only when the storefront or destination requires a separate asset.

Where do the image dimensions come from?

Measure the product-card slot in the actual theme and follow its crop behavior. There is no source-backed universal dimension for Shopify thumbnails.