Create custom styled merchandising widget components

In the UI components reference site, in the Widget templates section, open the Recommendation page.

In your React project, in the widget_components folder, create a folder named carouselStyled.

From the list of templates, in the Styled carousel page, click index.js to copy the code block.

In the carouselStyled folder, create a JavaScript file called index.js, then paste the copied code block into it, and save.

From the list of templates, in the Styled carousel page, click styled.js to copy the code block.

In the carouselStyled folder, create a JavaScript file, styled.js then paste the copied code block into it, and save.

In styled.js, edit the styled primitives, and save.

In your application component, add component as shown in the following code block.

imports ( Recommendation ) from "./widget_components/carouselStyled";

const MyApp = () => {
    return (
        <WidgetsProvider
                env='<environment>'
                customerKey='<customer key>'
                apiKey='<api key>'
                useToken
            >
            <Recommendation rfkId="styled_recommendation" /> 
        </WidgetsProvider>
    )
};

To avoid compile errors, update the imports section, and save.