diff --git a/packages/template-retail-react-app/CHANGELOG.md b/packages/template-retail-react-app/CHANGELOG.md
index 5c1523b7da..5febca1f64 100644
--- a/packages/template-retail-react-app/CHANGELOG.md
+++ b/packages/template-retail-react-app/CHANGELOG.md
@@ -1,4 +1,5 @@
## v2.8.0-dev (Mar 03, 2023)
+- Add app `above-header` and product-list `above-page-header` convenience components [#1183](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1183)
- Remove `cross-fetch` dependency [#1160](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1160)
- Make `mergeBasket` conditional more robust [#1048](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1048)
diff --git a/packages/template-retail-react-app/app/components/_app/index.jsx b/packages/template-retail-react-app/app/components/_app/index.jsx
index 648b311148..a5ee1195e6 100644
--- a/packages/template-retail-react-app/app/components/_app/index.jsx
+++ b/packages/template-retail-react-app/app/components/_app/index.jsx
@@ -39,6 +39,7 @@ import CheckoutFooter from '../../pages/checkout/partials/checkout-footer'
import DrawerMenu from '../drawer-menu'
import ListMenu from '../list-menu'
import {HideOnDesktop, HideOnMobile} from '../responsive'
+import AboveHeader from './partials/above-header'
// Hooks
import {AuthModal, useAuthModal} from '../../hooks/use-auth-modal'
@@ -283,33 +284,35 @@ const App = (props) => {
{!isCheckout ? (
-
+ <>
+
+
+ >
) : (
)}
-
{!isOnline && }
null
+
+export default AboveHeader
diff --git a/packages/template-retail-react-app/app/pages/product-list/index.jsx b/packages/template-retail-react-app/app/pages/product-list/index.jsx
index 04120362ab..2e1b39693c 100644
--- a/packages/template-retail-react-app/app/pages/product-list/index.jsx
+++ b/packages/template-retail-react-app/app/pages/product-list/index.jsx
@@ -53,6 +53,7 @@ import Refinements from './partials/refinements'
import SelectedRefinements from './partials/selected-refinements'
import EmptySearchResults from './partials/empty-results'
import PageHeader from './partials/page-header'
+import AbovePageHeader from './partials/above-page-header'
// Icons
import {FilterIcon, ChevronDownIcon} from '../../components/icons'
@@ -380,8 +381,8 @@ const ProductList = (props) => {
) : (
<>
+
{/* Header */}
-
null
+
+export default AbovePageHeader
diff --git a/packages/template-retail-react-app/app/theme/components/project/header.js b/packages/template-retail-react-app/app/theme/components/project/header.js
index 9b6d0d9296..d431fa1ec4 100644
--- a/packages/template-retail-react-app/app/theme/components/project/header.js
+++ b/packages/template-retail-react-app/app/theme/components/project/header.js
@@ -7,7 +7,6 @@
export default {
baseStyle: {
container: {
- height: 'full',
minWidth: 'xs',
width: 'full',
boxShadow: 'base',