Skeleton
Smootify custom css is pretty small and tries to never interfer with any design you create inside Webflow. The stylesheet has some custom variables that you can override directly in Webflow CSS Variables panel.
If you never used Webflow CSS Variables, is adviced to follow up this guide
Skeleton
The Skeleton loader is used when products are loaded and cart is updated, to avoid showing up stale invalid data. It uses 2 css variables to create the animation
Skeleton Loading Start
This is the loading background-color of the animation.
You can modify it by adding a CSS variable with name skeleton-loading-start
By default the color used is: hsl(200, 20%, 80%)
Skeleton Loading End
This is the ending background-color of the animation.
You can modify it by adding a CSS variable with name skeleton-loading-end
By default the color used is: hsl(200, 20%, 95%)
Disable Skeleton
If you want to disable the skeleton loader, add the class loaded on the smootify-product Custom Element.
Is highly discouraged to disable the skeleton loader.
Skeleton Attributes
If you want more control on the skeleton elements instead of using the automatic one, you can apply the following skeleton attributes to your elements
Text
Suitable for all text elements
Button
Suitable for all button elements
Blocks
Suitable for all divs
Image
Suitable for all image elements
Hide
Will set visibility hidden on the element