Integrating the new component

The next step is to add the new component to the product page. The product header is a good position because it already displays some additional product metadata.

The file that needs to be changed is located at
<theme-root>/pages/Product/components/Header/index.jsx.

Let’s now import and use the new component:

<theme-root>/pages/Product/components/Header/index.jsx
...
import Loyalty from './components/Loyalty';

const ProductHeader = () => (
  <div className={styles.content}>
    ...
    <Loyalty />
  </div>
);