Before You Begin
At this point you have already completed the Configure XSearch Service step
Time Estimate
10 mins
Shopify App Widget Customization Page
Search Overlay
Customize the overall layout of the search overlay. You can adjust search overlay padding, vertical spacing, and choose different fonts for the headings and body text to match your site's style. These settings control the basic structure and typography of the search dropdown, ensuring it feels cohesive with the rest of your storefront.
Heading
Control the heading section that appears above your search results. You can set a heading label (for example, "Start Typing to Search"), select the font family and size, adjust heading color, and choose text alignment (left, center, right).
Search Bar
Customize the search bar input itself, including the text placeholder ("Enter product name..."), font settings, input padding, and the background and border color for the search bar field. You can also control the rounding of the input corners (corner radius) to match the style of your theme.
Suggestions
Style the suggestions that appear under the search bar that were entered in the Theme Page’s App Block. You can adjust the suggestion heading label, font family and size, and set horizontal and vertical spacing between suggestion items.
Search History
Design the appearance of the search history list, where customers can revisit past searches. Customize the history heading label, font family, text size, and vertical spacing. You can also define a background color and text color for better contrast and usability.
Global Custom CSS
Add any additional styling rules using standard CSS to fully control the appearance of the search overlay and its subcomponents. This is ideal for advanced users who can make brand-specific modifications or who want to apply more granular control than the visual editor allows.
Shopify Theme Page App Embeds
Time Estimate
3 mins
Navigate to the App Embeds Tab in Your Shopify Theme Editor
On the left sidebar in your Theme Editor, you’ll see three vertically stack icons: Sections, Theme Settings, App Embeds. Click App Embeds. App Embeds control app widgets that appear page-wide, like XSearch.
Placement (Vertical Spacing)
Use the slider to control the amount of vertical space (in pixels) between your search input and the search results container. Proper spacing ensures that your dropdown or search suggestions appear cleanly without overlapping other elements.
Search Settings
Choose the Search Behavior and toggle options for showing search suggestions or search history. These settings control how quickly and interactively your search feels to customers, improving engagement and helping users find products faster.
Redirect to Search Results Page
This option takes users to a full search results page after they submit a query. It’s useful for stores with large catalogs or when customers are likely to need filtering and sorting tools to narrow down their results.
Predictive Search Results on Overlay
This option shows search results in an overlay as the customer types, without leaving the current page. It provides a fast, lightweight experience that surfaces relevant products immediately, helping customers discover items quickly and keeping them engaged without interrupting their browsing flow.
Predictive Search with Search Page
This option first displays live, predictive results in an overlay while typing, but also allows users to click through to a full search results page if they want to see more options. It's a hybrid model that gives customers immediate recommendations while still offering the depth and browsing tools of a traditional search page when needed.
Suggested Searches
You can preload up to five suggested searches that will display before the customer even types anything. These suggestions guide users toward popular categories and often encourage shoppers to use a more natural-language search query.
Results Settings
Control the structure of search results here. You can toggle the total results count (helpful for setting shopper expectations), limit the maximum number of results loaded (improving page performance), and enable filter and sorting options to allow shoppers to refine their search outputs further.
Product Card Layout & Information
Customize how the products inside search results are displayed. Select the number of columns shown on desktop (3, 4, or 5) and mobile (1 or 2), and adjust the horizontal and vertical spacing between product cards. Optimizing this layout helps balance information density with visual clarity on different devices.
Toggle whether to display the vendor name, a variant selector (for products with sizes, colors, etc.), and an Add-to-Cart button directly in the search results. Enabling these features can reduce shopping friction and speed up the customer’s path to purchase directly from the search dropdown.
Custom CSS
Use this field to apply additional styling rules specific to the XSearch widget. This is ideal for developers or designers who want full control over how search elements look beyond the built-in options, allowing for complete theme alignment or campaign-specific customizations.