Components props

List of props you can use for customize components

Common props for all components:

Prop Description Default
api-key Type here your api key to add that parameter to the url of api request “
source Api requests source “
source-type Api request source type “
token Add here your token for the headers of api request url “
tag Add placement-tag to api request url endpoint lm-carousel (for LmCarousel)
lm-grid (for LmGrid)
lm-single-video (for LmSingleVideo)
product-code Add product code to show in short only products with this code “
product-category Add category to show in shorts only products from the certain category “
hide-ghost-loader Add for not showing the ghost loaders when components are loading false
hide-branding Add for hide branding logo on the top of modal after click on short false
hide-swatches Add for hide the swatches in product drawer and details drawer select field false
Prop Description Default
title-mobile The title above the component on mobile size screens Carousel (for Carousel)
Grid (for Grid)
title-desktop The title above the component on desktop size screens Carousel (for Carousel)
Grid (for Grid)
video-muted Add this prop to mute the video after clicking on short and video in modal started playing false
thumbnail-width Change the width of the thumbnail image of every short 257
thumbnail-height Change the height of the thumbnail image of every short 457
thumbnail-bottom-space The distance in px of the text box from the bottom border of short 0
animated-thumbnail-fps Change the frame per second played in gif after hovering on the short video (smaller fps makes it less smooth but decreases the file size of gif for better performance when loading) 10
show-author Add it for show the short author false
hide-video-title Add to hide the title of the shorts video (the title then will be name of the first product if they are available) false
author-font-size-mobile Change font size in px of the author displayed in shorts on mobile size screens 10
author-font-size-desktop Change font size in px of the author displayed in shorts on desktop size screens 18
description-font-size-mobile Change font size in px of the description of products displayed in shorts on mobile size screens 8
description-font-size-desktop Change font size in px of the description of products displayed in shorts on desktop size screens 14
short-title-font-size-mobile Change font size in px of the short title on mobile size screens 14
short-title-font-size-desktop Change font size in px of the shorts title on desktop size screens 20
animated-thumbnail-file-format Change the file format of animated thumbnail - values are gif or webp gif
hide-pagination Hide the pagination controls false
shorts-on-start Defines how many shorts will be displayed on the start 4
shorts-per-page Defines how many shorts will be loaded with pagination 4
shorts-per-page-in-modal Defines how many shorts will be loaded with modal pagination 5
hide-products-thumbnail Hiding only products images displayed on the shorts false
hide-products-descriptions Hiding only the description of product false
hide-products Hiding the whole products structure with title and description, only the short will be displayed and author(if show-author is set to true) false
Prop Description Default
carousel-type Type of carousel “
slide-border-radius Border radius in px of the slides with shorts 15
slide-width Width in px of the slides with shorts on desktop size screens 312
slide-height Height in px of the slides with shorts on desktop size screens 556
mobile-slide-width Width in px of the slides with shorts on mobile size screens 137
mobile-slide-height Height in px of the slides with shorts on mobile size screens 240
slides-per-view Change the count of slides that are displayed at once in the carousel viewport on desktop size screens (default is unlimited) -1
mobile-slides-per-view Change the count of slides that are displayed at once in the carousel viewport on mobile size screens (default is unlimited) -1
need-panel-threshold Carousel slide threshold from the edge of viewport before another panel is trigger to display 0
hide-carousel-controls Hides the arrows that triggers next or previous slide false
hovering-arrows Added make the arrows only appear after hovering on the carousel component without hover will be hidden false

Props only available in Grid component:

Prop Description Default
grid-columns The count of columns in grid on mobile screens 1
grid-columns-desktop The count of columns in grid on desktop screens 4
grid-gap The space between columns on mobile screens in rem 0.5
grid-gap-desktop The space between columns on mobile desktop in rem 1.5
grid-el-border-radius Border radius of the panels with shorts in px 15
max-grid-els Maximum number of elements displayed in grid viewport at once (default is unlimited) -1

Props only available in Single-video component:

Prop Description Default
video-border-radius Border radius of the component in rems 0.5
thumbnail-width Width of the thumbnail image in px 394
thumbnail-height height of the thumbnail image in px 700