I am using SXA 1.6 Clone Feature to clone SXA Search result render to new one with custom .cshtml file so I can change the markup of the container instant of <ul> <li> to <div>tags , however I have noticed if I change

<div @Html.Sxa().Component(Model.Rendering.RenderingCssClass ?? "search-results", Model.Attributes) data-class-variant="@variantClass" data-properties='@Model.JsonDataProperties'>


<div @Html.Sxa().Component(Model.Rendering.RenderingCssClass ?? "FeaturedNews-search-results", Model.Attributes) data-class-variant="@variantClass" data-properties='@Model.JsonDataProperties'>`

With the changes done in "RenderingCssClass" there is no search result and when I try to change the class with the below code its not reflecting on the rendered results

<ul class="search-result-list">

            @foreach (BaseVariantField variantField in Model.VariantFields)
                @Html.RenderingVariants().RenderVariant(variantField, Model.PageItem, false)
  • First of all you need to check if you are getting any results at all. Please inspect the JSON which is returned from the server if there are any results. You can also try with standard Search Results. Put it on the page and check if your search is configured properly. Mar 18, 2018 at 21:00
  • Yes iam getting result when the RenderingCssClass is "search-results" Mar 18, 2018 at 21:03
  • I'll check that for you tomorrow. Mar 18, 2018 at 21:33

1 Answer 1


As I promised I've checked this for you. So the first place to looks in case of search renderings is the JavaScript file (most of the search renderings works on the fron-end). Take a look at component-search-results.js:

enter image description here

This is just a part of code but you can already see that it requires the search-results css class. So what you should do is:

<div @Html.Sxa().Component(Model.Rendering.RenderingCssClass ?? "search-results FeaturedNews-search-results", Model.Attributes) data-class-variant="@variantClass" data-properties='@Model.JsonDataProperties'>`

What is more, take a look at the beginning of component-search-results.js. The template to build search results unsorted list (<ul><li>) is defined at the beginning of that file.

  • Thank you so much fro your help , i tried to look for this js inside my theme but its look like its retrieved from BaseTheme , to add my own html markup shall i duplicate the file ? Mar 19, 2018 at 12:55
  • do you have any recommendation for extensions Jun 2, 2021 at 12:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.