When I go to my search bar field, the font for “suggestions” and “products” isn’t the font I want to use. It is currently using a script version of Thistails and I would like it to use the sans version. I’m having trouble finding the line of code to edit in the base.css
1 Like
Hey @sugarhilldahlias,
The predictive search results often live within a dedicated container, usually something like .predictive-search-results or .predictive-search__list. The “suggestions” and “products” headings might have their own classes too, like .predictive-search__item-type or .predictive-search__heading.
You’ll want to add or override the font-family property. Open your browser’s developer tools (F12 or right-click → Inspect), hover over the text you want to change in the search dropdown, and inspect its exact CSS classes. This will give you the most accurate selector to target.
Once you have the selector, you’d add something like this to your base.css (or theme.scss.liquid if you’re using an older theme, or a custom CSS file):
.predictive-search-results,
.predictive-search__list-item,
.predictive-search__heading { /* Use the specific classes you found */
font-family: "Your Sans Font Name", sans-serif !important; /* Replace with your desired sans font */
}
The !important might be needed to override existing theme styles, but try without it first. Make sure “Your Sans Font Name” is correctly loaded in your theme.
Overall, it’s hard to assist without getting more info, so if you need more help getting this done, let me know the theme name and I can try to assist further!
Hope that helps!
@sugarhilldahlias Thanks for reaching out to Shopify community with your concern. Can you please provide the URL of your store and if it is password protected please share the password too. Thanks