The Elevated Product Search form can be placed in any sidebar area using the [elex_product_search] shortcode. This article shows how to add it to your sidebar in block themes, classic themes, and page builders, then adjust the width so it fits narrow containers.
Block themes manage sidebars through template parts in the Site Editor.
Go to Appearance › Editor.
Select Template Parts from the left navigation, then choose the sidebar template part (commonly named Sidebar or Right Sidebar).
Click the area where you want the search form, then click the + button to add a block.
Select Shortcode and enter:
[elex_product_search]
Click Save.
Classic themes use the Widgets screen to manage sidebar content.
Go to Appearance › Widgets.
Locate the sidebar widget area (commonly named Primary Sidebar, Sidebar, or Blog Sidebar).
Click Add Block and select Shortcode.
Enter the shortcode:
[elex_product_search]
Click Update.
If your sidebar is managed by a page builder (such as Elementor or Breakdance), you can add the shortcode directly into the sidebar area of your page or template.
Open the page or template that contains the sidebar in your page builder.
Locate the sidebar area in the builder canvas.
Add a Shortcode widget (or HTML widget, depending on the builder).
Enter the shortcode:
[elex_product_search]
Save the page or template.
Sidebars are typically 250 to 350 pixels wide. The default search form width may exceed this and break the layout on some themes.
Navigate to Elevated › Product Search › Settings › Basic Settings.
Look for Max Form Width and reduce it to fit your sidebar container (for example, 300 pixels).
Or look for Layout and select Icon Only to collapse the search input into an icon that opens an off-canvas search panel when clicked.
Click Save Settings.
The Preview panel updates to show the narrower form.
Visit a page that displays the sidebar, such as a shop page or single product page.
Confirm the following:
Check mobile view. On narrow screens, the sidebar typically moves below the main content. Confirm the search form is still usable there.
The [elex_product_search] shortcode uses the global settings from Elevated › Product Search › Settings regardless of where you place it. This means the same form configuration applies to your header search, page search, and sidebar search.
However, sidebars introduce unique constraints. The container width is narrow, so a default form width of 500 pixels or more will break the layout. The Max Form Width setting exists to handle this. Setting it to match your sidebar width ensures the form sits cleanly inside the container.
The live results dropdown renders relative to the search input field. Elevated Product Search displays search results using an overflow layout that works correctly in most themes without breaking the sidebar structure. Some themes apply overflow: hidden to sidebar containers, which can clip the dropdown and hide search results. The Advanced section below addresses this.
Elevated Product Search displays search results using an overflow layout that works correctly in most themes. If your theme restricts visible content inside the sidebar using CSS overflow rules, the dropdown may be cut off at the bottom of the sidebar.
Go to Appearance › Customize › Additional CSS.
Add the following CSS:
.widget-area,
.sidebar,
aside {
overflow: visible;
}Note: The exact selector depends on your theme. Use your browser’s developer tools to inspect the sidebar container and find the correct class. Common names include .widget-area, .sidebar, .primary-sidebar, or #secondary.
If making the sidebar visible causes other layout issues, target only the widget containing the search form:
.widget:has(.elevated-product-search) {
overflow: visible;
}Click Publish.
The shortcode displays as plain text
You are using a Paragraph or HTML block instead of a Shortcode block. Switch to the Shortcode block.
The form overflows the sidebar
Reduce Max Form Width in Elevated Product Search › Settings › Basic Settings to a value smaller than your sidebar width.
Search results are cut off inside the sidebar
Your theme applies overflow: hidden to the sidebar container. Follow the Advanced section above to adjust the CSS.
The form does not appear on shop pages
Some themes use a full-width layout without sidebars on shop pages. Check your theme settings to enable sidebars on WooCommerce pages, or place the search form in your header instead.
