Images Not Being Rendered In Checkout Extensions

Extensions
1

I am simply trying to display an image on checkout through creating a new extension, but the image is not being rendered and is being converted to a GIF. I even used the Image component but the issue still persists

image
image2520×290 39.3 KB

image
image2210×1020 111 KB

image
image1858×244 40.6 KB

image
image960×470 74 KB

1 Like
2

Can anyone help? It’s really important

3

@Liam-Shopify @Paige-Shopify

4

Please have some patience, for some timezones, you posted during the middle of the night.

Also, please do not tag Shopify staff.

1 Like
5

@Luke Thank you I will keep it in my mind for future references

6

Any help here would be greatly appreciated!

7

Hi there,

I used your code on my app, and it appears to render fine:

05-34-7lewt-2vhe9
05-34-7lewt-2vhe91664×1824 330 KB

For reference, this is what I have:

import '@shopify/ui-extensions/preact';
import {render} from "preact";

export default async () => {
  render(<Extension />, document.body)
};

function Extension() {

  return (
    <s-image
    objectFit="contain"
    alt="Checkout Image"
    aspectRatio="16/9"
    loading="eager"
    src='https://shopify-staged-uploads.storage.googleapis.com/tmp/96511492398/files/5cc44281-0dac-4613-b8f9-8b09a0001524/image-component.webp'
    borderRadius="base"
    />
  );
}

What does your shopify.extension.toml file look like? Does it read similar to this?

api_version = "2025-10"

[[extensions.targeting]]
module = "./src/Checkout.jsx"
target = "purchase.checkout.block.render"

Can you share the content of the package.json file for your extension?

8

@Paige-Shopify Sure, Here the contents of my .json file. How can I upgrade it effectively because currently installing the latest version with yarn is breaking the application fully

{
  "name": "dev-only-varify-checkout-components",
  "version": "0.1.0",
  "description": "Internal package for Gadget app varify-checkout-components (Development environment)",
  "license": "UNLICENSED",
  "private": true,
  "scripts": {
    "build": "NODE_ENV=production remix vite:build",
    "shopify": "shopify",
    "shopify:config:use:development": "shopify app config use shopify.app.development.toml",
    "shopify:config:use:production": "shopify app config use shopify.app.toml",
    "shopify:dev": "yarn shopify:deploy:development --force && yarn shopify:config:use:development && shopify app dev --no-update",
    "shopify:deploy:development": "yarn shopify:config:use:development && shopify app deploy",
    "shopify:deploy:production": "yarn shopify:config:use:production && shopify app deploy",
    "shopify:deploy": "yarn shopify:deploy:production",
    "shopify:info": "shopify app info",
    "gadget:dev": "ggt dev ./varify-checkout-components --app=varify-checkout-components --env=development"
  },
  "resolutions": {
    "vite": "^6.3.5",
    "react-dom": "^18.2.0",
    "@types/react": "17.0.30"
  },
  "dependencies": {
    "@gadgetinc/react": "^0.21.4",
    "@gadgetinc/react-shopify-app-bridge": "^0.18.8",
    "@remix-run/node": "^2.15.3",
    "@remix-run/react": "^2.15.3",
    "@shopify/app-bridge-react": "^4.1.5",
    "@shopify/ui-extensions": "2025.7.2",
    "@shopify/ui-extensions-react": "2025.7.2",
    "isbot": "^5.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-reconciler": "0.29.0",
    "shopify-api-node": "^3.14.2",
    "@shopify/polaris": "^13.9.5",
    "@gadget-client/dev-only-varify-checkout-components": "link:.gadget/client",
    "gadget-server": "link:.gadget/server"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.15.3",
    "@shopify/app-bridge-types": "^0.3.0",
    "@shopify/app-bridge-ui-types": "^0.3.0",
    "@types/node": "^22.13.14",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "typescript": "^5.8.3",
    "vite": "^6.3.5"
  },
  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
}

# Learn more about configuring your checkout UI extension:
# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration

# The version of APIs your extension will receive. Learn more:
# https://shopify.dev/docs/api/usage/ve rsioning
api_version = "2025-07"

[[extensions]]
name = "universal-checkout-ui"
handle = "universal-checkout-ui"
type = "ui_extension"
uid = "06a35e55-5e44-f677-19a2-8140fda41ebf6f2b00b6"

# Controls where in Shopify your extension will be injected,
# and the file that contains your extension’s source code. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview

[[extensions.targeting]]
module = "./src/Checkout.tsx"
target = "purchase.checkout.block.render"

[extensions.capabilities]
network_access = true
api_access = true

# Loads metafields on checkout resources, including the cart,
# products, customers, and more. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#metafields

# [[extensions.metafields]]
# namespace = "my_namespace"
# key = "my_key"
# [[extensions.metafields]]
# namespace = "my_namespace"
# key = "my_other_key"

# Defines settings that will be collected from merchants installing
# your extension. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#settings-definition

[extensions.settings]
[[extensions.settings.fields]]
key = "component_id"
type = "single_line_text_field"
name = "Component ID"
description = "Paste the component ID here."
9

I see that your extension.toml file is set to:
api_version = "2025-07"

For it to be compatible with web components, it needs to be set to:
api_version = "2025-10"

It’s expected behavior to get no output with web components if using a version lower than 2025-10.