MobiCart
The search page is what shoppers see when they search your Shopify mobile app: it opens over Home from the search bar, shows recent and trending searches, suggests products as they type, and lists the results with sort and filters. In the MobiCart Builder you pick one of three templates for it, Discover, List or Browse, and set every part of it, with no code.
In short: in the Builder, open the Pages menu and choose Search, pick a template under Templates, set what shows Before the shopper types, As the shopper types and in the Results on the right, then Save as Draft, check it with Live preview and Publish.
How search finds products #
MobiCart search runs on Shopify’s own search, through Shopify’s Storefront API. It doesn’t keep a separate copy of your catalog.
- Suggestions as the shopper types come from Shopify’s predictive search. The app asks after 3 characters and a short pause in typing, and shows up to 4 suggested searches, 4 products and (on Browse) 4 collections.
- The results come from Shopify’s Storefront search, products only, 24 at a time, with a Show more button for the next 24.
- Relevance is Shopify’s. The app sorts by Most relevant unless the shopper picks Price: low to high or Price: high to low.
- Filters are the ones Shopify offers on the results: availability and price by default, plus any you add in Shopify’s Search & Discovery app. The collection page guide explains how those filters work.
- Like everything in the app, search only shows products that are available on the MobiCart sales channel in Shopify.
So the way to improve what shoppers find is in Shopify: clear product titles, product types, tags and vendors, and the synonyms and filters you set up in Search & Discovery.
Settings at a glance #
| Setting | Section | What it does | Default |
|---|---|---|---|
| Templates | Left panel | Discover, List or Browse | Discover |
| Placeholder | Search box | Read only here; edited in Home › Header | Search products |
| Show recent searches | Before the shopper types | The shopper’s own last searches, with Clear | On |
| Trending searches | Before the shopper types | Up to 10 terms you promote, one per line | None |
| Trending title | Before the shopper types | The heading over your terms | Trending searches |
| Show popular products | Before the shopper types, Discover | A product grid before typing | On |
| Products, How many | Before the shopper types, Discover | Best selling, Newest or A collection; 1 to 20 | Best selling, 6 |
| Collections title, collections, Tile shape | Before the shopper types, Browse | Up to 12 collection tiles, Square or Landscape | Shop by category, none, Square |
| Show suggestions | As the shopper types | Suggested searches, products or collections from Shopify | On |
| Brand, Product type, Tags, SKU and barcode | As the shopper types | What suggestions match besides the title | Off |
| Out-of-stock products | Results | Show them last, Show them in order, or Hide them | Show them last |
| Show how many results | Results | “24 results” over the list | On |
| Let shoppers sort | Results | Most relevant, or price either way | On |
| Let shoppers filter | Results | Shopify’s filters on the results | On |
| Show price, Show original price when on sale | Results | Prices on cards and suggestions | On, on |
| Results layout | Layout | Grid, or List (one product a row) | Grid (List on the List template) |
| Products per row | Layout, Grid | Two or Three | Two |
| Row details | Layout, List | Same as Collection page, or Choose here | Same as Collection page |
| Corners of chips, tiles and cards | Layout | None, Small, Medium or Large | Medium |
Part 1: Set up the search page in the merchant dashboard #
Step 1: Open the Search page #
In your Shopify admin, open the MobiCart app and go to the App Builder. At the top of the left panel, open the Pages menu and choose Search. Under its name the menu says “Opens over Home from the search bar”: in the app, search isn’t a separate screen, it opens on top of Home. The settings on the right are headed Search page.
Above the phone in the middle, a switch picks what the preview shows: Home, Before typing, Typing or Results. Use it to check each moment of a search as you change its settings.
The search box itself belongs to Home. Home’s search bar becomes the search box when tapped, so they share the placeholder, icon, style and corners. You change those in Home › Header: click Edit in Home › Header under Search box, or click the search box on the phone.
A blue note at the top reminds you that apps released before search opened over Home still open it as a separate page, with these same settings.
Step 2: Pick a template #
The left panel lists the Templates, each with a small sketch. Click one to use it:
| Template | Before typing | As the shopper types | Results |
|---|---|---|---|
| Discover | Recent and trending searches as chips, then popular products | Suggested searches and products | A grid, with Sort and Filter buttons |
| List | Recent and trending searches as rows | Suggested searches only | A compact list, one product a row |
| Browse | Recent and trending searches as chips, then collection tiles | A “Search for” row, suggested collections and products | A grid under a row of filter chips |
You can switch template at any time. Your options carry over, so nothing you set is lost. The note at the top of the settings names the template in use.
Step 3: Choose what shows before the shopper types #
Under Before the shopper types:
- Show recent searches (on): the shopper’s own last searches, newest first, up to 8. They’re kept on the shopper’s phone, with a Clear button, and a tap searches again.
- Trending searches: terms you want to promote, one per line, up to 10. A tap searches for the term. Blank lines and repeats are dropped.
- Trending title: shows once you’ve added terms. “Trending searches” by default.
On Discover:
- Show popular products (on), with its Popular products title (“Popular right now” by default).
- Products: Best selling, Newest, or A collection (click Pick collection to choose it).
- How many: 1 to 20, 6 by default.
On Browse:
- Collections title (“Shop by category” by default).
- Pick collections: up to 12 collections, shown as tiles two to a row with the collection’s image and name. A tap opens the collection.
- Tile shape: Square or Landscape.
If nothing is set to show (no recent searches yet, no trending terms, no popular products or tiles), the shopper sees a simple “Search for products” message.
Step 4: Set up suggestions as the shopper types #
Under As the shopper types, Show suggestions (on) brings in matching searches, and products or collections, from Shopify as the shopper types. Suggestions appear after 3 characters, once typing pauses.
Suggestions always match the product title. Switch on more fields to match those too:
- Brand (the product’s vendor)
- Product type
- Tags
- SKU and barcode
What the suggestions show depends on the template: Discover shows suggested searches and products, List shows suggested searches only, and Browse shows a “Search for” row, collections and products. With Show price on, product suggestions show their price.
Step 5: Set up the results #
Under Results:
- Out-of-stock products: Show them last (the default), Show them in order or Hide them. This is passed straight to Shopify’s search.
- Show how many results: “24 results” above the list.
- Let shoppers sort: a Sort button with Most relevant, Price: low to high and Price: high to low.
- Let shoppers filter: availability and price, plus any filters set up in Shopify’s Search & Discovery app. On Discover and List it’s a Filter button; on Browse each filter is a chip in a row across the top.
- Show price, and Show original price when on sale.
Step 6: Lay out the results #
Under Layout:
- Results layout: Grid or List. The List template starts on List.
- Products per row (Grid): Two or Three.
- Row details (List): Same as Collection page uses the Collection page’s row details, card style and buy buttons, so search and collections match. Choose here gives search its own: Row height, Photo shape, Card style, the Row details (subtitle, highlight line, vendor badge, badges from tags) and Buy buttons (Show on each product, with Show Buy now).
- Corners of chips, tiles and cards: None, Small, Medium or Large. The search box takes its corners from Home › Header.
Step 7: Preview and publish #
The phone in the middle shows your changes as you make them. Click Save as Draft to keep them: a draft is only visible on your preview device.
To check on a real phone, click Live preview in the top bar and scan the code with your phone’s camera. It opens your app in MobiCart Preview, and search shows your draft while it’s open. When you’re happy, click Publish to push the search page live to your customers’ apps. See MobiCart pricing for what each plan includes.
Part 2: What shoppers see in the app #
Shoppers see search in your theme’s colors, on iPhone and Android alike.
- Opening search: a tap on Home’s search bar opens search over Home, with the keyboard up. A Search tab in your bottom navigation does the same from any screen: it goes to Home and opens search there.
- The top row: a close icon where the account button was, the search box, and the cart with its count. Closing search (or Android’s Back) leaves Home where it was, and the next search starts fresh.
- Before typing: recent searches, your trending searches, and popular products (Discover) or collection tiles (Browse).
- As they type: suggestions from Shopify after 3 characters. A tap on a suggested search runs it; a tap on a product or collection opens it.
- Search: the keyboard’s search key, a recent or trending search, or a suggestion runs a search. The search is added to recent searches.
- Results: the count, Sort and Filter (or filter chips on Browse), then the products. Show more loads the next 24.
- Filters: a price range has Min and Max fields in your store’s currency. Picks apply when shoppers tap Show results, and Clear all removes them.
- Nothing found: “No results” with the search term and a hint to check the spelling or try a broader search, and a button to clear the search. Without a connection, the app says it can’t reach the store instead.
- Products open the way your app opens products, as a page or a sheet.
Recommended setups #
| Store type | Template | Before typing | Suggestions match | Results |
|---|---|---|---|---|
| Fashion and apparel | Discover | Trending: new season terms; Popular: Newest | Title, Product type | Grid, Two per row, filters on |
| Beauty and wellness | Discover | Trending: hero products; Popular: Best selling | Title, Brand | Grid, out-of-stock last |
| Electronics and parts | List | Recent searches, trending model names | Title, Brand, SKU and barcode | List, Choose here with a vendor badge |
| Big catalog of categories | Browse | Collection tiles for top categories | Title, Product type, Tags | Grid with filter chips |
| Food and flowers | List | Trending: seasonal terms | Title, Tags | List, Same as Collection page |
Troubleshooting #
| Problem | Cause | Fix |
|---|---|---|
| A product doesn’t show in results | It isn’t available on the MobiCart sales channel, or its title and fields don’t match the words | Make it available to the MobiCart channel in Shopify; check its title, type and tags |
| Searching by SKU finds nothing in suggestions | SKU and barcode is off | Switch it on under As the shopper types |
| No suggestions appear | Show suggestions is off, or the shopper typed fewer than 3 characters | Switch it on; suggestions start at 3 characters |
| No filters, only Sort | Let shoppers filter is off, or Shopify offers no filters on those results | Switch it on; add filters in Search & Discovery |
| Sold-out products show first | Out-of-stock products is set to Show them in order | Set it to Show them last or Hide them |
| Trending searches don’t show | No terms are entered | Add terms, one per line |
| I can’t change the search box placeholder here | It belongs to Home’s header | Click Edit in Home › Header |
| Browse shows no tiles | No collections picked | Click Pick collections |
| My changes don’t show in the app | They are a draft | Click Publish |
Frequently asked questions #
Which search engine does MobiCart use? #
Shopify’s. Suggestions use Shopify’s predictive search and results use Shopify’s Storefront search, so relevance, synonyms and filters follow your store’s Shopify setup.
Is the search page a tab? #
It can be. Search always opens over Home from Home’s search bar, and you can also add a Search tab in the Builder’s Bottom navigation page (see Set up bottom navigation).
Can I make some products appear first? #
Not from the search page. Shopify ranks results by relevance. You can promote searches with Trending searches, and show chosen products before typing with Show popular products set to A collection.
Where are recent searches stored? #
On the shopper’s phone. Each shopper sees their own last 8 searches and can clear them.
Do I need Search & Discovery? #
No. Availability and price filters work without it. Install it to add more filters, such as vendor, product type, color or size.
How many results load at once? #
- A Show more button loads the next 24.
Does search work in other languages? #
The app’s own words follow the shopper’s language, and you can translate your titles, such as Trending title, in the Builder’s Languages. Product matching is done by Shopify.
Do I need to update anything when I add products? #
No. Search reads your Shopify catalog live, so new products are searchable once they’re available on the MobiCart sales channel.
Need a hand? #
Book a free 30-minute demo and we will set up your search page with you.
