Collections and search

Collection pages and the search page use Shopify’s native filters and sorting. Wholeness adds tiles that open a collection by color and filters that stay applied as a shopper browses.

Filters and sorting

The filters on collection pages are Shopify’s storefront filters. You choose which ones show in Shopify’s Search & Discovery app:

1. In your Shopify admin, go to Apps › Search & Discovery and click Filters.
2. Click Add filter and choose a source, such as Availability, Price, Product type, Vendor, or a product option such as Color or Size.
3. Click Save. Repeat for each filter you want.

On the collection page, each filter becomes a button above the products:

• a button opens the filter’s values, each with the number of products that have it (values with none are grayed out), or a price range with “From” and “To”;
• filters applied show as tags under the buttons: each tag removes its filter, and Clear all removes them all;
• a Sort by list beside them sets the order of the products;
• on a phone, the values open in a panel at the bottom of the screen.

A filter lists the values your products have: a filter on Color lists the colors of your products. If you haven’t turned any filter on, the theme editor shows a note on the collection page that tells you where to do it; shoppers don’t see that note.

The Collection section of collection pages also has Products per page, Columns on desktop, Show the add to cart button and Show the collection image. See Collection in the sections reference.

Search

The search page

The search page can show the same filters and sort order as collection pages: turn on Show filters and sorting in its Search section. When it is off, a filter that is already applied, such as a remembered filter, still shows as a tag that removes it.

Search in the header

Turn on Show search in the Header section. A search icon then opens a search box that suggests search terms, products, collections and pages as the shopper types. The arrow keys move through the suggestions, and Enter opens one or searches for what was typed.

Shop by color

The Shop by color section shows a row of tiles, one per color, each with a picture and a box in that color. Each tile is a Color block. A tile can link to a collection of that color, to any page you choose, or to a collection filtered by its color.

Open a collection filtered by color

1. In Apps › Search & Discovery › Filters, add a filter for your products’ color option (for example, Color).
2. In the section settings, set Products’ color option to the name of that option as it is written in your products, such as Color.
3. In each Color block, choose a Collection, or leave it empty for all products, and write the color in Filter by color as your products have it, such as Black.

The tile’s link then opens that collection with only that color. A link filled in the block’s Link setting wins over the filter. If you prefer not to use filters, choose a collection of that color in each block and leave Filter by color empty.

The color box

Box color sets the box’s color. With Box text on Automatic (best reading), the text turns light or dark by itself, whichever reads better on that color; you can also choose Light or Dark, or set a Box text color. In the section settings, Text box puts the box over the picture or under it.

Remembered filters

Some stores sell to clearly separate audiences: women and men, dogs and cats, adults and children. Remembered filters keep a shopper’s choice as they browse. A shopper who picks “Women” once sees every list of products opened with that filter, with a tag in sight to remove it.

Set it up

1. In Apps › Search & Discovery › Filters, add a filter for the option or attribute that holds the audience, such as a Gender option.
2. In the theme editor, open Theme settings › Remembered filters.
3. In Filters the store remembers, write the names of those filters as they are in Search & Discovery, separated by commas (for example, Gender). Leave it empty to turn the feature off.
4. In Remember for, choose how long a choice lasts: from 7 days to 1 year.

When a choice is remembered

• The shopper ticks one value of that filter on a collection or search page. Ticking two or more values means no preference, and removing the filter forgets the choice.
• The shopper opens a collection whose products all share one value, such as a Women collection from the menu.
• The shopper picks a tab in Shop by audience or a side of Her / him showcase. A Shop by audience tab can say which value it stands for in Remembered value.
• The shopper chooses that option on a product page that offers more than one value.

How it is applied

A list of products opens filtered only when the remembered value has products on it, so a list never opens empty. The choice is kept in the shopper’s browser only; it is not sent to your store or saved in their account. Remembered filters don’t apply in the theme editor.

Sections that show collections

• Collection list: a row of collections with round or square pictures. With no blocks, it shows every collection that has products.
• Featured collection: the first products of a collection, as a carousel or a grid.
• Collection tabs: one tab per collection.
• Banner with collections: a banner beside one row of products per collection.
• Collections grid: the page that lists your collections.