Salve product selector and filters

The Product selector section is a guided finder. Shoppers answer a few questions, one at a time, and land on a collection with matching filters already applied. It uses Shopify's own collection filters, so it needs no app beyond Shopify's free Search & Discovery app.

The selector is a shopping aid. Its default introduction says so: "This is a shopping aid, not medical advice." Keep a similar line if you change the text.

How it works

  1. Each Question block asks one question and lists its answers.
  2. Each answer adds one filter to the collection URL.
  3. When the shopper selects Show matching products, they go to the collection you chose in the section's Collection setting, with all their answers applied as filters. If no collection is chosen, the selector uses the all products collection.

Shoppers see a progress line, such as "Step 2 of 3", with Back, Next and Start over buttons. They must pick an answer before moving on. Without JavaScript, all questions show at once as a simple form. You can add up to eight questions.

Step 1: Enable filters in Search & Discovery

An answer only works if the matching filter is enabled for your store.

  1. Install the Shopify Search & Discovery app, if you haven't already.
  2. In the app, go to Filters and select Add filter.
  3. Add the filters your questions need. Common ones are availability, price, product type, vendor, tag, variant options such as Size, and product metafields.
  4. Save. Then open the collection in your store and check that the filters appear.

To filter by a health metafield, such as exudate level, the metafield definition must allow filtering, and its type must be one that Search & Discovery supports. The health.exudate_level definition, a single line text field with preset choices, works well as a filter. After you add a metafield filter, it can take some time before it's ready to use.

Step 2: Find the filter parameter

The easiest way to get the exact parameter is to copy it from your store:

  1. Open the collection in your store.
  2. Apply one filter, for example Exudate level: High.
  3. Look at the address bar. The part after ? is the parameter, for example filter.p.m.health.exudate_level=High.

In the address bar, spaces may appear as + or %20. In the selector, type the value with normal spaces, exactly as the filter shows it. Values are case sensitive.

Filter Parameter format Example
Availability filter.v.availability=1 In stock only
Price filter.v.price.gte= or filter.v.price.lte= filter.v.price.lte=25 (up to 25 in your store currency)
Product type filter.p.product_type= filter.p.product_type=Foam dressing
Vendor filter.p.vendor= filter.p.vendor=Tendra
Tag filter.p.tag= filter.p.tag=latex-free
Variant option filter.v.option.<option name>= filter.v.option.size=Large
Product metafield filter.p.m.<namespace>.<key>= filter.p.m.health.exudate_level=High

Each answer can add one parameter. For a price band, use one limit, such as "Under $25".

Step 3: Write the questions

Add a Question block for each question. In the Answers setting, write one answer per line in this format:

Label | filter.param=value

  • Label is what the shopper sees.
  • The vertical bar | separates the label from the parameter.
  • A line with nothing after the bar, such as Not sure |, adds no filter. Offer an answer like this for questions a shopper may not know.
  • Use the same filter for every answer in one question. Each question should narrow one thing.

Use Help text for a short hint under the question. Keep labels plain and factual. Describe the product, not a condition it treats.

Examples

A dressing finder

Question 1, Label: "What type of dressing are you looking for?"

  • Foam | filter.p.product_type=Foam dressing
  • Hydrocolloid | filter.p.product_type=Hydrocolloid dressing
  • Film | filter.p.product_type=Film dressing
  • Not sure |

Question 2, Label: "What exudate level does the product need to handle?"

  • Low | filter.p.m.health.exudate_level=Low
  • Moderate | filter.p.m.health.exudate_level=Moderate
  • High | filter.p.m.health.exudate_level=High
  • Not sure |

Question 3, Label: "Which size do you need?"

  • Small | filter.v.option.size=5 x 5 cm
  • Medium | filter.v.option.size=10 x 10 cm
  • Large | filter.v.option.size=15 x 15 cm

A device finder

Label: "What would you like to measure?"

  • Blood pressure | filter.p.product_type=Blood pressure monitor
  • Temperature | filter.p.product_type=Thermometer
  • Oxygen saturation | filter.p.product_type=Pulse oximeter

Label: "Show only products in stock?"

  • Yes | filter.v.availability=1
  • Show everything |

Link to the selector

Enter an Anchor link ID, such as find-a-dressing. Then link a button anywhere on the same page to #find-a-dressing. Use letters, numbers and hyphens.

Troubleshooting

  • The collection shows all products. The filter isn't enabled in Search & Discovery, or the parameter or value doesn't match. Apply the filter by hand and compare the address bar with your answer line.
  • The collection shows no products. No product matches all the answers. Add "Not sure" answers, or check the values on your products.
  • A metafield filter is missing. Check that the definition allows filtering, that the type is supported and that products in the collection have values.