How to Migrate Your Next.js App from Sitecore JSS to Content SDK

Customize Sitecore Experience Accelerator (SXA) OOTB Components: Part-1

The Sitecore Experience Accelerator (SXA), providing more than 100 out of the box (OOTB) components which you can use to create the website by just adding into the pages. These components provides friendly Experience Editor behavior.

These components comes with out of the box styling and will not fulfill Business needs. In those cases, we have to customize the SXA OOTB components as per Business needs. The most of the SXA components supports customization of UI using CSS classes.

Now we will try to add Carousel component on page, so go to page click on Add Here and it will open pop-up which will display set of SXA OOTB components. From there go to Composites tab and select Carousel component:

It will open the pop-up window to select associated content, it means items which are compatible with Carousel components. In other words, items which created using Templates which can be used in Carousel components. This is also the best practice to restrict content type, so that Content Author can easily select the required content:

Select the HomeCarousel item and Sitecore SXA will render the Carousel component with Basic styling:

Now, go to component properties and select Basic Transition and Bullet with Navigation then it will render the component like this:

As per styling guide of Business needs, we have to render the Previous/Next navigation like this:

In this case, we can use CSS styling and modify the Navigation and other components of carousel: