How do you customize instant results

Respondida

5 Comentários

  • Pulkit Pandey
    Community Moderator

    Hi Ami Dewar

    You can achieve this using CSS only,  js required here there are some classes that are going to be used to change the fonts, colors of the heading and breadcrumbs appearing on the instant search / autocomplete results.

    zd-autocomplete-title-multibrand 

    1. The above is used to change the appearance of the instant search result heading 

    e.g

    zd-autocomplete-title-multibrand {

    color:$link_color;
    font-weight:500;

    }

    2.

    zd-autocomplete-breadcrumbs-multibrand

    The above can be used to update the instant search breadcrumbs 

    e.g 

    zd-autocomplete-breadcrumbs-multibrand {
    color:$text_color;
    font-weight:400;
    }

    Let me know if you have any issue or query 

    Thank You 

    Pulkit 

    Team Diziana

    0
  • Patrick Morgan

    Pulkit Pandey this is great! I'm trying to implement this just to make the link text match with our branding.

    However, though I can add this to my CSS file without issue, it has no effect—the link color remains the default blue.

    Any thoughts on why this might be?

    0
  • Pulkit Pandey
    Community Moderator

    Hey Patrick Morgan

    You can implement the below code to update the link color of instant search

    zd-autocomplete-multibrand zd-autocomplete-title-multibrand {
    color:red;
    }

    Let me know if it solves your issue 

    Regards 

    Pulkit

    0
  • Patrick Morgan

    Pulkit Pandey It works perfectly. Thanks for you quick reply!

    0
  • Pulkit Pandey
    Community Moderator

    Hi Patrick Morgan

    Happy to hear that it works 

    Regards

    Pulkit

    0

Por favor, entrar para comentar.

Powered by Zendesk