Add display none when editor mode

Shopify · Sep 21, 2021 · 87d531a · 87d531a
1 parent 75a15a0
commit 87d531a
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/assets/component-product-model.css b/assets/component-product-model.css
@@ -10,7 +10,7 @@
 }
 
 .product__xr-button[data-shopify-xr-hidden] {
-  display: none;
+  visibility: hidden;
 }
 
 @media screen and (max-width: 749px) {

diff --git a/assets/product-model.js b/assets/product-model.js
@@ -54,5 +54,8 @@ window.ProductModel = {
 };
 
 window.addEventListener('DOMContentLoaded', () => { 
+  if (Shopify.designMode) {
+    document.querySelectorAll("[data-shopify-xr-hidden]").forEach(element => element.classList.add('hidden'));
+  }
   if (window.ProductModel) window.ProductModel.loadShopifyXR();
 });