Shorts Card

Caast Shorts Card is an experience allowing you, to render a collections of contents in a TikTok way. You can customize every displayed medias and also extract some shorts from your existing contents. Just sit and let your users enjoy the all-in-one Caast shorts experience.

Settings

You can configure a lots of of visual informations via our administration interface.

Styling

Caast Shorts Cards is totally stylable via your own style declaration. You have the possibility to add styles override on the targeted page inside a classic <style> tag. You can also give us the style override, it will be directly merged with the final render, this option allow you to avoid editing your own page and rely totally on Caast

/*
* -----------------------------------
* Style for Caast Shorts Card
* -----------------------------------
*/

/*
* A set of css variable used to customize the collection,
* the values came from our configuration but you can overwrite them locally
*/
:root {
  --caast-button-background;
  --caast-button-background-darken;
  --caast-button-color;
  --caast-short-card-width;
  --caast-short-card-gap;
  --caast-short-play-size;
  --caast-short-extra-width;
  --caast-short-item-width;
}

/*
*   Wrapper for injected content
*/
.caast-item[data-caast-type="shorts_default"] {
}
/*
*   Class for shorts title
*/
.caast-short__title {
}
/*
*   Wrapper for short slider
*/
.caast-short__slider {
}
/*
*   Wrapper for short item
*/
.caast-short__item[data-caast-theme="default"] {}
/*
*   Wrapper for short item body
*/
.caast-short__body {
}
/*
*   Class for short item name
*/
.caast-short__name {
}
/*
*   Class for short item image
*/
.caast-short__image {
}
/*
*   Class for short item play icon
*/
.caast-short__play {
}
/*
*   Wrapper for short item product
*/
.caast-short__product {
}
/*
*   Class for short item product image
*/
.caast-short__product-image {
}
/*
*   Class for short item product name
*/
.caast-short__product-name {
}
/*
*   Wrapper for short item product price
*/
.caast-short__product-price {
}
/*
*   Class for short item cart
*/
.caast-short__cart {
}


/*
*   Class for collection slider arrows
*/
.caast-slider__arrow {
}
/*
*   Class for collection slider arrows position
*/
.caast-slider__arrow-next,
.caast-slider__arrow-prev {
}
/*
*   Class for collection slider arrow disabled state
*/
.caast-slider__arrow[aria-disabled='true']{
}
/*
*   Wrapper for slider container
*/
.caast-slider__container {
}
/*
*   Class for slider when using native scroll on mobile
*/
.caast-slider__container-native {
}
/*
*   Wrapper for slider
*/
.caast-slider {
}
/*
*   Wrapper for slider inner content
*/
.caast-slider__track {
}
/*
*   Class for slider slide
*/
.caast-slider__slide {
}