# Filtering and Organizing Tiles in Your Widget
This guide will help you set up your widget so users can **filter content** (tiles) and **organize how it’s displayed**. It assumes you’re using a **widget editor** with Layout, Tile, CSS, and JS boxes.
**Prerequisites:**
Any widget template, we recommend Grid widget for this one but please create a widget with a default filter already selected.
***
### **1. Layout Box – Adding Filter Buttons**
The **Layout Box** is where you define the buttons or controls users click to filter or organize content.
**Example:**
```html
```
**What this does:**
* `.stackla-links` → Buttons users click to filter tiles.
* `.ugc-tiles` → Grid where tiles will appear.
* `` → Button to load more content if needed.
**Tip:** You can add as many buttons as you like for different filters, brands, or categories.
***
### **2. Tile Box – How Each Tile Appears**
The **Tile Box** controls the **look of each tile**. Tiles can be images or videos, and you can show icons for shoppable content, Instagram Reels, or other indicators.
**Example:**
```html
{{#tile class="grid-item"}}
{{#ifHasProductTags this}}
{{/ifHasProductTags}}
{{/tile}}
```
**What this does:**
* Displays images or video tiles.
* Shows icons for shoppable products or Instagram Reels.
* Displays content tags and shopspots.
**Tip:** Customize icons or tags to fit your style.
***
### **3. CSS Box – Organizing Tiles Visually**
The **CSS Box** controls **how your tiles are laid out** and how the filter buttons look.
**Example CSS:**
```css
.stackla-links a {
text-decoration: none;
color: #333;
font-weight: bold;
cursor: pointer;
margin-right: 8px;
}
.stackla-links a:hover {
color: #007bff;
}
.ugc-tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
.tile {
position: relative;
border-radius: 8px;
overflow: hidden;
}
```
**Tip:** Use CSS to create **different grid layouts** (e.g., single column, multi-column, masonry style) so users can organize content visually.
***
### **4. JS Box – Making Filters Work**
The **JS Box** makes your filters interactive and allows users to **organize tiles in different ways**. You can filter by:
* **Filter ID** – Predefined filters (like “For Her” or “For Him”)
* **Tags** – Content tags like “summer” or “holiday”
* **Brand** – Tiles from a specific brand
* **Category** – E.g., sports, fashion
* **Text Search** – Search by text or keyword
* **Tag Group** – Regional or group-based filtering
**Example JS for Filter Buttons:**
```js
// Load the grid template
sdk.loadTemplate('grid');
// Make filter buttons clickable
sdk.querySelectorAll(".stackla-links a").forEach(item => {
item.onclick = () => {
const filterId = item.getAttribute('id');
sdk.searchTilesByFilterId(filterId, true); // true = replace current tiles
};
});
```
**Example: Other Ways to Filter**
```js
// Search by text
sdk.searchTiles('summer');
// Search by tags
sdk.searchTilesByTags('holiday,vacation');
// Search by brand
sdk.searchTilesByBrand('Nike');
// Search by categories
sdk.searchTilesByCategories('sports,fashion');
// Search by tag group
sdk.searchTilesByTagGroup('au'); // e.g., Australia
```
**Tip:** You can create buttons or dropdowns for **different ways to organize tiles**, not just filter IDs.
***
### **5. Organizing Tiles Dynamically**
You can let users **choose how to organize content**:
* **Filter by tags** → Let users pick multiple tags.
* **Mix filters** → Users can combine brand + category + tag.
**Example: Combining Filters**
```js
// Show Nike products in sports category
sdk.searchTilesByBrand('Nike');
sdk.searchTilesByCategories('sports', false); // false = append to current results
```
***
### **6. Extra Features**
* **Highlight active filter**:
```js
sdk.querySelectorAll(".stackla-links a").forEach(item => {
item.onclick = () => {
sdk.searchTilesByFilterId(item.getAttribute('id'), true);
// highlight active button
sdk.querySelectorAll(".stackla-links a").forEach(i => i.style.fontWeight = 'normal');
item.style.fontWeight = 'bold';
};
});
```
***
### **Summary**
1. **Layout Box:** Create filter buttons and grid container.
2. **Tile Box:** Decide how each tile looks (image/video, icons, tags).
3. **CSS Box:** Style buttons, tiles, and grid layout.
4. **JS Box:** Make filters work and allow users to organize tiles in different ways.
**Result:** Users can interact with your widget to **filter content, view by category/brand/tag, and organize tiles dynamically**, all without needing to write complex code.
### **Result**
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.nosto.com/ugc/guides/widgets-nextgen/widget-creation-guides/filtering-and-organizing-tiles-in-your-widget.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.