Skip to content
ClickFunnels Help CenterClickFunnels Help CenterClickFunnels Help CenterGo to CF Classic Help Center

Store Search: Enable Users to Search Your Store

Published: Updated:

The Store Search element in ClickFunnels enables customers to quickly find products within your store, improving their shopping experience. By adding and customizing the Store Search, you can help users easily locate items, especially within large product collections. This article will guide you through adding the Store Search element to your storefront and personalizing its appearance.

Requirements

Section titled “Requirements”

  • An active ClickFunnels account

  • The Store app

  • A product created in the Products section

  • Ensure that each product included in the “Product Collection” is visible in your Store (the Store switch on the product’s Sales channels tab).

How to Add the Store Search Element

Section titled “How to Add the Store Search Element”

  1. In your ClickFunnels dashboard, navigate to the Store app and select Overview.

  2. Click Design Store to open the Store Theme Editor.

  3. In the left-hand menu, under Site theme pages, choose the page where you’d like to add the search bar.

  4. Inside the selected page, click Add Element within a row to open the Elements menu.

  5. In the Elements, select Search from the Store category.

Customizing the Store Search Element

Section titled “Customizing the Store Search Element”

Accessing Settings

Section titled “Accessing Settings”

When you hover over an element, its border will be highlighted in orange. To access an element’s settings, click on the gear ⚙️ icon or click directly on the element.

Preview

Section titled “Preview”

Use the preview selector at the top of the settings panel to switch the editor view between the search icon and the search modal.

  • Icon: Hides the modal, allowing you to preview only the search icon.

  • Modal: Displays the modal with placeholder content, such as product names and images, so you can see the layout and design before saving.
    Store Search Preview selector: Icon shows only the search icon, Modal shows the search modal with placeholder products

Top Margin

The Top Margin setting lets you control the space between the current container (section, row, flex, and element) and the container directly above it. If no previous container exists, the margin will be applied relative to the parent container. If no preceding container is added, the Body will be the parent.

You can set top margin values independently for desktop and mobile by using the device icons (🖥️ & 📱 ). If no mobile value is specified, it will inherit the desktop setting by default. Use the slider or manually enter a value in pixels (px) or percentage (%) to create consistent spacing across screen sizes.

Search Icon

Adjust how the search icon appears within the search bar. Search Icon

  • Size: Set the icon size in pixels to match your design needs.

  • Color: Choose a color for the icon that aligns with your store’s theme.

  • Align: Position the icon to the left, center, or right within the search bar.

General

Customize the overall appearance and functionality of the Store Search modal. Store Search General settings and Text Settings

  • Backdrop Color: Select the color of the overlay behind the search modal.

  • Background Color: Select a background color for the search modal.

  • Text Color: Choose the color for text displayed in the modal to enhance readability.

  • Border Color: Set the border color used in the modal.

  • Border Color Focus: Set the border color of the search field while a customer is typing in it.

  • Text Size: Adjust the font size for modal text; options include Extra Small, Small, Medium, Large, and Extra Large. The default is Large.

  • Brand Image: Shows an image, such as your logo, at the top of the modal. It’s on by default. Use Brand Image Url to choose the image.

Text Settings

  • Input Text: Set placeholder text in the search bar (default: “Search Products”) to guide users on how to search.

  • Title: Enter a title that appears above the search results. The default is “Recommended Products”.

  • No results text: Customize the message shown when no products match the search term. Use {search} as a placeholder to display the term entered by the user (e.g., “No results found for {search}”).

Advanced Settings

To further customize your container (section, row, column, and element), ClickFunnels provides Advanced settings that allow you to control style, advanced CSS, animation, and rendering logic. We’ve separated these advanced features into dedicated articles to avoid overwhelming you with too much content in one place and to keep our documentation concise. Explore the following resources for more details:

Control Panel

The Element Control Panel appears at the bottom of every element in the page editor, offering quick access to essential settings and actions for that element. Here’s what each icon represents:
Settings panel with the Code (</>) icon in the header and the Visibility, All, Desktop, Mobile, eye and trash icons in the bottom bar

  • ALL: The element will be visible on all devices (desktop, tablet, and mobile).

  • Desktop Icon: The element will only be visible on the desktop view.

  • Mobile Icon: The element will only be visible on mobile view.

  • Eye Icon: Use this to hide the element from the page. The element will still be present in the editor but invisible to visitors.

  • Code (</>): Opens the code editor for this container, where you can add custom CSS to change its styling. The editor shows the container’s CSS ID Selector so your CSS targets only this container. Open it from the code icon at the top of the settings panel, or hover over the container on the page and click Code in its toolbar.

  • Trash Icon: Removes the element from the page editor entirely.