diff --git a/src/components/ScrollerLottie/ScrollerLottie.mdx b/src/components/ScrollerLottie/ScrollerLottie.mdx
index 3bcd8678..79ddb5eb 100644
--- a/src/components/ScrollerLottie/ScrollerLottie.mdx
+++ b/src/components/ScrollerLottie/ScrollerLottie.mdx
@@ -13,6 +13,8 @@ The `ScrollerLottie` component plays Lottie animations. It uses the [dotLottie-w
 
 LottieFiles is the official platform for creating and editing Lottie animations, and exporting them in the dotLottie format for smaller file sizes. The free version of LottieFiles has limited features, so [Bodymovin](https://exchange.adobe.com/apps/cc/12557/bodymovin) remains a popular, free way to export animations as JSON files. You can use the [LottieFiles converter](https://lottiefiles.com/tools/lottie-to-dotlottie) to convert JSON files to dotLottie or optimized dotLottie formats. This component is flexible and supports both dotLottie and JSON animation files.
 
+> 🚧NOTE: For optimal compatibility with graphics-publisher, export your JSON files as optimized dotLottie format and rename the file extension to `*.zip`. This approach ensures full publisher support while maintaining the benefits of the dotLottie format's compression and optimization.
+
 ## Basic demo
 
 To use the `ScrollerLottie` component, import it and provide the animation source. The height defaults to `100lvh`, but you can adjust this to any valid CSS height value such as `1200px` or `200lvh` with the `height` prop.
@@ -31,7 +33,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
 # ArchieML doc
 [blocks]
   type: lottie
-  src: LottieFile.lottie
+  src: LottieFile.zip
   :end
 []
 ```
@@ -75,7 +77,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
 # ArchieML doc
 [blocks]
   type: lottie
-  src: LottieFile.lottie
+  src: LottieFile.zip
   marker: myMarker
   :end
 []
@@ -115,7 +117,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
 # ArchieML doc
 [blocks]
   type: lottie
-  src: LottieFile.lottie
+  src: LottieFile.zip
   [.segment]
     start: 0
     end: 20
@@ -158,7 +160,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
 # ArchieML doc
 [blocks]
   type: lottie
-  src: LottieFile.lottie
+  src: LottieFile.zip
   theme: myTheme
   :end
 []
@@ -193,7 +195,9 @@ It is also possible to switch themes dynamically based on the `progress` prop by
 ```svelte
 <script lang="ts">
   import { ScrollerLottie } from '@reuters-graphics/graphics-components';
-  import LottieSrc from './data/lottie-example.lottie?url';
+  // make a folder named 'data' and place the .zip lottie file inside it
+  // append ?url to the import statement
+  import LottieSrc from './data/lottie-example.zip?url';
 
   let progress = $state(0);
 </script>
@@ -216,7 +220,9 @@ The `ScrollerLottie` component can be used in conjunction with the `ScrollerBase
 ```svelte
 <script lang="ts">
   import { ScrollerLottie } from '@reuters-graphics/graphics-components';
-  import LottieSrc from './data/lottie-example.lottie?url';
+  // make a folder named 'data' and place the .zip lottie file inside it
+  // append ?url to the import statement
+  import LottieSrc from './data/lottie-example.zip?url';
 
   // Pass `progress` as `videoPercentage` to ScrollerLottie
   let progress = $state(0);
@@ -278,7 +284,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
 # ArchieML doc
 [blocks]
   type: lottie
-  src: LottieFile.lottie
+  src: LottieFile.zip
 
   # Array of foregrounds
   [.foregrounds]