Description:

The Shopify Search Modal is a flexible, drop-in component that opens a dedicated search interface when triggered. It can be launched from any element—like a header icon, menu item, text link, or button—giving you complete control over how and where it's activated.

Once open, the modal displays a keyword input field and renders results within the layout. Shipcode allows you to render search query examples as a styling preview in the canvas; however, the true component will accept any query. 

📍📍📍 Note 📍📍📍

This pattern is intentionally designed to return category- and query-level results, offering customers a broader and more flexible entry point into your catalog.

Shopify Prerequisites

• The component uses Shopify's standard product route and query for its current search functionality
• • Products must have relevant titles, descriptions, or tags if you want them to show up for those queries.

Shipcode Configuration

• Adding your component
• • Go to the Libraries tab in the components panel
  • Locate the “Shopify Search Modal” Component
  • Drag it onto a layout 
• Testing your component
• • With the “Results Data Zone” layer selected, you may need to locate the "search Term Simulation” field and update it to a search term relevant to your brand to see the simulation data
  • • The default is “S”
• Managing the number of search results
• • If desired, you can limit the number of search results
  • • With the “Results DataZone” layer selected:
    • • Navigate to the “Settings” panel in the right sidebar
      • Locate the field labeled “Predictive Search Results Limit” 
      • • Update it with a number no larger than 10
• Creating your search modal trigger
• • Design any “trigger” element on the layout you want to open this search modal such as a search icon, button, or even a static search field
  • • Remember, the search modal opens in a new page as an overlay so its important that your trigger is on a different layout
  • Navigate to the “Interactions” panel in the right sidebar
  • Locate the “On Press” Field
  • Choose “Modals open” from the dropdown
• Linking your search modal trigger
• • Go to the layout that contains the search modal component and select it in the layout structure, inside of the structure panel
  • Right click and “Copy ID”
  • Go back to your trigger component 
  • Reopen the Interactions panel
  • This time, locate the “Layout ID” field
  • Paste the layout ID you copied into the field
• Search Modal Styling Tips
• • In order for the search results container to appear above all of the other content on the page, it needs to have a Z index above 0 and be absolutely positioned so it can stand alone, and not be part of the actual search header container.