Header Shop Search

An always-visible product search field for a header row: the storefront and directory alternative to the header search toggle. Choose a bare field with a resting glyph or an input group with a submit button. It is shown in the block inserter as Canvas Header Shop Search and registered as canvas-core/header-shop-search.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Settings

• LayoutDefaultField with resting icon

  The resting-icon layout draws the glyph inside the field; the input group puts a submit button beside it.

  ChoicesField with resting iconInput group with button

• Search Products OnlyDefaultOn

  Restricts results to products. Turn off to search the whole site.

• Expand on FocusDefaultOff

  Keeps the field narrow in the bar and widens it while the visitor is typing.

• Italic PlaceholderDefaultOff

  Sets the prompt text in italics and fades it back.

• Form ClassesDefaultEmpty

  Classes on the . Empty falls back to the layout's own (position-relative mb-0, or mb-0 for the input group).

• Field ClassesDefaultform-control

  Classes on the search input.

• Field Inline CSSDefaultEmpty

  Inline style on the input, for corner overrides an input group needs and no utility expresses.

• IconDefaultuil uil-search

  Glyph resting in the field, or on the submit button in the input-group layout.

• Icon Extra ClassesDefaultEmpty

  Extra classes on the glyph, e.g. to colour it.

• Button ClassesDefaultbtn btn-dark

  Classes on the submit button (input-group layout only).

  Shown when Layout is "Input group with button"

• Button Inline CSSDefaultEmpty

  Inline style on the submit button, for the overlap and corner overrides a pill-shaped input group needs.

  Shown when Layout is "Input group with button"

• Input Group ClassesDefaultEmpty

  Extra classes on the input group itself, which is where a design puts the field's border, its radius and the widths it appears at.

  Shown when Layout is "Input group with button"

• The Form IS the GroupDefaultOff

  Put the input-group classes on the form element itself rather than on a division inside it, for a design that styles the group directly and expects no extra element.

  Shown when Layout is "Input group with button"

• The Glyph IS the ButtonDefaultOff

  Put the icon font's own classes on the search button instead of a glyph element inside it, which is how an icon-font affix in an input group is usually drawn.

  Shown when Layout is "Input group with button"

• Glyph Links to the Results PageDefaultOff

  Draw the group as a plain division whose glyph is a link to the search results page instead of a form with a submit button. The field still searches: a shipped script sends it to that destination on Enter and on the glyph.

  Shown when Layout is "Input group with button"

• Glyph Before the FieldDefaultOff

  Put the search button at the start of the group instead of the end, which is the leading-glyph field many headers use.

  Shown when Layout is "Input group with button"

Content

• PlaceholderDefaultSearch for Products..

  Prompt shown in the empty field.

• Accessible LabelDefaultSearch products

  Names the field for screen readers. The field has no visible label, so this is its only name.

Related

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Header: App Menu, Header Button, Header Cart, Header Container, Header Icon Link, Header Info.