Goal: Move the 29 brand logo PNGs from the theme's assets/ folder into Shopify Files, then update the homepage clients marquee to reference them via Shopify's image CDN (so we get responsive sizes, WebP, and don't ship 5+ MB of PNGs in every theme bundle).

Why: Shopify Files are served by the same global CDN as theme assets, but Files also support on-the-fly image transforms (?width=200, &format=webp) via Liquid's image_url filter. The current marquee serves 960px-wide PNGs raw — we can deliver 180/360px WebP variants instead.

Repo: merutrophy/shopify (Shopify theme connected to GitHub).

Pre-req: Shopify MCP connector authenticated for the Meru Trophy store. Confirm with get-shop-info before you start — the shop domain should be merutrophy.myshopify.com.


Inventory — the 29 logo files

All live in assets/ with cdn.shopify.com…/t/<theme>/assets/<name> URLs today. List:

logo-amazon.png             logo-axis-bank.png         logo-bajaj-allianz.png
logo-cadbury.png            logo-canara-bank.png       logo-caterpillar.png
logo-coursera.png           logo-decathlon.png         logo-foxconn.png
logo-godrej.png             logo-hal.png               logo-hcl.png
logo-hdfc-bank.png          logo-indian-express.png    logo-indian-railways.png
logo-infosys.png            logo-itc.png               logo-jio.png
logo-kalyan-jewellers.png   logo-ksca.png              logo-maruti-suzuki.png
logo-mondelez.png           logo-patanjali.png         logo-razorpay.png
logo-sbi.png                logo-schneider.png         logo-tanishq.png
logo-tata-steel.png         logo-titan.png

All are RGBA PNG, 960px wide, totalling ~860 KB. Pulled from Wikimedia Commons in commit bb92673.


Step 1 — Upload to Shopify Files (2-step staged upload)

For each file:

1a. Create a staged upload target

mutation StageUpload($input: [StagedUploadInput!]!) {
  stagedUploadsCreate(input: $input) {
    stagedTargets {
      url
      resourceUrl
      parameters { name value }
    }
    userErrors { field message }
  }
}

Variables (one entry per file):

{
  "input": [{
    "resource": "FILE",
    "filename": "logo-tanishq.png",
    "mimeType": "image/png",
    "httpMethod": "POST",
    "fileSize": "33328"
  }]
}

You get back a presigned S3-style url, the resourceUrl (the eventual file address), and a set of form parameters you must include.

1b. POST the file bytes to the staged target

This is a multipart form POST — the MCP doesn't expose raw HTTP, so run this via Bash + curl:

curl -X POST "<url>" \
  $(jq -r '.parameters[] | "-F \(.name)=\(.value | @sh)"' <<< '<parameters JSON>') \
  -F "file=@assets/logo-tanishq.png"