diff --git a/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts b/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
index b75adbda1e..a95f0c278c 100644
--- a/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
@@ -1,5 +1,7 @@
 import {
   html,
+  CSSResult,
+  css,
   LitElement,
   TemplateResult,
   customElement,
@@ -14,6 +16,7 @@ import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { ShoppingListCardConfig } from "../../cards/types";
 
+import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import "../../components/hui-theme-select-editor";
 
 const cardConfigStruct = struct({
@@ -49,6 +52,15 @@ export class HuiShoppingListEditor extends LitElement
 
     return html`
       <div class="card-config">
+        ${!isComponentLoaded(this.hass, "shopping_list")
+          ? html`
+              <div class="error">
+                ${this.hass.localize(
+                  "ui.panel.lovelace.editor.card.shopping-list.integration_not_loaded"
+                )}
+              </div>
+            `
+          : ""}
         <paper-input
           .label="${this.hass.localize(
             "ui.panel.lovelace.editor.card.generic.title"
@@ -90,6 +102,14 @@ export class HuiShoppingListEditor extends LitElement
     }
     fireEvent(this, "config-changed", { config: this._config });
   }
+
+  static get styles(): CSSResult {
+    return css`
+      .error {
+        color: var(--google-red-500);
+      }
+    `;
+  }
 }
 
 declare global {
diff --git a/src/translations/en.json b/src/translations/en.json
index 5680b7d5ad..eee21fd50b 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -1809,7 +1809,8 @@
               "graph_type": "Graph Type"
             },
             "shopping-list": {
-              "name": "Shopping List"
+              "name": "Shopping List",
+              "integration_not_loaded": "This card requires the `shopping_list` integration to be set up."
             },
             "thermostat": {
               "name": "Thermostat"