To add Elevated Product Search to a Breakdance template, go to Breakdance › Templates, open your Header or Product Archive template, add a Shortcode element, and enter [elex_product_search].
Breakdance templates control global areas of your site, including the header.
Go to Breakdance › Headers in your WordPress admin.
Locate your Header template and click Edit in Breakdance. If you have multiple headers, select the one active on your shop pages.
In the Breakdance canvas, locate the area where you want the search form. This is typically next to the navigation menu.
Click Add to open the element library. Search for Shortcode and add it to the canvas.
Select the Shortcode element to open its properties panel on the left.
Enter the shortcode in the field:
[elex_product_search]
Click Save in the top toolbar to save the template.
Visit your site frontend to confirm the search form appears in the header.
Go to Breakdance › Templates.
Look for the template that controls your shop page or product archives. In Breakdance, this is often a template with the condition set to All Product Archives or a specific Shop Page template. If you do not have one, create a new template and assign it to your product archives.
Click Edit to open the template in the Breakdance builder.
Locate the section where you want the search form. Many stores place a search bar in the sidebar or near the page title.
Add the Shortcode element to that section.
Enter the shortcode in the properties panel:
[elex_product_search]
Click Save.
Visit your shop page to confirm the search form appears and returns live results.
Breakdance columns and divs often have fixed widths that may conflict with the default search form size.
Navigate to Elevated › Product Search › Settings › Basic Settings.
Look for Max Form Width and set a value that fits your Breakdance container. For narrow header columns, use a smaller value (such as 300 pixels).
Look for Layout and select Icon on mobile if the header column is too narrow for a full input field. This collapses the search into an icon that opens an off-canvas panel when clicked.
Click Save Settings.
The Preview panel updates to show the adjusted width.
Breakdance templates manage layouts that apply across your entire store. Placing the [elex_product_search] shortcode in a template ensures the search form appears on every page that matches the template conditions without editing individual posts or pages.
For example, a header template assigned to your Entire Site will display the Elevated Product Search form in the header of every page. A Product Archive template will show the form on your shop page and category pages automatically.
The Breakdance Shortcode element executes the shortcode and renders its output directly inside the container. Because Elevated Product Search handles its own HTML structure and JavaScript for AJAX functionality, the form operates independently of Breakdance’s styling system. This means the search form works inside Breakdance columns, sections, and divs without additional configuration.
If you need the search form on a single landing page or custom page only, you can use the same Shortcode element on that specific page. For store-wide search, templates are the efficient approach.
The shortcode displays as plain text
Confirm you used the Shortcode element and not a Text or Code Block element. Only the Shortcode element executes shortcodes automatically in Breakdance.
The form is too wide for the header column
Reduce Max Form Width in Elevated › Product Search › Settings › Basic Settings to fit the column width.
The search form overlaps other header elements
Adjust the column width in Breakdance or move the Shortcode element to its own column or div.
Changes do not appear on the frontend
Clear your site cache and browser cache. If you are using Breakdance’s caching, regenerate it from the Breakdance settings.
