> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kwebby.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Shop by use

> Photo tiles that send shoppers to gear for what they do, such as gaming or travel, followed by price chips that open a collection filtered by budget.

![Shop by use on the storefront](https://mintcdn.com/kwebby/tbWCv70mkhaUy_7w/images/kelvin/shop-by-use.webp?fit=max\&auto=format\&n=tbWCv70mkhaUy_7w\&q=85\&s=58120332cb995417361ce4b1dac77a98)

Shop by use, highlighted with the demo content

## Where to find it

Home page. In the theme editor choose Home page in the page selector, then select Shop by use. To use it on another page, click Add section and choose Shop by use.

## How it works

* Each Use tile block is a photo tile with its title and text on a dark label in the bottom corner. With a Link set, the whole tile is a link.
* Tile photos are cropped to a wide shape, 1.4 to 1. A tile without an image shows Shopify's placeholder drawing.
* Four tiles per row on desktop, two at 900 px and narrower. On phones the tile text is hidden and only the title shows.
* Budget amounts become price chips: each amount is an Under chip, such as Under \$50, and with Add an and up chip for the highest amount turned on, the highest amount also gets an and up chip.
* A chip opens the Budget collection (all products when it is empty) filtered by price with Shopify's own price filter. Amounts are read in your store currency and shown in its money format.
* Amounts that are not numbers, or not higher than the one before, are skipped. With Budget amounts empty, the chips are hidden.
* Photos zoom in slightly on hover, and stay still with reduced motion.
* The section is hidden when it has no tiles and no chips. In the theme editor a note shows in its place.

![Shop by use in the theme editor](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/editor-shop-by-use.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=78c8fefdc5a8e8e6f8c822d4c44d2721)

In the theme editor: 1 the section in the sidebar · 2 its settings · 3 the section in the preview

## Edit it

* Add a Use tile block per activity (up to 8). Upload an Image of the gear in use (800 x 570px recommended) and set its focal point so the tile's crop keeps the subject in view.
* Keep Heading to one or two words and Text to one short line. The text is hidden on phones.
* Set Link to the collection for that use, such as a Gaming collection.
* Type Budget amounts as whole numbers from low to high, separated by commas, such as 50,100,250,500.
* Choose a Budget collection to keep the chips inside one collection, or leave it empty for all products.
* In the Search and Discovery app, add the Price filter. The chips need it to filter by price.

## Settings

| Setting | What it does |
| - | - |
| **Heading** | Text. Default: Shop by what you do. |
| **Text** | Text. |

**Budget chips**

| Setting | What it does |
| - | - |
| **Budget heading** | Text. Default: Shop by budget. |
| **Budget amounts** | Text. Whole amounts in your store currency, from low to high, separated by commas. Each becomes an Under chip. Amounts that are not numbers, or not higher than the one before, are skipped. Leave blank to hide the chips. Default: 50,100,250,500. |
| **Add an and up chip for the highest amount** | On or off. Default: on. |
| **Budget collection** | Choose a collection. The chips open this collection filtered by price. Default: all products. Needs the Price filter in the Search and Discovery app. |
| **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 1. |

## Blocks

Up to 8 blocks. Add a block with **Add block** under the section in the sidebar; drag blocks to reorder them.

### Use tile

| Setting | What it does |
| - | - |
| **Image** | Image: upload one or choose from Content → Files. 800 x 570px recommended. |
| **Heading** | Text. Default: Gaming. |
| **Text** | Text. Hidden on phones. Default: PCs, monitors and fast peripherals. |
| **Link** | Link: a page, product, collection or web address. |

> [!NOTE]
>
> On install the four tiles have no images or links, so they show placeholder drawings. Add photos and links before you publish.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.