> ## 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.

# Adding a Search Page block

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

Nex step is adding the search page block to your search page template. This is where users can view search results, filter and sort once they've pressed "enter" or "search" in the search modal.

If you want an overview of the search flow for a user, check out <a href="/react-ui-guide/search/overview" target="_blank">this page in the React UI guide <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 512 512" style={{display:"inline"}}><path style={{fill:"var(--tw-prose-links)"}} d="M352 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9L370.7 96 201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L416 141.3l41.4 41.4c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V32c0-17.7-14.3-32-32-32H352zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" /></svg></a>

<Steps>
  <Step title="First Step">
    Select the search page template

    <Frame caption="Click to enlarge">
      <img
        src="https://cdn.statically.io/gh/depict-org/documentation-images/main/shopify/selecting-search-template2.svg"
        alt="Opening search page template editor"
        style={{aspectRatio: 3900/2157, 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>
  </Step>

  <Step title="Second Step">
    Add the Depict Search Page block to the search template.
    You might also want to hide your old search results block in this step.

    <Frame caption="Adding a search page block to the search template" style={{maxWidth: "500px"}}>
      <img
        src="https://cdn.statically.io/gh/depict-org/documentation-images/main/shopify/adding-search-block2.svg"
        style={{aspectRatio: 1280/2240, 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>
  </Step>

  <Step title="Done">
    Change the configurable options as you like and hit save

    <Frame caption="The search page block has been added">
      <img
        src="https://cdn.statically.io/gh/depict-org/documentation-images/main/shopify/search-page-added2.svg"
        style={{aspectRatio: 3866/2702, 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>
  </Step>
</Steps>