You can combine two of the most popular layers to generate a more attractive design for your users. We are talking about the Floating layer combined with the Embedded layer.
This way, when starting a search, the floating layer will appear first and when the user hits enter, the layer will be embedded in your web page integrating your design.
1.Initial search:
2.After hitting enter:
If you want a button to trigger the embedded layer, note that it must be of type "submit" and must be located inside a form. For example:
<form action="">
<input id="mysearchbox" name="qs">
<button type="submit">Submit</button>
</form>
1.First, create a floating layer. To learn how to create a layer, read the article 'Create Layer'.
2.Then, go to Layers > General Settings > Search Configuration and select Desktop or Mobile view.
3.In 'Search Sequence', you need to activate the embedded results option. This action can be combined with the activation of the initial results option as well.
4.Now, use a CSS selector to indicate the insertion point on your page to contain the embedded search results. To learn how to choose a CSS selector, read this article.
5.Remember to save the changes.
Once the layer is created, you need to go to Store Settings > Configuration > Search Layers and select the layer created. Then, save.