diff --git a/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx b/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx
index b3a538d4f..462f93c79 100644
--- a/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx
+++ b/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx
@@ -5,18 +5,13 @@ import CardMenu, { CardMenuItem } from "@saleor/components/CardMenu";
 import PageHeader from "@saleor/components/PageHeader";
 import useNavigator from "@saleor/hooks/useNavigator";
 import { sectionNames } from "@saleor/intl";
-import { Alert } from "@saleor/macaw-ui";
-import { productAddUrl } from "@saleor/products/urls";
-import { productTypeAddUrl } from "@saleor/productTypes/urls";
-import { ProductTypeKindEnum } from "@saleor/types/globalTypes";
 import React from "react";
 import { useIntl } from "react-intl";
 
 import { giftCardSettingsUrl } from "../../urls";
 import { giftCardsListHeaderMenuItemsMessages as messages } from "../messages";
 import useGiftCardListDialogs from "../providers/GiftCardListDialogsProvider/hooks/useGiftCardListDialogs";
-import { useGiftCardProductsCountQuery } from "../queries";
-import GiftCardsListHeaderAlertContent from "./GiftCardsListHeaderAlertContent";
+import GiftCardsListHeaderAlert from "./GiftCardsListHeaderAlert";
 
 const GiftCardsListHeader: React.FC = () => {
   const intl = useIntl();
@@ -24,11 +19,6 @@ const GiftCardsListHeader: React.FC = () => {
 
   const { openCreateDialog } = useGiftCardListDialogs();
 
-  const {
-    data: giftCardProductsCount,
-    loading: giftCardProductsCountLoading
-  } = useGiftCardProductsCountQuery();
-
   const openSettings = () => navigate(giftCardSettingsUrl);
 
   const menuItems: CardMenuItem[] = [
@@ -49,24 +39,6 @@ const GiftCardsListHeader: React.FC = () => {
     //   }
   ];
 
-  const giftCardProductTypesExist =
-    giftCardProductsCount?.giftCardProductTypes.totalCount > 0;
-  const giftCardProductsExist =
-    giftCardProductsCount?.giftCardProducts.totalCount > 0;
-
-  const showNoGiftCardProductsAlert =
-    !giftCardProductsCountLoading &&
-    (!giftCardProductTypesExist || !giftCardProductsExist);
-
-  const handleCreateGiftCardProductType = () =>
-    navigate(
-      productTypeAddUrl({
-        kind: ProductTypeKindEnum.GIFT_CARD
-      })
-    );
-
-  const handleCreateGiftCardProduct = () => navigate(productAddUrl());
-
   return (
     <>
       <PageHeader title={intl.formatMessage(sectionNames.giftCards)}>
@@ -81,20 +53,7 @@ const GiftCardsListHeader: React.FC = () => {
           {intl.formatMessage(messages.issueButtonLabel)}
         </Button>
       </PageHeader>
-      {showNoGiftCardProductsAlert && (
-        <Alert
-          title={intl.formatMessage(messages.noGiftCardsAlertTitle)}
-          variant="warning"
-          close={false}
-        >
-          <GiftCardsListHeaderAlertContent
-            giftCardProductTypesExist={giftCardProductTypesExist}
-            giftCardProductsExist={giftCardProductsExist}
-            handleCreateGiftCardProductType={handleCreateGiftCardProductType}
-            handleCreateGiftCardProduct={handleCreateGiftCardProduct}
-          />
-        </Alert>
-      )}
+      <GiftCardsListHeaderAlert />
       <VerticalSpacer spacing={2} />
     </>
   );
diff --git a/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeaderAlert.tsx b/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeaderAlert.tsx
new file mode 100644
index 000000000..f8f9eb2e1
--- /dev/null
+++ b/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeaderAlert.tsx
@@ -0,0 +1,60 @@
+import useNavigator from "@saleor/hooks/useNavigator";
+import { Alert } from "@saleor/macaw-ui";
+import { productAddUrl } from "@saleor/products/urls";
+import { productTypeAddUrl } from "@saleor/productTypes/urls";
+import { ProductTypeKindEnum } from "@saleor/types/globalTypes";
+import React from "react";
+import { useIntl } from "react-intl";
+
+import { giftCardsListHeaderMenuItemsMessages as messages } from "../messages";
+import { useGiftCardProductsCountQuery } from "../queries";
+import GiftCardsListHeaderAlertContent from "./GiftCardsListHeaderAlertContent";
+
+const GiftCardsListHeaderAlert: React.FC = () => {
+  const intl = useIntl();
+  const navigate = useNavigator();
+
+  const {
+    data: giftCardProductsCount,
+    loading: giftCardProductsCountLoading
+  } = useGiftCardProductsCountQuery();
+
+  const giftCardProductTypesExist =
+    giftCardProductsCount?.giftCardProductTypes.totalCount > 0;
+  const giftCardProductsExist =
+    giftCardProductsCount?.giftCardProducts.totalCount > 0;
+
+  const showNoGiftCardProductsAlert =
+    !giftCardProductsCountLoading &&
+    (!giftCardProductTypesExist || !giftCardProductsExist);
+
+  const handleCreateGiftCardProductType = () =>
+    navigate(
+      productTypeAddUrl({
+        kind: ProductTypeKindEnum.GIFT_CARD
+      })
+    );
+
+  const handleCreateGiftCardProduct = () => navigate(productAddUrl());
+
+  if (showNoGiftCardProductsAlert) {
+    return (
+      <Alert
+        title={intl.formatMessage(messages.noGiftCardsAlertTitle)}
+        variant="warning"
+        close={false}
+      >
+        <GiftCardsListHeaderAlertContent
+          giftCardProductTypesExist={giftCardProductTypesExist}
+          giftCardProductsExist={giftCardProductsExist}
+          handleCreateGiftCardProductType={handleCreateGiftCardProductType}
+          handleCreateGiftCardProduct={handleCreateGiftCardProduct}
+        />
+      </Alert>
+    );
+  }
+
+  return null;
+};
+
+export default GiftCardsListHeaderAlert;