diff --git a/js/BoxMenuView.js b/js/BoxMenuView.js
index f504fac..d789c02 100644
--- a/js/BoxMenuView.js
+++ b/js/BoxMenuView.js
@@ -7,15 +7,15 @@ class BoxMenuView extends MenuView {
 
   className() {
     const backgroundImages = this.model.get('_boxMenu')?._backgroundImage;
-    const backgroundImage = backgroundImages[`_${device.screenSize}`] ?? backgroundImages._small;
+    const backgroundImage = backgroundImages?.[`_${device.screenSize}`] ?? backgroundImages?._small;
     const textAlignment = this.model.get('_boxMenu')?._menuHeader?._textAlignment;
 
     return [
       `${super.className()} boxmenu`,
       backgroundImage && 'has-bg-image',
-      textAlignment._title && `title-align-${textAlignment._title}`,
-      textAlignment._body && `body-align-${textAlignment._body}`,
-      textAlignment._instruction && `instruction-align-${textAlignment._instruction}`
+      textAlignment?._title && `title-align-${textAlignment._title}`,
+      textAlignment?._body && `body-align-${textAlignment._body}`,
+      textAlignment?._instruction && `instruction-align-${textAlignment._instruction}`
     ].join(' ');
   }
 
diff --git a/templates/boxMenu.jsx b/templates/boxMenu.jsx
index b98908d..5009498 100644
--- a/templates/boxMenu.jsx
+++ b/templates/boxMenu.jsx
@@ -19,19 +19,19 @@ export default function BoxMenu (props) {
 
   // set menu background image
   const backgroundImages = _boxMenu?._backgroundImage;
-  const backgroundImage = backgroundImages[`_${device.screenSize}`] ?? backgroundImages._small;
+  const backgroundImage = backgroundImages?.[`_${device.screenSize}`] ?? backgroundImages?._small;
   // set menu background styles
-  const styles = _boxMenu._backgroundStyles;
+  const styles = _boxMenu?._backgroundStyles || {};
 
   // set header background image
   const header = _boxMenu?._menuHeader;
-  const headerBackgroundImages = header._backgroundImage;
-  const headerBackgroundImage = headerBackgroundImages[`_${device.screenSize}`] ?? headerBackgroundImages._small;
+  const headerBackgroundImages = header?._backgroundImage;
+  const headerBackgroundImage = headerBackgroundImages?.[`_${device.screenSize}`] ?? headerBackgroundImages?._small;
   // set header background styles
-  const headerBackgroundStyles = header._backgroundStyles;
+  const headerBackgroundStyles = header?._backgroundStyles || {};
   // set header minimum height
-  const headerMinimumHeights = header._minimumHeights;
-  const headerMinimumHeight = headerMinimumHeights[`_${device.screenSize}`] ?? headerMinimumHeights._small;
+  const headerMinimumHeights = header?._minimumHeights;
+  const headerMinimumHeight = headerMinimumHeights?.[`_${device.screenSize}`] ?? headerMinimumHeights?._small;
 
   return (
     <>
@@ -40,7 +40,7 @@ export default function BoxMenu (props) {
         className="background"
         aria-hidden="true"
         style={{
-          backgroundImage: 'url(' + backgroundImage + ')',
+          backgroundImage: backgroundImage && 'url(' + backgroundImage + ')',
           backgroundRepeat: styles._backgroundRepeat,
           backgroundSize: styles._backgroundSize,
           backgroundPosition: styles._backgroundPosition
@@ -66,7 +66,7 @@ export default function BoxMenu (props) {
             className="background"
             aria-hidden="true"
             style={{
-              backgroundImage: 'url(' + headerBackgroundImage + ')',
+              backgroundImage: headerBackgroundImage && 'url(' + headerBackgroundImage + ')',
               backgroundRepeat: headerBackgroundStyles._backgroundRepeat,
               backgroundSize: headerBackgroundStyles._backgroundSize,
               backgroundPosition: headerBackgroundStyles._backgroundPosition