Product picker

Ask AI

Open in ChatGPT

Ask ChatGPT about this page

Open in Claude

Ask Claude about this page

1. What is Product picker?

The Product picker section allows you to showcase multiple product collections in a single section and let customers search and filter products within each collection.

This section is ideal for stores with large catalogs or multiple product categories, making product discovery faster and more intuitive.

2. Section Components

Section		Show multiple collections and help customers quickly filter products.
Available blocks		Add a separate collection with its filtering options.

3. Location & Setup

Go to "Online Store" > "Themes" > "Customize"
Select where you want to place it
Click "Add section"
Search for Product picker
Click on it to add.

4. Highlight Features

Up to 3 filters per collection for faster product discovery.
Flexible layout and styling to match your store design.
Customizable placeholder text for the collection selector and each filter dropdown - useful for multilingual stores.

5. Common Use Cases

🤔 How to set up the Product picker section?

Quick steps to bring up this section:

STEP 1: Add the section

Add the Product picker section following the steps in 3. Location & Setup.

STEP 2: Add a Collection block

Under the Product picker section in the left sidebar, click "Add block" and select Collection. Then click on the block to open its settings panel and configure the following:

Collection - click "Select" to choose the product collection you want customers to browse.
Alternative collection name - (optional) enter a custom display name for this collection. If left blank, the collection's original name is used.

STEP 3: Set up the filters

Each Collection block supports up to 3 independent filters. For each filter group (Filter 1, Filter 2, Filter 3), configure the following fields:

Field	What it does
Filter name	Enter the exact label of a filter created in your Shopify filter app (e.g. Search & Discovery). This must match exactly for the filter to work. ⚠️ Note (multilingual stores): If your store supports multiple languages, enter the filter label translations separated by semicolons in the same order as your store languages (e.g. `Price;Preis;価格`).
Title	Enter a user-friendly label to display above the filter dropdown (e.g. "Price range" instead of the raw filter key).
Dropdown option format	Choose how filter options appear inside the dropdown: Text only - shows the option label as plain text. Text with small image - shows a small thumbnail alongside the label. Text with large image - shows a larger thumbnail alongside the label.

Repeat Step 3 for Filter 2 and Filter 3 if needed. Leave any filter group's Filter name blank to skip it.

STEP 4: Add more Collection blocks (optional)

To showcase multiple collections in the same section, repeat Steps 2–3 to add more Collection blocks. Each block represents one collection with its own independent set of filters.

STEP 5: Click "Save" when done.

🤔 How to customize the Product picker section's look?

Want to make the section more visually attractive? Here's how:

STEP 1:

Click on the Product picker to open its settings panel.

STEP 2: Add section heading, description text, and image

Enter the Heading and Text.
Upload an Image to use as the section background and adjust its Overlay opacity.

STEP 3: Customize the navigation panel display

At the Navigation panel settings group:

Choose the layout of the navigation panel (on large screens):

Horizontal	Vertical

Enter the text for Collection select placeholder - this is the default prompt shown in the collection dropdown before a customer makes a selection. If left blank, it defaults to "Choose a category".
Enter text for Filter 1 placeholder, Filter 2 placeholder, and Filter 3 placeholder - these control the default prompt shown in each filter dropdown. If left blank, each defaults to "Select".
⚠️ Note: Customizing the placeholder text is especially useful for multilingual stores, where the default "Select" or "Choose a category" text may not translate automatically.
For Price filter style, choose how customers set the price:

Range slider
Input
Range slider and input

STEP 4: Click "Save" when done.

🤔 What customization options can you give your Product picker?

For the whole Product picker section:
✨ Change color scheme	Click on the Product picker section, and choose the overall scheme you want to use in both light and dark mode in the Color scheme.
✨ Change the heading size	Click on the Product picker section, and choose the Heading size to be Small, Medium, or Large.
✨ Change the Heading tag (for SEO purposes)	Click on the Product picker section, find and choose the Heading tag from the list.
✨ Change the text alignment	Click on the Product picker section, and choose the Text alignment to be Left, Right, or Center.
✨ Customize the collection selector placeholder text	Click on the Product picker section, scroll to the Navigation panel group, and enter your preferred text in Collection select placeholder. Leave blank to use the default "Choose a category".
✨ Customize the filter dropdown placeholder text	Click on the Product picker section, scroll to the Navigation panel group, and enter text in Filter 1 placeholder, Filter 2 placeholder, and/or Filter 3 placeholder. Leave any blank to use the default "Select".
✨ Change the section width, add padding, or add a divider	Click on the Product picker section, scroll down to the Section layout group, and you will be able to change those settings.

6. Change Logs

🚩 Version 1.6.0: Added Filter 1 placeholder, Filter 2 placeholder, and Filter 3 placeholder fields to the Navigation panel - allowing custom placeholder text for each filter dropdown (defaults to "Select" if left blank). This is particularly useful for multilingual stores.

7. Support Information

Need help? Contact our support team at Omni Themes Support.