> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/global-sections/shoppable-content/video-reviews.md). # Video reviews A feed of customer review videos. Each card plays a muted preview, and tapping it opens a full-screen player with linked products shoppers can add to cart while they watch. ![Video reviews overview](/files/RyFbgDcatJqXuzJpBZjb) {% hint style="success" %} **Video source:** Videos must be Shopify-hosted HD MP4 files. Add one to each Video block in the theme editor. {% endhint %} *** ## Settings ### Layout | Setting | Description | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Width | **Page** — Keeps the content within the page width set in your theme settings. **Full** — Stretches the content across the full browser width, with a small space at the edges. | | Desktop alignment | Alignment of the content on desktop. | | Mobile alignment | Alignment of the content on mobile. | ### Gap | Setting | Description | | ------- | ------------------------------------------------------- | | Desktop | Space between the header and the video feed on desktop. | | Mobile | Space between them on mobile. | ### Media | Setting | Description | | ----------------- | ------------------------------------------ | | Desktop ratio | Shape of each video card. | | Video preview | How each card behaves before it is opened. | | Social media icon | Platform badge shown on each card. | ### Videos layout | Setting | Description | | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Type | **Grid** — Videos sit in a fixed grid of rows and columns. **Carousel** — Videos scroll sideways as a swipeable slider. | | Desktop columns | Number of videos per row on desktop. | | Show next slide preview on desktop | Carousel only — peeks the edge of the next slide to hint that more can be swiped. | | Enable swipe on mobile | Grid only — lets the grid be swiped sideways on mobile instead of stacking. | | Custom columns | Set the number of columns per screen size yourself instead of using the standard breakpoints. | | Columns per breakpoint | The custom column values, entered per screen size. See [How to set up custom columns](/helix/how-to-guides/how-to-set-up-custom-columns.md) for the value syntax. | ### Videos gap | Setting | Description | | ------------------- | ---------------------------------------------- | | Horizontal | Grid only — gap between videos on desktop. | | Vertical | Grid only — gap between rows on desktop. | | Horizontal — Mobile | Grid only — gap between videos on mobile. | | Vertical — Mobile | Grid only — gap between rows on mobile. | | Desktop | Carousel only — gap between slides on desktop. | | Mobile | Carousel only — gap between slides on mobile. | ### Navigation Carousel only. | Setting | Description | | -------------------------- | ------------------------------------------------------------------------ | | Show navigation on desktop | Shows previous/next arrows on the carousel. | | Position | Where the arrows sit. | | Style | Visual style of the arrow buttons. | | Icon | Arrow shape. | | Behavior | When the arrows appear. Not available when arrows are positioned on top. | ### Pagination Carousel only. | Setting | Description | | -------------------------- | --------------------------------------------------------------------------------- | | Show pagination on desktop | Shows a progress indicator beneath the carousel. | | Type | Style of the pagination indicator. | | Top padding | Space between the carousel and the indicator. | | Limit width | Caps the progress bar to a **Max width** instead of letting it span the carousel. | | Max width | The widest the progress bar can run. Available when Limit width is on. | ### Autoplay Carousel only. | Setting | Description | | -------------- | ------------------------------------------------------ | | Autoplay | Advances the carousel automatically. | | Pause on hover | Stops the timer while the cursor is over the carousel. | | Speed | How long each slide stays before advancing. | ### Popup product card Controls the product card shown inside the full-screen video popup. | Setting | Description | | --------------------- | ----------------------------------------- | | Layout | Style of the product card. | | Border thickness | Card border width. | | Shadow | Card shadow depth. | | Add to cart position | Where the add-to-cart button sits. | | Add to cart style | Visual style of the add-to-cart button. | | Show variant selector | Lets shoppers pick a variant on the card. | ### Mobile popup | Setting | Description | | ------------ | ------------------------------------------------------------------------- | | Button label | Text for the button that reveals the linked products in the mobile popup. | ### Background | Setting | Description | | --------------- | ------------------------------------------------- | | Media | Section background media type. | | Video | Shopify-hosted background video. Autoplays muted. | | Image | Section background image. | | Image — Mobile | Separate background image for mobile. | | Show overlay | Adds a color layer over the background media. | | Overlay color | Color and opacity of the overlay. | | Parallax effect | Scroll effect applied to the background media. | ### Color | Setting | Description | | -------------------- | ------------------------------------------------------------ | | Section color scheme | Color scheme for the section. | | Author color scheme | Color scheme for the reviewer name and details on each card. | | Review color scheme | Color scheme for the review content shown in the popup. | ### Padding | Setting | Description | | ----------------------- | ----------------------------------------------------- | | Padding top / bottom | Outer spacing above and below the section. | | Custom padding — Mobile | Override desktop padding with separate mobile values. | *** ## Available Blocks ### Section Header The heading area above the video feed. Add **Subheading**, **Heading**, and **Text** child blocks inside it — see [Header](/helix/theme-blocks/basic/header.md). ### Video A single customer review video. Add one block per video. | Setting | Description | | --------------- | ----------------------------------------------------------------------- | | Video | The Shopify-hosted review video. | | Cover image | The still shown on the card before the video plays. | | Avatar | The reviewer's profile photo. | | Name | The reviewer's name. | | Subtitle | A short line under the name, such as a location or verified-buyer note. | | Profile link | Links the author through to a social profile or other page. | | Open in new tab | Opens the profile link in a new browser tab. | | Image | An image shown with the written review in the popup. | | Text | The written review, shown alongside the video in the popup. | | Products | The products featured in this review's popup player. | {% hint style="warning" %} If **Video preview** is set to **Cover image**, this is the image each card displays — add a cover image to every Video block when using that preview mode. {% endhint %}