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.
Where it can go
- Inside any of:
.w-slider,dynamic-swiper,smootify-search-discovery,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-idon it: do not set them yourself.
Attributes inside it
| Group | Attribute name | Values |
|---|---|---|
| Product | product | 30 |
| Gallery parts | gallery | 4 |
| Selected variant | variant | 28 |
| Option buttons | option | 14 |
| Each value | option | 5 |
| Image size | max-width | 4 |
| Loading | skeleton | 5 |
| Form values in the page | form-value | 7 |
| Product metafield | metafield | 8 |
| Variant metafield | variant-metafield | 4 |
| Option metafield | option-metafield | 3 |
| Quantities of a metaobject’s products | metaobject-quantity | 3 |
| Product (condition) | condition | 22 |
| Product tags (condition) | tagged | 4 |
| Product metafield (condition) | if-metafield | 4 |
| Variant metafield (condition) | if-variant-metafield | 4 |