Switching to the classic search modal (JS-UI)

This page does not apply to installs made in 2025 or later of the Depict Shopify apps

Where you construct your searchProvider, import and pass in the ClassicSearchModal as the searchModalComponent property.

import { ClassicSearchModal } from "@depict-ai/js-ui";

const searchProvider = new DepictSearchProvider<YourDisplay>({
  // … other properties
  searchModalComponent: ClassicSearchModal,
});

Where you import the Depict UI SCSS, set the $search-modal-layout variable to "classic".

@use "@depict-ai/js-ui" with ($search-modal-layout: "classic");

A note about bundle size (Advanced)

Because the new search modal is the default, it can’t be tree-shaken by default. However, if you want to use the old search modal and not have the new one included in your bundle, you can do the following:

Set up your build system so you can inline/substitute envirnoment variables into your code. For example, with webpack, you can use the DefinePlugin.
Ensure the expression process.env.NO_SEARCH_MODAL_DEFAULT becomes substituted to "true" (if you use parcel you can just set the environment variable NO_SEARCH_MODAL_DEFAULT to true while building), this leads to your minifier being able to remove the new search modal from the bundle.

Other guides