CSS Variables

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%)