Collections and search

Collection pages and search results are where shoppers browse. Rawnaq gives them filters, sorting, a choice of grid sizes, promotional tiles between products and three ways to load more products. This page covers each of them.

Open the editor with Online Store > Themes > Customize, then use the page picker to choose Collections > Default collection. The page is made of two sections: Collection banner at the top and Collection products below it. Search has its own page, Search results, and a list of all collections has Collections list.

Collection banner

Select Collection banner:

1. Show breadcrumbs
2. Show description and Show product count
3. Heading size and Text alignment
4. Under Image: Show image, Image source (Collection image or First product image), Layout (Text over image or Text beside image) and Overlay opacity.
5. Under Sub-collections: Show sub-collection links and Menu.

Set the collection's image, title and description in Shopify admin under Products > Collections.

Sub-collection chips

If you turn on Show sub-collection links, the links under the current collection in the menu you choose are shown as small chips, so a shopper on Dresses can jump to Evening dresses or Summer dresses.

1. In Content > Menus, open your main menu.
2. Make sure the collection is a menu item and that its sub-collections are nested under it.
3. In the banner, set Menu to that menu.

Filters and sorting

Filters let shoppers narrow a collection by color, size, price, availability and more. Shopify manages the filter list through its free Search & Discovery app, and Rawnaq displays it.

Set up filters

1. Install Search & Discovery from the Shopify App Store (it is free).
2. Open the app and go to Filters.
3. Add the filters you want. Common ones are Availability, Price, Color, Size and Product type. Color and size can come from product options or from category attributes.
4. Save. The filters appear on collection and search pages. No theme change is needed.

Show filters in the theme

Select Collection products. Under Filters:

1. Enable filters: show or hide the filter area.
2. Filter layout on desktop: Sidebar (always visible at the side) or Drawer (opens when the shopper presses Filter). On phones filters always open in a drawer.
3. Filter groups open by default: how many filter groups start expanded (0 to 10).
4. Show product counts in filters
5. Color filter style: Circle, Square or Checkbox list.

Color filters as swatches

When your Color filter values have swatches, shoppers see colored circles or squares instead of a text list. Swatches come from Shopify's native color option values. See the Color swatches steps in Product page. If you prefer plain text, set Color filter style to Checkbox list.

The price filter is a slider. Selected filters show as small pills above the products, each with a button to remove it.

Sorting and grid size

1. Show sorting: a sort menu (best selling, price, newest and so on, as set by Shopify).
2. Show grid size toggle: lets shoppers switch between larger and smaller product tiles.
3. Columns on desktop: 2 to 5.
4. Columns on mobile: 1 or 2.

Product count and pagination modes

Set Products per page (8 to 48), then choose how shoppers see the rest under Pagination:

1. Load more button: a button under the products. This is the default and the best balance of speed and control.
2. Infinite scroll: new products load as the shopper reaches the bottom. Shoppers cannot easily reach the footer, so use it carefully.
3. Page numbers: classic numbered pages. Good for very large catalogs and for shoppers who want to jump to a page.

Promo tiles

A promo tile is a banner that sits inside the product grid, for example a sale or a guide.

1. Select Collection products and choose Add block, then Promo tile.
2. Set the Image, Eyebrow, Heading, Text, Button label and Link.
3. Choose where it appears with Position in the grid (1 to 24), for example 3 to show it after the second product.
4. Set Tile width to One column or Two columns.
5. Pick a Color scheme for the tile.

You can add several tiles at different positions. The same promo tiles appear on every collection that uses this template. Create another collection template if you want different tiles for different collections.

Collections list page

The page that lists all collections (usually /collections) uses Collections list. Settings: Sort collections (Alphabetically, Newest first or Most products first), Image ratio, Columns on desktop, Columns on mobile, Collections per page and Show product count.

Search results

Select Search results in the page picker (Search).

1. Show result type tabs: after a search, tabs separate Products from Articles and Pages so shoppers can find a blog post or a policy as easily as a product.
2. Popular products collection: products shown before the shopper searches, so the empty page is not empty.
3. Products per page, Columns on desktop, Columns on mobile and Pagination work as on collections.
4. Show grid size toggle and Show sorting.
5. Filters work the same as on collections. Search results use the Drawer layout by default.

Predictive search

Predictive search shows suggestions as the shopper types. It lists products, collections, pages, articles and query suggestions, and works from the header search bar or search icon.

1. Open Theme settings > Search.
2. Keep Show results while typing on.
3. Choose whether to show Show vendor in results and Show price in results.

Search & Discovery also lets you add synonyms and boost products, so searches such as "trainers" and "sneakers" give the same results.

Good to know

• Filters need the Search & Discovery app only if you want to change which filters show. Without it, Shopify shows a basic set of filters on its own.
• Keep filter names short and consistent. "Colour" in one place and "Color" in another make two filters.
• Sorting and filtering change the address of the page, so a filtered view can be shared or bookmarked.
• Products only appear in a color filter if the product has that color option value. Check your products if a color seems to be missing.