> For the complete documentation index, see [llms.txt](https://webvista-studio.gitbook.io/krank/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webvista-studio.gitbook.io/krank/sections/media-and-layout/dropdown-filter-banner.md).
# Dropdown Filter Banner
The **Dropdown Filter Banner** section helps customers find the right product or category through a guided set of dropdown menus. It is especially useful for stores where customers often search by a sequence such as **Make → Model → Generation**, **Category → Subcategory → Type**, or **Brand → Series → Product line**.
The dropdown options come from a Shopify menu. To get the best result, create a menu with up to three levels, then select that menu in the section.
***
### Create a 3-level menu
1. In your Shopify admin, go to **Online Store > Navigation**.
2. Click **Add menu**.
3. Give the menu a clear name, such as **Vehicle Finder** or **Parts Finder**.
4. Add the first-level items. These will appear in the first dropdown.
* Example: **Ford**, **Toyota**, **BMW**
5. Under each first-level item, add second-level items. These will appear after a customer makes the first selection.
* Example under **Ford**: **F-150**, **Ranger**, **Mustang**
6. Under each second-level item, add third-level items if needed.
* Example under **F-150**: **2015-2020**, **2021-2024**, **2025+**
7. Set the link for each final menu item to the destination customers should visit, such as a collection, product, or search results page.
8. Save the menu.
> Tip: Keep the first, second, and third levels consistent. A clear structure makes the dropdowns easier to use.
***
### Add the menu to the section
1. Go to **Online Store > Themes**.
2. Click **Customize** on your current theme.
3. Open the page where you want to show the finder.
4. Click **Add section** and choose **Dropdown Filter Banner**.
5. Add or keep the **Dropdown filter** block inside the section.
6. In the **Dropdown filter** block settings, choose the menu you created.
7. Set **Number of selectors** to:
* **1** for one dropdown
* **2** for two connected dropdowns
* **3** for a full three-step finder
8. Update the placeholder text, such as **Select Make**, **Select Model**, and **Select Generation**.
9. Adjust the search button label, style, icon, and optional custom button.
10. Save the theme.
***
### Banner settings
Use the section settings to control the banner image, layout, and content area:
* **Enable full width**: Makes the banner stretch across the page.
* **Color scheme**: Sets the background color style for the banner area.
* **Image**: Adds the banner background image.
* **Image opacity**: Adjusts how visible the image appears behind the content.
* **Content width**: Controls the width of the content container.
* **Position**: Places the content on the left, center, or right side of the banner.
* **Text alignment**: Aligns the heading, description, and buttons.
***
### Content blocks
You can add these blocks to shape the banner message:
* **Subheading**
* **Heading**
* **Description**
* **Dropdown filter**
Use the text blocks to explain what customers can find, and use the dropdown filter block as the main action area. The **Subheading** block can also show a custom color and Accent Line to highlight short intro text.
***
### Usage tips
* Use short, familiar labels for menu items.
* Link the final menu level to the most relevant collection or product page.
* If your store only needs two steps, set the selector count to **2**.
* Use a clear search button label, such as **Search**, **Find Parts**, or **Find Products**.
* Choose a background image that supports the content without making the dropdowns hard to read.
