Filters and recommendations
Terrazza's collection filters and its "Pairs well with" products come from Shopify's free Search & Discovery app. Install it from the Shopify App Store if it isn't in your admin yet. No other app is needed.
Color and size filters
Without setup, collections offer the default filters: Availability and Price. Add filters for your product options so shoppers can narrow by finish and size.
- Open Search & Discovery > Filters > Add filter.
- Choose Product options > Color (or the option name you use, such as Finish or Material) and save.
- Add Product options > Size the same way.
- Order the filters, for example Color, Size, Price, Availability.
How Terrazza shows them:
- As swatches. A filter shows as round swatches when its presentation is set to Swatch in Search & Discovery, or when its name is in Theme settings > Swatches > Swatch option names.
- Each card in the chosen finish. With a color filter active, every product card opens on its variant in that color. A shopper filtering by Olive sees olive planters, not the default finish.
- Without JavaScript. Filters work as a form. With JavaScript, they update the grid in place.
To group similar values, for example "Charcoal" and "Anthracite" under one swatch, use Search & Discovery > Filters > [filter] > Group values.
Connect "Shop by finish"
The home page Shop by finish section links each finish to a collection filtered by that color.
- Open a collection on your storefront and choose a color in the filter.
- Look at the address bar. It now contains something like
?filter.v.option.color=Terracotta. - In the theme editor, enter the part before
=(filter.v.option.color) in Color filter parameter. - In each Finish block, enter the Filter value exactly as it appears in the filter, for example
Terracotta.
Pairs well with (complementary products)
Complementary products are products that go with the one being viewed: a saucer for a planter, cushions for a lounge chair, a cover for a fire pit. Terrazza shows them in two places:
- the Pairs well with section on the product page
- one suggestion with an Add button in the cart drawer, for the first item in the bag. The suggestion skips products already in the bag and sold-out products
To set them up:
- Open Search & Discovery > Recommendations.
- Search for a product and select it.
- Under Complementary products, add up to 10 products, in order of importance.
- Save. The storefront can take a few minutes to update.
Until a product has complementary products, the section and the cart suggestion stay hidden. That is expected.
Related products ("You may also like")
The Related products section uses Shopify's automatic related-product recommendations, which learn from orders and product data. On a new or small catalog Shopify may return only a few. Turn on Fill with products from the same collections in the section to fill the row. You can also choose related products by hand under Search & Discovery > Recommendations > Related products.
Search
- Predictive search in the search drawer suggests products, collections, pages and articles while the shopper types.
- The Search results page has the same filters and sort as collections.
- To improve results, add synonyms in Search & Discovery > Synonyms, for example
pot, planter, container.