Set a custom Search trigger selector

When should I use a custom Search trigger selector?

The Index™ normally detects the storefront search trigger automatically and connects the RecoMelon search experience to it. Custom Shopify themes can use bespoke icons, header components or JavaScript-driven search controls that are not detected reliably.

If clicking your existing search control does not open The Index™, or the trigger is attached to the wrong element, use a custom trigger selector to identify the correct storefront element manually.

How to set the selector

1. Open The Index™ / Search settings in RecoMelon and locate the custom trigger-selector field.
2. Open your Shopify theme editor and navigate to a storefront page where the search control is visible.
3. Use your browser's inspector to select the search icon, button or control.
4. Inspect its parent elements and identify a stable, descriptive class belonging to the clickable search control or its container.
5. Copy the class name. If, for example, the class is header-search-trigger, enter it in RecoMelon with a leading dot: .header-search-trigger
6. Save your settings and refresh the theme preview before testing the search control again.
7. Test the trigger on the storefront as well as inside the Shopify theme editor.

Choosing a reliable selector

Use a selector that uniquely identifies the intended search control. Avoid very broad classes that are shared by multiple buttons, icons or navigation elements.

If the icon itself uses a generated or frequently changing class, move upwards in the inspector and select a stable parent button or search container instead.

Example

If your search trigger is wrapped like this:

<button class="header-search-trigger">...</button>

Enter:

.header-search-trigger

Changes are not appearing immediately

After changing the selector, refresh the page before testing again. Shopify theme previews and storefront assets can sometimes retain an earlier rendered state, so the new trigger behaviour may appear inconsistent until the page has been refreshed. If necessary, test in a fresh storefront tab after saving.

If The Index™ still does not open

Inspect the search control again and confirm that the selector belongs to the clickable element or a stable parent around it. Avoid targeting a decorative SVG or icon path directly, as these elements may not provide a reliable interaction target.