Customize Recommendations Display

Learn how to create custom recommendation components and styling to match your application's design and requirements.

Prerequisites

Before customizing recommendations display, ensure you have:

• Set up the Netup extension in your Front-Commerce application
• Configured recommendation display using the basic PublishingZone component

Creating Custom Recommendation Components

You can create custom recommendation components to control exactly how recommendations are displayed:

app/components/CustomRecommendation.tsx

import { NetupRecommendationProps } from "@front-commerce/netup/react";
import ProductList from "theme/modules/ProductList/ProductList/ProductList";

export default function CustomRecommendation({
  recommendation,
}: NetupRecommendationProps) {
  return (
    <div className="my-custom-recommendations">
      <h3>{recommendation.json.catchphrase || "Recommended for you"}</h3>
      <ProductList skus={recommendation.json.products} />
    </div>
  );
}

Then use it with the PublishingZone:

app/pages/Product/Product.tsx

import {
  PublishingZone,
  PublishingZoneTypeEnum,
} from "@front-commerce/netup/react";
import CustomRecommendation from "app/components/CustomRecommendation";

export default function ProductPage() {
  return (
    <div>
      <PublishingZone
        type={PublishingZoneTypeEnum.productPage}
        RecommendationComponent={CustomRecommendation}
      />
    </div>
  );
}