This article explains what each setting does and how to adjust the look of Prefixbox modules like Search Results, Collection pages, and Autocomplete.
💡Hint: Need help opening the Theme Editor? See our Using the Shopify Theme Editor guide to learn how to access these settings.
Customizing Search Result & Collection Page App blocks
Prefixbox Search and Collection modules are integrated as app blocks, which means you’ll find their settings inside the Theme Editor once the block is selected.
These two modules share the same structure — so you’ll see nearly identical settings for both.
Color settings
These affect the visual styling of the Prefixbox Search and Collection blocks. By default, we match your store’s colors — but you can manually override them.
Color setting options explained
Use theme colors: Toggle on to automatically match your store’s color scheme. When disabled, you can manually adjust the visual appearance.
Background type: Choose how the background behaves:
None (transparent), Full (entire width), or Partial (content width only).
Color settings panel for the Prefixbox Search Results block in the Theme Editor.
Product display settings
These settings control how many product tiles appear per row in the results grid — separately for desktop and mobile devices.
Product display settings explained
Desktop products in row: Set how many product cards appear per row on desktop.
Mobile products in row: Control the same setting for mobile view.
Set how many products appear per row on desktop and mobile
Filter settings
These options let you decide whether filters are shown, and where they appear on the page.
Filter settings explained
Enable filtering: Turns the filter panel on or off.
Filter layout: Choose where filters appear:
Top
Left
Drawer (collapsible filter panel, shown by default on mobile)
Filter panel options with layout selectors and toggle to enable filtering.
Product tile settings
These settings focus only on layout-related appearance. To control content (like product fields or badges), use the Layout settings inside the Prefixbox app.
Product tile settings explained
Text alignment: Align product info text (left, center, right).
Text padding: Add spacing around product text.
Card padding: Set space between product cards.
Aspect ratio: Control product image shape (e.g. Portrait, Square).
Hover effect: Choose a visual animation for hovering (e.g. Zoom, Fade).
Border radius: Round the corners of product images or cards.
Adjust text alignment and spacing inside each product tile
Image settings
Image settings help you control the shape, presentation, and hover effect of product images.
Image settings explained
Border radius: Adds rounded corners to your product images (in rem units).
Aspect ratio: Choose how your product images are cropped and scaled (e.g. Portrait, Square, Adapt to image).
Hover effect: Add visual feedback (like zoom or fade) when a shopper hovers over a product image.
Control how product images appear in search and collection pages
Customizing the Autocomplete App embed
Autocomplete is a store-wide module that appears whenever a shopper interacts with your store’s search box. Unlike the Search or Collection blocks, it doesn’t depend on page views — you can access and customize it directly from the App embeds section of the Shopify Theme Editor.
When the "Keep autocomplete open" toggle is on, you'll be able to see all changes inside the autocomplete panel
No need to switch page templates. Just find the Prefixbox Autocomplete embed, click to open it, and customize the settings as needed.
⚠️ Important: If the autocomplete panel won't open even if the toggle is on, contact us - this issue can be related to your theme and the Prefixbox customer team can help to solve that issue.
Color settings
These settings control the text and background colors inside the autocomplete panel.
Color settings explained
Use theme colors: Toggle on to automatically match your store’s colors. Disable to manually adjust the visual style.
Texts / Link / Background: Pick specific colors for text, links, and panel background.
Customize autocomplete panel colors independently from search and collection pages
Font settings
Adjust the font style used in the autocomplete suggestion list.
Choose between Regular, Bold, or other available font weights depending on your theme’s options.
Using a different font setting you can emphasize suggestions
Suggestion highlighting
These settings define how autocomplete reacts visually when shoppers hover on a suggestion.
Suggestion highlighting explained
Underline on hover: Adds an underline to hovered items.
Background on hover: Highlights the background of hovered suggestions.
Color on hover: Changes the text color on hover.
Suggestions panel settings
These settings affect the layout and size of the autocomplete suggestion container.
Suggestion panel settings explained
Layout: Choose between Top bar or Sidebar layout.
Top margin: Adds spacing above the panel.
Panel width / height: Control the size of the suggestions container.
Border width / radius: Adjust the visual framing and corner roundness.
Left section width / Right container width: Fine-tune how much space is given to each side of the suggestion panel.
These settings will heavily affect how your autocomplete looks like
Image settings
Control the appearance of product images shown in autocomplete suggestions.
Image border radius: Add rounded corners to images.
Aspect ratio: Choose how product images are cropped (e.g. auto, portrait, square).
Hover effect: Enable subtle hover animations on product images.
Control how product images appear inside the autocomplete panel
Custom CSS & JS
For advanced use cases, you can add CSS and JavaScript rules to all modules (Search results, Collection pages, and Autocomplete) to fine-tune the appearance or behavior of your search.
Custom CSS – Add valid CSS declarations to adjust the design of the selected module block (e.g., Search or Collections).
Custom JS – Add JavaScript code to extend functionality, trigger events, or integrate with other store scripts.
Use the Custom CSS and Custom JS fields to apply extra design rules or custom behaviors to the selected Prefixbox module.
Clicking on the "Manage app" button will take you back to the Prefixbox dashboard.
💡 Hint: These settings only affect the selected module. For example, changes made to Search won’t apply to Collections or Autocomplete.
Related articles