From eca14a44066c677f429faa261f2bc5875a2503bb Mon Sep 17 00:00:00 2001
From: kevin <kevin@searchspring.com>
Date: Wed, 25 Sep 2024 01:21:31 -0600
Subject: [PATCH] docs(recommendations): adding details for min-height

---
 docs/INTEGRATION_RECOMMENDATIONS.md           | 4 ++--
 packages/snap-preact-demo/public/product.html | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/INTEGRATION_RECOMMENDATIONS.md b/docs/INTEGRATION_RECOMMENDATIONS.md
index ca3ccbcf5..bec75b6f4 100644
--- a/docs/INTEGRATION_RECOMMENDATIONS.md
+++ b/docs/INTEGRATION_RECOMMENDATIONS.md
@@ -25,10 +25,10 @@ The block below uses the `recently-viewed` profile which would typically be setu
 	];
 </script>
 
-<div class="ss__recs__recently-viewed"><!-- recommendations will render here --></div>
+<div class="ss__recs__recently-viewed" style="min-height: 100vh;"><!-- recommendations will render here --></div>
 ```
 
-The `RecommendationInstantiator` will look for these script blocks on the page and attempt to inject components based on the `selector` specified in each profile. In the example above, the profile specified is the `recently-viewed` profile, and is set to render inside the `.ss__recs__recently-viewed` element just below the script block. The targeted element could exist anywhere on the page - but it is recommended to group elements with script blocks whenever possible (for easy integration identification). The component to render into the targeted `selector` is setup within the `RecommendationInstantiator` configuration.
+The `RecommendationInstantiator` will look for these script blocks on the page and attempt to inject components based on the `selector` specified in each profile. In the example above, the profile specified is the `recently-viewed` profile, and is set to render inside the `.ss__recs__recently-viewed` element just below the script block. The targeted element could exist anywhere on the page - but it is recommended to group elements with script blocks whenever possible (for easy integration identification). The component to render into the targeted `selector` is setup within the `RecommendationInstantiator` configuration. The targeted element should be given a `min-height` inline style to prevent cumulative layout shift.
 
 
 ## Recommendation Context Variables
diff --git a/packages/snap-preact-demo/public/product.html b/packages/snap-preact-demo/public/product.html
index bf1ee166f..252e01991 100644
--- a/packages/snap-preact-demo/public/product.html
+++ b/packages/snap-preact-demo/public/product.html
@@ -171,7 +171,7 @@ <h2 id="name">Stripe Out Off-The-Shoulder Dress</h2>
                 </div>
             </div>
 
-            <div class="ss__recs__similar">stuff...</div>
+            <div class="ss__recs__similar" style="min-height: 100vh;"></div>
 
             <script type="searchspring/recommendations">
                     globals = {