Search Drawer

Elevate Navigation: Customize the Search Drawer in your shopify theme

To customize the Search Drawer and Search Recommendations for your Shopify theme, you can adjust the following settings to optimize how your search results and product recommendations appear. Here's a breakdown of the options you provided:

1. Color scheme

   1. Purpose: Adjust the color scheme for the search drawer to ensure it matches your store’s branding and visual identity.

   2. How to enable

      1. In the Theme Customizer, locate the Colors or Theme Settings section.

      2. Under Search Drawer Colors, choose Scheme 6 or any other color scheme that fits your design.

      3. This will update the color of the search input field, background, text, and any other elements within the search drawer to match your store's branding.

2. Search popular searches

   1. Purpose: Display popular search terms to help customers find products more easily.

   2. How to enable

      1. In the Search Drawer settings, you may have an option to display popular search terms or recent searches.

      2. Add keywords such as:

         1. Tenacity

         2. Tenacity Heat

         3. Amplify Shorts

         4. Flex Short

      3. These can be pre-defined in the search settings or linked to your store’s most searched products.

      4. You can also enable the feature to display search terms dynamically based on your customers' browsing behavior.

3. Search recommendations products

   1. Purpose: Show recommended products based on the user’s search query.

   2. How to enable

      1. In the Search Drawer or Search Results settings, enable Search Recommendations Products.

      2. This feature dynamically shows products related to the search query. For example, if someone searches for mens shorts, the drawer can show products like mens shorts or other related categories like Flex Shorts or Amplify Shorts.

      3. You can also configure the number of products to display, ensuring it offers a helpful set of recommendations.

4. Center gap

   1. Purpose: Adjust the space between search recommendation products in the drawer.

   2. How to enable

      1. In the Theme Customizer under the Search Drawer or Product Grid settings, find the Center Gap setting.

      2. Set the gap to your desired value (for example, 10px), ensuring the products are spaced evenly within the drawer.

5. Products to show

   1. Purpose: Define how many products will be shown in the search drawer recommendations.

   2. How to enable

      1. In the Search Drawer settings, look for an option to control the number of products shown.

      2. Set Products to Show to 12 or your preferred number, ensuring enough options are visible without overwhelming the customer.

6. Desktop columns

   1. Purpose: Customize the layout of the search results on the desktop.

   2. How to enable

      1. In the Search Drawer settings, locate the Desktop Columns setting.

      2. Set it to 4 to display four columns of recommended products, ensuring a clean and organized layout on larger screens.

7. Tab columns

   1. Purpose: Customize how many columns appear in a tabbed layout, useful if you have different product categories or filters.

   2. How to enable

      1. In the Search Drawer settings, find the Tab Columns option.

      2. Set this to 2 to display two columns under each tab, ensuring the search results and recommendations are easy to navigate.

8. Mobile columns

   1. Purpose: Adjust the layout of the search results on mobile devices.

   2. How to enable

      1. In the Search Drawer settings, locate the Mobile Columns setting.

      2. Set it to 2 to display search results in two columns on mobile, ensuring the content remains legible and easy to browse.

Additional customization via liquid and javaScript

If you want to further customize how the search drawer operates or how search recommendations are generated, you can edit the theme’s Liquid and JavaScript code:

1. Search drawer liquid template

   1. Go to Online Store > Themes > Actions > Edit Code.

   2. Locate the search-drawer.liquid or similar file.

   3. Customize the HTML, CSS, or JavaScript to adjust the layout, behavior, or filtering of the search results.

2. Search recommendation logic

   1. Shopify's search uses the Search API to fetch product data. You can further enhance recommendations by integrating with apps or using a custom API.

   2. If using dynamic recommendations based on search terms, you can customize the results by writing JavaScript that fetches related products.