Search Results

The whole search page. A big “Search” heading, the search field, then results split by type: products in a grid on the left, articles in a narrow list down the right, and any matching pages below the products.

This is the only section on the search template. It handles every kind of result itself, so there’s nothing to add alongside it.

Layout

Products take the main column — three across on wide screens, two on tablet, one on mobile, all adjustable. The articles rail sits to the right at a fixed width and drops below the products on smaller screens.

Each group is headed by a label with its count, like 8 PRODUCTS and 2 ARTICLES. A group with no results is hidden entirely rather than showing an empty heading, so a search that only matches articles gives the rail the full width and wraps it into columns.

Settings

Setting	What it does
Section ID	Optional anchor id for linking straight to this section.
Columns on mobile	Product columns below tablet, 1–3. Default 2.
Columns on tablet	Product columns from tablet up, 2–4. Default 3.
Columns on desktop	Product columns on wide screens, 2–6. Default 3.
Results per page	How many results appear before pagination, 6–48. Default 12. Counts every type together, so products, articles and pages share one page.
Articles shown	Lives on the Search Articles section, not this one — see The articles rail below.
Card button behaviour	Quick Add puts an add-to-cart button on each card. See Details links through to the product page instead.
Button label	Overrides the wording on that button. Leave empty for “Quick Add” or “See Details” to match the mode above.
Show price	Shows the price line under each card’s button.
Price prefix	Text before the price — “Starting at”. Only appears when Show price is on.
Price suffix	Text after the price — “per month”. Only appears when Show price is on.
Padding	Top and bottom, set separately for mobile, tablet and desktop.

The articles rail

The articles list on the right is its own section — Search Articles — with its own settings:

Setting	What it does
Articles shown	How many titles load at a time, 3–24. Also the step size for View more.
View All destination	Which blog the View All link opens. Defaults to the store’s news blog.
Hide View All link	Drops the link. Used on the article-only page, where it would point at itself.

It’s kept separate because Shopify returns one combined list of results with products first. When that list is split into pages, the articles fall to the end: a search matching a dozen articles would show two on page one and none on page two, so the rail vanished as the shopper paged through products. The rail now runs its own article-only search, so it shows the same articles on every page.

View All vs View more

Two different controls, and it’s worth keeping them straight:

• View All, beside the heading, leaves the search page and opens the blog.
• View more, at the bottom of the list, stays put and loads the next batch of titles onto the end of the column.

The article count is the real total, not what’s shown

ARTICLES (67) means the search found 67 articles even when Articles shown is set to 3. View more walks through them a batch at a time and disappears once the last one is on screen.

The rail needs JavaScript

It loads just after the rest of the page. With JavaScript off, the rail shows a plain link through to the article-only results instead — nothing is unreachable, but the titles aren’t listed inline.

The article-only page still caps at 50

Reaching the article-only results directly (/search?q=…&type=article) shows at most 50 matches, so its heading can read lower than the rail’s for the same term. The rail isn’t affected — it loads in batches and walks the full set. Worth knowing before treating the two numbers as a contradiction.

Pagination

Once a search matches more than Results per page, numbered pagination appears below the results — the same pager used on collection pages.

The page size counts every result type together, not each group separately. With the default of 12, a search might fill page one with 10 products and 2 articles, then put the remaining products on page two.

Product and page counts describe the current page

The Products and Pages headings count what’s on the page you’re looking at, so PRODUCTS (10) on page one and PRODUCTS (6) on page two is correct behaviour for a 16-product search — not a miscount.

The articles rail is the exception: it runs its own search, so its count is the full total and stays the same on every page.

What gets searched

Products, articles and pages, all at once. The shopper doesn’t pick a type; they type once and see everything grouped.

That’s driven by the search field itself, so it works the same whether someone searches from the header, from mobile, or by re-searching on this page.

The page only returns what the search field asks for

The field submits products, articles and pages together. A search link built by hand that omits a type — or sets type=product — will only ever return that type, and the other groups simply won’t appear. If articles have stopped showing up, check the link that produced the search before checking the section.

Products need to be searchable in Shopify

If a product isn’t showing up, check it’s active and available on the Online Store sales channel. This section can only display what Shopify’s search returns — it can’t surface a hidden product.

When there are no results

Shoppers get a short “no results” message with their search term, plus a button through to all products so they aren’t stuck at a dead end. Landing on /search with nothing typed yet shows just the heading and an empty field.

Tips

• Cards are the same ones used elsewhere. Search renders the shared Product Row Card, so badges, Quick Add and the “Starting at” price line all behave exactly as they do on the homepage.
• Badges come from product tags automatically — see Product Row Card.
• Quick Add needs a single-variant product. Multi-variant products open the picker instead; out-of-stock ones link to the product page.
• Products hidden by tag stay hidden here. The theme’s product tag filter applies to search too, so the product count reflects what’s actually shown rather than Shopify’s raw total.