# smootify-product[data-id="loader"]

> Design placeholder card (CMS lists for SEO and no layout shift): a product source in the same slider fills the n-th one, which then loads that product; search & discovery and the search page replace the list's cards with their first results.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/reference/elements/smootify-product-data-id-loader  
Updated: 2026-10-13

## Where it can go

- **Inside any of:** `.w-slider`, [`dynamic-swiper`](https://www.smootify.io/docs/reference/elements/dynamic-swiper), [`smootify-search-discovery`](https://www.smootify.io/docs/reference/elements/smootify-search-discovery), [`smootify-search-page`](https://www.smootify.io/docs/reference/elements/smootify-search-page).
- **Out of place,** it stays in the page and does nothing: stays a placeholder when nothing fills it, never removed.

## What it requires

Nothing beyond Smootify: it works on every plan.

## Attributes on the element

- **It reads** `data-id`.
- **Smootify writes** `data-id` on it: do not set them yourself.

## Attributes inside it

| Group | Attribute name | Values |
|---|---|---|
| [Product](https://www.smootify.io/docs/reference/attributes/product) | `product` | 30 |
| [Gallery parts](https://www.smootify.io/docs/reference/attributes/gallery) | `gallery` | 4 |
| [Selected variant](https://www.smootify.io/docs/reference/attributes/variant) | `variant` | 28 |
| [Option buttons](https://www.smootify.io/docs/reference/attributes/option) | `option` | 14 |
| [Each value](https://www.smootify.io/docs/reference/attributes/option-value-self) | `option` | 5 |
| [Image size](https://www.smootify.io/docs/reference/attributes/image-size) | `max-width` | 4 |
| [Loading](https://www.smootify.io/docs/reference/attributes/loading) | `skeleton` | 5 |
| [Form values in the page](https://www.smootify.io/docs/reference/attributes/form-values) | `form-value` | 7 |
| [Product metafield](https://www.smootify.io/docs/reference/attributes/product-metafield) | `metafield` | 8 |
| [Variant metafield](https://www.smootify.io/docs/reference/attributes/variant-metafield) | `variant-metafield` | 4 |
| [Option metafield](https://www.smootify.io/docs/reference/attributes/option-metafield) | `option-metafield` | 3 |
| [Quantities of a metaobject’s products](https://www.smootify.io/docs/reference/attributes/metaobject-quantity) | `metaobject-quantity` | 3 |
| [Product (condition)](https://www.smootify.io/docs/reference/conditions/product) | `condition` | 22 |
| [Product tags (condition)](https://www.smootify.io/docs/reference/conditions/product-tags) | `tagged` | 4 |
| [Product metafield (condition)](https://www.smootify.io/docs/reference/conditions/product-metafield) | `if-metafield` | 4 |
| [Variant metafield (condition)](https://www.smootify.io/docs/reference/conditions/variant-metafield) | `if-variant-metafield` | 4 |