---
description: 'Elevate Navigation: Customize the Search Drawer in your shopify theme'
---

# Search Drawer

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.
