# Shop by activity

Chapter 8 of the Rep user guide.

Activewear shoppers start with what they're training for. Rep lets them shop that way everywhere, from each product's `custom.activities` and `custom.support_level` metafields (chapter 7).

## What shoppers see

* **On the home page**, the **Shop by activity** section: a row of tall tiles, Train, Run, Yoga, Pilates and Lounge, each a product on its own colour with the bend and lanes and a white label pill with the activity's pictogram and name. Beside the heading, **sports-bra support chips**, Low, Medium and High, each with the three-bar meter.
* **The Support finder** section: one card per support level that says what it's for ("Running, HIIT and anything with jumping") and links to those bras.
* **On product cards**, up to three small activity pictograms beside the price, and a support pill ("High support" with three bars filled) at the bottom left of the photo.
* **On the product page**, the product's activities as outline pills with pictograms above the title.
* **On collection and search pages**, a row of activity pills above the products, from your **Activity list**. The pill for the activity being filtered is filled; clicking it again removes the filter.
* **In the phone menu**, the same activity pills at the top of the drawer.

The pictograms are never the only signal: each card's group of icons is read out as "For train, yoga and pilates", and the meter always sits beside its words.

## The Shop by activity section

| Setting | Default | What it does |
| --- | --- | --- |
| Eyebrow | "Shop by activity" | |
| Heading | "What are you training for?" | |
| Collection for activity links | | Tiles link here with `?filter.p.m.custom.activities=` and their name. Blank uses all products. |
| Columns on desktop | 5 | **5**, **4** or **3** tiles across from 990px. Tablets show three; on phones the tiles become a sideways row the shopper swipes. |
| Tile shape | Tall (3:4) | Or **Square** |
| Show support chips | On | The chips beside the heading |
| Support label | "Sports bras by support" | The words before the chips. Shows while the chips are on. |
| Support levels | "Low, Medium, High" | One chip per level, separated by commas. Low, Medium and High show the 3-bar meter; any other word is a plain chip. Shows while the chips are on. Flow uses "Low, Medium". |
| Collection for support links | | Chips link here with `?filter.p.m.custom.support_level=` and their level. Blank uses the activity collection, or all products. |
| Background | Page | |

Add an **Activity tile** block for each activity, up to 10:

| Setting | Default | What it does |
| --- | --- | --- |
| Name | "Train" | The activity, shown in the pill and used in the link. Spell it exactly as in your products' `custom.activities` ("Yoga"). A tile with no name isn't shown. |
| Pictogram | Train (dumbbell) | **None**, **Train (dumbbell)**, **Run (shoe)**, **Yoga (lotus)**, **Pilates (ring)**, **Lounge (moon)**, **Cycle**, **Hike**, **Swim**, **Box**, **Dance** or **Tennis**. Chosen here, not from the name, so "Barre" can use the Pilates ring. |
| Image | | A product cut-out on a transparent background stands on the tile's colour; a photo is contained within it. |
| Sample art, Sample art colour | Leggings, `#1f2023` | Drawn when no image is picked: **None**, **Leggings**, **Sports bra**, **Medium-support bra**, **Tank**, **Tee**, **Shorts**, **Hoodie**, **Joggers**, **Yoga mat**, **Bottle** or **Gym bag**. It shows on your live store too until you pick an image. |
| Tile colour | | Blank follows the palette by position: the colour block, the second colour block, sand, blush, then grey, and round again. A colour you pick gets dark lanes when it's light and white lanes when it's dark. |
| Link | | Blank links to the activity collection filtered by this name. Or link to a collection of your own. |
| Count label | | Words after the name, such as "24 styles". Blank shows the number of products when **Link** is a collection, and nothing for a filter link. |

## How the links work

* **A tile** goes to its own **Link** if you set one. Otherwise it goes to **Collection for activity links** (or all products) with the activity filter: `/collections/all?filter.p.m.custom.activities=Train`.
* **A support chip** goes to **Collection for support links** (or the activity collection, or all products) with the support filter: `/collections/all?filter.p.m.custom.support_level=High`.
* **A support card** goes to its own **Link**, or to the Support finder's **Collection for support links** (or all products) with the same support filter.
* **The activity pills** above collections filter the collection being viewed (or the search results) by that activity, and the menu drawer's pills filter all products.

**Those filters need the Activity and Support level filters in Search & Discovery** (chapter 13). Without them, Shopify quietly ignores the filter in the address, so nothing breaks: the shopper simply sees the whole collection instead of one activity. You have two ways to make the links work:

1. **Add the filters** (chapter 13). Every tile, chip, card and pill then works with no other change.
2. **Give each tile its own Link** to a collection, such as a "Yoga" collection, and each support card its own **Link** to a collection of those bras. The chips have no link of their own, so without the filter choose a **Collection for support links** that holds only your sports bras: the chips then at least open your bras.

The tile's **Name** and the chip's level are used exactly as written, so the filter only matches products whose metafield says the same word. Collections and searches with no products for an activity show your usual "no products" message.

## Card pictograms and the support pill

Turn them on or off in **Theme settings › Product cards**: **Show activity icons** (on), **Activity icons per card** (3, from 1 to 3) and **Show the support level** (on).

* **Pictograms** come from `custom.activities`, in the order you listed them, up to the limit. The names map to pictograms case-insensitively: Train, Gym, Strength, Weights, Lifting and HIIT get the dumbbell; Run, Running, Road, Track and Race day the shoe; Pilates, Barre and Reformer the ring; Lounge, Rest and Recovery the moon; and so on (the full table is in chapter 7). Any other name gets a small dot and still counts in what's read out. No metafield, no icons.
* **The support pill** comes from `custom.support_level`: Low, Medium or High show "Low support", "Medium support" or "High support" with one, two or three bars of the meter. Other text shows in the pill as written, without a meter. Blank shows nothing.

## Activity pills on the product page

The **Activity pills** block (in the `product` and `product.no-set` templates, above the title) shows the product's activities as outline pills with their pictograms and names, then its support pill ("High support" with the three-bar meter) from `custom.support_level`. **Activities to show** (4, from 1 to 6). A product with neither metafield shows nothing. In the theme editor, a product with neither shows a sample row (Train, Yoga, Pilates, High support) with a "Sample" pill.

## The activity pills above collections

**Theme settings › Activity › Activity list** ("Train, Run, Yoga, Pilates, Lounge") sets the pills above the products on every collection and on search results, and at the top of the phone menu. Each name gets its pictogram when it's one Rep knows (chapter 7). Keep the names the same as your products' activities and your tiles. Clear the setting to hide the pills.

## The Support finder section

| Setting | Default | What it does |
| --- | --- | --- |
| Eyebrow | "Sports bras" | |
| Heading | "Find your support" | |
| Text | "High support for running and jumping, medium for the gym floor, low for the mat. Every bra shows its level on the card." | |
| Collection for support links | | The cards link here with `?filter.p.m.custom.support_level=` and their level. Blank uses all products. (The editor's note under this setting mentions chips and the activity collection; in this section, blank means all products.) |
| Background | Studio grey | |

Add a **Support card** block for each level, up to four:

| Setting | Default | What it does |
| --- | --- | --- |
| Support level | Low | **Low**, **Medium** or **High**: the meter, the default heading and the link's filter |
| Heading | | Blank shows "Low support", "Medium support" or "High support" |
| Text | "Yoga, pilates, barre and rest days. Light hold, no underband squeeze." | What the level is for |
| Image | | Shown on a 16:10 colour tile with the bend and lanes |
| Sample art, Sample art colour | Sports bra, `#3e5c45` | Drawn when no image is picked: **None**, **Sports bra**, **Medium-support bra**, **Tank** or **Tee** |
| Tile colour | | Blank follows the palette: sand for low, the second colour block for medium, the colour block for high |
| Link | | Blank links to the section's support collection filtered by this level |
| Link label | | Blank shows "Shop low support" (or medium, high) |
| Count label | | Words after the link, such as "12 styles". Blank shows the number of products when **Link** is a collection. |

Three cards sit across on a computer; on phones they become a sideways row. Pace's preset lists High first: put the cards in the order your shoppers need them.

## In the theme editor

Tiles and cards without images draw sample garments with a "Sample" pill, so the sections read before your photos are in. The activity pills block shows a sample row on a product without activities. On your live store, the sample pill disappears, but drawn garments stay until you pick images or set **Sample art** to **None**.