Description:

This component places an always visible search bar directly into your layout, ideal for pages where search should be more accessible, not tucked away in a modal. When paired with the Search Overlay Results component, it displays real-time product results in an overlay below the input. Shipcode allows you to render search query examples as a styling preview in the canvas; however, the true component will accept any query. 

This component requires two components to work in tandem. The Exposed Shopify Search which renders as a search bar, and the  Search Overlay Results which appears when users start typing a query.

📍📍📍 Note 📍📍📍

This pattern is intentionally designed to return category-level results, which provide 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 components
• • Go to the Libraries tab in the components panel
  • Locate the “Exposed Shopify Search” Component and the “Shopify Search Overlay Results” Component 
  • Drag each of them onto separate layouts
  • Data not showing up?
  • • On the “Search Overlay Results” 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”
• Linking your components
• • Select the layout that has the “Search Overlay Results” Component
  • Right click and “Copy Layout ID”
  • Go back to the layout that has the “Exposed Shopify Search” Component
  • • Select the Results Data Zone layer
    • Navigate to the right sidebar and select Settings
    • Paste the “Layout ID” into the Search Modal Layout ID field