How to rename hit results classes, or use completely custom hits template in Shopify?

Option A: Do you have a code snippet you can share where I can modify class names, instead of “ais-refinement-list–item”?

Option B: Can you guys provide a demo / code example for Shopify on how to customize the hit results template? (modify ais-refinement-list–body class)

`
I’m not sure where to do it here below:

   // JEWELRY Signature Collection Results Cards
    
   instant.search.addWidget(
      instantsearch.widgets.refinementList({
        container: '#signature-collection',
        attributeName: 'named_tags.Signature_Collection',
        operator: 'or',
        sortBy: ['name:asc'],
        templates: {
          item: function (facet) {
            var collectionName = facet.name;
            var collectionNameHandle = collectionName.split(" ").join("-").toLowerCase();
            return '<div class="grid__item small--one-half medium-up--one-third asdf ' + collectionNameHandle + '"><span class="discover">' + collectionName + '</span></div>';
          }
        }
      })
    );

Thank you!

To add new classes on top of the ones we add by default, you can provide a cssClasses parameter to the widget initialization.
Documentation: https://community.algolia.com/instantsearch.js/v1/documentation/#refinementlist .

   // JEWELRY Signature Collection Results Cards
    
   instant.search.addWidget(
      instantsearch.widgets.refinementList({
        container: '#signature-collection',
        attributeName: 'named_tags.Signature_Collection',
        // ...
        cssClasses: {
          item: 'your-custom-item-class',
          body: 'your-custom-body-class'
        }  
      })
    );

This will not override the default class, but will be added to the list of classes.

1 Like