Prefixbox integrates natively with Shopify’s system, so you can adjust how search and collection modules or the autocomplete (aka. instant search) look — without editing any code.
💡 Hint: Want full control? Prefixbox is fully compatible with Shopify’s Liquid code editor, so advanced customization is always possible.
What is the Theme Editor?
The Shopify Theme Editor is a built-in tool that lets you visually edit how your store looks and behaves.
The Shopify theme editor
Prefixbox uses Shopify’s Theme app extension framework — meaning you can update layout, appearance, and product display settings for Prefixbox modules without touching code.
Theme Editor vs Layout Settings
The Shopify Theme Editor controls how Prefixbox modules look on your storefront — things like colors, product grid, padding, and filter layout.
But if you want to control what is shown inside those modules (like which product fields appear or how autocomplete behaves), you’ll need to use the Prefixbox app’s layout settings instead.
Learn more about the layout editing options by checking the following articles:
How to open the Theme Editor
You can access the Theme Editor (and edit Prefixbox modules) in three ways.
Access from the Prefixbox dashboard
Click Customize design on any active module (e.g. Search or Collections). This opens the Theme Editor and scrolls directly to the selected Prefixbox block.
Module cards on the dashboard
Access from the ‘Theme overview’ menu
Go to Configuration → Theme overview, then click Manage app embed for the theme you want to edit. You’ll see all Prefixbox modules for that theme — click Customize design to open the editor.
The manage app embeds menu displays all module cards for the selected theme
💡 Hint: When you click Customize design on a Prefixbox module card, you’re taken directly to the correct module inside the Theme Editor — no need to find it manually.
Access from Shopify’s ‘Theme’ panel
In your Shopify admin, go to Online Store → Themes, select a theme and click Customize.
Accessing the theme editor from the "Online Store" menu
This opens the Theme Editor — but you’ll need to manually switch to the correct page (e.g. Search or Collections) and select the Prefixbox block inside the preview area.
How to edit the Prefixbox modules
Before making any edits, make sure other search-related modules are either hidden or removed — this prevents your store from showing duplicate search result sections.
Hiding the default "Search results" section inside the Theme Editor
Once inside the Theme Editor, find the Prefixbox block you want to customize.
Click the block in the side panel — or directly in the preview — to open the settings panel and start customizing.
Make sure the correct page template is selected from the dropdown at the top (e.g. Search or Collections), or the block may not appear.
The Search module only appears when the Search template is selected.
If you have a specific module selected (like the "Prefixbox Search Results") the editor panel will be visible and you can customize the visuals
💡 Hint: If you don’t see a Prefixbox block, you may be on the wrong page.
Search results appear on the Search template, while collection results appear under Collections.
Customization options available in the Theme Editor
Inside the settings panel, you can customize:
Colors and background type
Product grid layout (desktop & mobile)
Filter layout (top, left, drawer)
Product tile spacing and alignment
Image settings (aspect ratio, hover effects, border radius)
Advanced CSS overrides
Related articles