Adding a way to open the Search Modal
The search modal is what’s used to make a search and get to the results page. You need to add a way for the user to open the modal.
There are three ways to do this:
Option 1: Re-using your existing search button
Option 1: Re-using your existing search button
Option 2: Adding a Depict search button
Option 2: Adding a Depict search button
Option 3: Adding a Depict search field
Option 3: Adding a Depict search field
If you prefer a visible search field in your header instead of just a button, there is a “Depict Search Field” block that you can use which will automatically align and connect to the modal.
First Step
Add a search field block in the theme editor (Or manually add <div class="depict-search-field"></div> in your theme)
Adding a search field block in the theme editor
Done
You now have a search field that will open the Depict search modal, aligned to it, as you can see in the following screenshots.
The "Depict Search Field" block
The search modal that aligns to the search field when focusing/clicking it
Optional: Alignment options
When using the search field, the modal will automatically align to the SearchField (landscape modal) or align to it initially and then animate the X-direction to be centered (portrait modal).
When using a search button, there are two different alignment modes available, provided you’re using the landscape search modal:
Center aligned (default), Click to enlarge
Vertically aligned to button, click to enlarge
One advantage of aligning the modal to the button is that the position of the modal won’t shift as the content in it changes.
Enabling the vertically-aligned-to-button mode
- When re-using your existing search button, add
data-align-to-self="true"to the element. - When using the “Depict Search Button”-block, check the “enable button to modal in y-axis” box in the block settings
Block settings of the "Depict Search Button"