To style the text in search results, navigate to Elevated › Product Search › Settings › Results Area › Typography & Colors. Set the Color and Size for each text element, then click Save Settings. Changes apply to all search result dropdowns on your site.
Navigate to Elevated › Product Search › Settings.
Look for the Results Area section on the left side of the page. Click the Results Area to expand it.
Scroll to the Typography & Colors section.
Each row contains a Color picker and a Size field measured in pixels.
Look for the Section Labels. These are the headings that appear above category and tag groups in the dropdown.
Click the Color square to open the color picker and select your preferred text color.
Enter a value in the Size field to set the font size in pixels.
Look for the Title. These controls affect the product names displayed in the results list.
Set the Color and Size for product titles.
Set the Color and Size for the remaining text elements:
The Preview panel on the right updates immediately to reflect your changes.
Click Save Settings at the top of the page when finished.
The Typography & Colors section provides granular control over text styling without requiring custom CSS. Each element can be sized and colored independently. This allows you to match the search results with your store’s brand and improve readability.
You get dedicated controls for Section Labels, Title, Price, SKU, and Description. This separation lets you create a visual hierarchy. For example, you might set the product title to 16 px to make it the most prominent element, the price to 14 px as secondary information, and the SKU to 12 px as subtle metadata.
These settings are global. They apply to every instance of the search form on your site, whether it appears in the header, sidebar, or a page builder template. The Preview panel reflects changes in real time as you adjust values, so you can see the effect before saving.
If you are using a dark background in Results Area Styles, ensure your text colors provide sufficient contrast. Light text on dark backgrounds requires brighter color values than dark text on light backgrounds. The color picker supports transparency, which can be useful for subtle elements like descriptions, but avoid transparent colors for primary text like titles and prices.
Text is hard to read against the background
Adjust the Background color in Results Area Styles or change the text color in Typography & Colors to improve contrast.
Font size is too large for the container
Reduce the Size value for the affected element, or increase the Max Form Width in Basic Settings if the dropdown feels cramped.
Changes do not appear on the frontend
Clear your site cache and browser cache. The Preview panel reflects changes immediately, but the frontend may be cached.
