> ## Documentation Index
> Fetch the complete documentation index at: https://docs.depict.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> An overview of the search components and flow

<Warning>
  This page does not apply to installs made in 2025 or later of the Depict Shopify apps
</Warning>

## There's two main parts to adding Depict UI Search to your site:

1. Adding a search field or button to your site
2. Adding a search results page to your site

## This will result in the following flow for the user:

#### <span style={{"font-size": "2em"}}>👇</span> 1. The user clicks on the search button or search field.

<CardGroup cols={2}>
  <Frame caption="SearchField">
    <div style={{display:"flex", flexDirection: "column", gap:"16px"}}>
      <img
        src="https://cdn.statically.io/gh/depict-org/documentation-images/main/new-search-field.svg"
        style={{aspectRatio: 1920/162.667, width: "100%"}}
        ref={element => {
           // In prod, they have some zoom thing which breaks aspectRatio, work around that. Unfortunately this is not in the SSR'd output so there's still some CLS.
           const direct_parent = element?.parentElement;
           if(direct_parent?.matches?.("[data-rmiz-content]")) {
               Object.assign(direct_parent.style, {
                   width: "100%",
                   display: "flex",
                   justifyContent: "center",
                   alignItems: "center"
               })
           }
           const parents_parent = direct_parent?.parentElement;
           if(parents_parent?.matches?.("[aria-owns^='rmiz-modal']")) {
               parents_parent.style.width = "100%";
           }
       }}
      />

      or

      <img
        src="https://mintcdn.com/depictai/oqYy6W_ukzaDVZL8/images/search_field.svg?fit=max&auto=format&n=oqYy6W_ukzaDVZL8&q=85&s=b059f3b17767afc211ca632b37b6575d"
        style={{aspectRatio: 1083/81, width: "100%"}}
        ref={element => {
           // In prod, they have some zoom thing which breaks aspectRatio, work around that. Unfortunately this is not in the SSR'd output so there's still some CLS.
           const direct_parent = element?.parentElement;
           if(direct_parent?.matches?.("[data-rmiz-content]")) {
               Object.assign(direct_parent.style, {
                   width: "100%",
                   display: "flex",
                   justifyContent: "center",
                   alignItems: "center"
               })
           }
           const parents_parent = direct_parent?.parentElement;
           if(parents_parent?.matches?.("[aria-owns^='rmiz-modal']")) {
               parents_parent.style.width = "100%";
           }
       }}
        data-og-width="1083"
        width="1083"
        data-og-height="81"
        height="81"
        data-path="images/search_field.svg"
        data-optimize="true"
        data-opv="3"
        srcset="https://mintcdn.com/depictai/oqYy6W_ukzaDVZL8/images/search_field.svg?w=280&fit=max&auto=format&n=oqYy6W_ukzaDVZL8&q=85&s=d00f3c969ea031cf55396d60f9441a44 280w, https://mintcdn.com/depictai/oqYy6W_ukzaDVZL8/images/search_field.svg?w=560&fit=max&auto=format&n=oqYy6W_ukzaDVZL8&q=85&s=9f8774df7157002b8a3039fd112fb9c5 560w, https://mintcdn.com/depictai/oqYy6W_ukzaDVZL8/images/search_field.svg?w=840&fit=max&auto=format&n=oqYy6W_ukzaDVZL8&q=85&s=d7ddfab7a7db3b62a7e2d899d685334b 840w, https://mintcdn.com/depictai/oqYy6W_ukzaDVZL8/images/search_field.svg?w=1100&fit=max&auto=format&n=oqYy6W_ukzaDVZL8&q=85&s=0ad7efcd50d841ce18b9d31d122e7ada 1100w, https://mintcdn.com/depictai/oqYy6W_ukzaDVZL8/images/search_field.svg?w=1650&fit=max&auto=format&n=oqYy6W_ukzaDVZL8&q=85&s=24213a586dcbeb045c2b9ab994cc3146 1650w, https://mintcdn.com/depictai/oqYy6W_ukzaDVZL8/images/search_field.svg?w=2500&fit=max&auto=format&n=oqYy6W_ukzaDVZL8&q=85&s=d98ce7c6804559da9ffbfdc1819ff7ea 2500w"
      />
    </div>
  </Frame>

  <Frame caption="A search button">
    <img src="https://mintcdn.com/depictai/oqYy6W_ukzaDVZL8/images/search_button.svg?fit=max&auto=format&n=oqYy6W_ukzaDVZL8&q=85&s=c5b35bf4c1954633eb56e7816dff09da" width="30" height="30" data-path="images/search_button.svg" />
  </Frame>
</CardGroup>

#### <span style={{"font-size": "2em"}}>👇</span> 2. The search modal opens, this is what the user sees while typing a query.

<CardGroup cols={2}>
  <Frame caption="Modal V2, Click to enlarge">
    <img
      src="https://cdn.statically.io/gh/depict-org/documentation-images/main/new-search-modal2.svg"
      style={{aspectRatio: 4800/2793.333, width: "100%"}}
      ref={element => {
    // In prod, they have some zoom thing which breaks aspectRatio, work around that. Unfortunately this is not in the SSR'd output so there's still some CLS.
    const direct_parent = element?.parentElement;
    if(direct_parent?.matches?.("[data-rmiz-content]")) {
        Object.assign(direct_parent.style, {
            width: "100%",
            display: "flex",
            justifyContent: "center",
            alignItems: "center"
        })
    }
    const parents_parent = direct_parent?.parentElement;
    if(parents_parent?.matches?.("[aria-owns^='rmiz-modal']")) {
        parents_parent.style.width = "100%";
    }
}}
    />
  </Frame>

  <Frame caption="Classic modal, click to enlarge">
    <img
      src="https://cdn.statically.io/gh/depict-org/documentation-images/main/old-search-modal2.svg"
      style={{aspectRatio: 2594.667/3165.333, width: "100%"}}
      ref={element => {
    // In prod, they have some zoom thing which breaks aspectRatio, work around that. Unfortunately this is not in the SSR'd output so there's still some CLS.
    const direct_parent = element?.parentElement;
    if(direct_parent?.matches?.("[data-rmiz-content]")) {
        Object.assign(direct_parent.style, {
            width: "100%",
            display: "flex",
            justifyContent: "center",
            alignItems: "center"
        })
    }
    const parents_parent = direct_parent?.parentElement;
    if(parents_parent?.matches?.("[aria-owns^='rmiz-modal']")) {
        parents_parent.style.width = "100%";
    }
}}
    />
  </Frame>
</CardGroup>

The SearchModal can either <b>align</b> to the SearchField that was used to open it, an arbitrary element, or the center of the screen.

You can choose which of the SearchModal variants you want to use. The v2 modal is the default, follow [these steps](/other-guides/introduction#switching-to-the-classic-search-modal) to use the classic one.

#### <span style={{"font-size": "2em"}}>👇</span> 3. The user submits a query and goes to a new URL, like `/search`

<Frame caption="The SearchPage which displays the results along with sorting options, filters and search recommendations">
  <img
    src="https://mintcdn.com/depictai/oqYy6W_ukzaDVZL8/images/search_page.svg?fit=max&auto=format&n=oqYy6W_ukzaDVZL8&q=85&s=d2141dc0506f548b29ba95e52bde32ea"
    noZoom
    style={{aspectRatio: 1960/5365, width: "100%"}}
    ref={async element => {
    if(!element) return;

    // Fix background color in dark mode while still having cool, transparent light mode background
    if(!window.utilishared_promise) {
        window.utilishared_promise = new Promise(resolve => {
            window.resolve_utilishared = resolve;
            const script = document.createElement("script");
            script.type = "module";
            script.append(`
        import * as utilishared from "https://esm.run/@depict-ai/utilishared@latest/latest";
        window?.resolve_utilishared(utilishared);
        `)
            document.head.append(script);
        })
    }

    const utilishared = await utilishared_promise;

    const { style } = element;
    const update_styling = () => {
        const dark = document.documentElement.classList.contains("dark");
        style.background = dark ? "white" : "";
        style.padding = dark ? "10px" : "";
        style.borderRadius = dark ? "0.75rem" : "";
    };
    const m_o = new MutationObserver(utilishared.catchify(update_styling));
    m_o.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ["class"]
    })
    update_styling();
    utilishared.observer.onremoved(element, () => m_o.disconnect());
}}
    data-og-width="1960"
    width="1960"
    data-og-height="5365"
    height="5365"
    data-path="images/search_page.svg"
    data-optimize="true"
    data-opv="3"
    srcset="https://mintcdn.com/depictai/oqYy6W_ukzaDVZL8/images/search_page.svg?w=280&fit=max&auto=format&n=oqYy6W_ukzaDVZL8&q=85&s=fd1987fbf6e266424ee857f03809157b 280w, https://mintcdn.com/depictai/oqYy6W_ukzaDVZL8/images/search_page.svg?w=560&fit=max&auto=format&n=oqYy6W_ukzaDVZL8&q=85&s=b6d7c816b455d2ab0036776795a066b8 560w, https://mintcdn.com/depictai/oqYy6W_ukzaDVZL8/images/search_page.svg?w=840&fit=max&auto=format&n=oqYy6W_ukzaDVZL8&q=85&s=9644ad809d7914fe3a946537f9fed182 840w, https://mintcdn.com/depictai/oqYy6W_ukzaDVZL8/images/search_page.svg?w=1100&fit=max&auto=format&n=oqYy6W_ukzaDVZL8&q=85&s=f17ef6e2417e9899d29b785b1d42439f 1100w, https://mintcdn.com/depictai/oqYy6W_ukzaDVZL8/images/search_page.svg?w=1650&fit=max&auto=format&n=oqYy6W_ukzaDVZL8&q=85&s=274ac759e60d6157b8c0f671dc25b473 1650w, https://mintcdn.com/depictai/oqYy6W_ukzaDVZL8/images/search_page.svg?w=2500&fit=max&auto=format&n=oqYy6W_ukzaDVZL8&q=85&s=9d93c498db5cc50b0b6cfec62763e577 2500w"
  />
</Frame>