diff --git a/invokeai/frontend/web/src/features/metadata/parsing.tsx b/invokeai/frontend/web/src/features/metadata/parsing.tsx
index 5fa08ee2954..e7d3bab3afe 100644
--- a/invokeai/frontend/web/src/features/metadata/parsing.tsx
+++ b/invokeai/frontend/web/src/features/metadata/parsing.tsx
@@ -785,12 +785,25 @@ const QwenImageShift: SingleMetadataHandler<number | null> = {
 //#endregion QwenImageShift
 
 //#region ZImageShift
-const ZImageShift: SingleMetadataHandler<number> = {
+const ZImageShift: SingleMetadataHandler<number | null> = {
   [SingleMetadataKey]: true,
   type: 'ZImageShift',
-  parse: (metadata, _store) => {
+  parse: (metadata, store) => {
     const raw = getProperty(metadata, 'z_image_shift');
-    const parsed = z.number().min(0).max(3).parse(raw);
+    if (raw === undefined) {
+      // Older Z-Image images and new images generated with auto shift don't include this key.
+      // Recall as null (auto) only when the recalled image is a Z-Image, so we don't clobber
+      // the user's current shift when recalling unrelated metadata.
+      const base = selectBase(store.getState());
+      if (base !== 'z-image') {
+        return Promise.reject();
+      }
+      return Promise.resolve(null);
+    }
+    if (raw === null) {
+      return Promise.resolve(null);
+    }
+    const parsed = z.number().min(0).max(10).parse(raw);
     return Promise.resolve(parsed);
   },
   recall: (value, store) => {
@@ -798,7 +811,9 @@ const ZImageShift: SingleMetadataHandler<number> = {
   },
   i18nKey: 'metadata.zImageShift',
   LabelComponent: MetadataLabel,
-  ValueComponent: ({ value }: SingleMetadataValueProps<number>) => <MetadataPrimitiveValue value={value} />,
+  ValueComponent: ({ value }: SingleMetadataValueProps<number | null>) => (
+    <MetadataPrimitiveValue value={value ?? 'Auto'} />
+  ),
 };
 //#endregion ZImageShift