> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/reels.md).
# Reels
## Reels
{% hint style="success" %}
This section contains the "[Header](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" and "[Video](#video)" blocks.\
**Tip:** Press **"Add block"** to use the "Video" block. Each block can be added individually and customized in different ways.
{% endhint %}
### Content
**Items per row**\
Set the number of items displayed per row to 2, 4, or 6.
### Media
**Media ratio**\
Use the options to adapt the video to the desired size. You can select one of the standard options from the drop-down: "9/16" or "16/9".\
Alternatively, apply one of the custom options. These options include additional settings that appear underneath the drop-down after selecting an option:
* **"Fixed height"**. This option sets the media size in pixels by establishing the parameters on the **"Fixed height"** scale. The height can be adjusted between 100 and 800 pixels.
* **"Aspect ratio"**. Select the option to adjust a media height as a percentage using the **"Aspect ratio"** scale. The parameters can be changed from 10% to 210%\*.
\*The "Proportion" option is applied to mobile by default.
**"Aspect ratio"** indicators:\
\* 100% = Square media\
\* Less than 100% = Landscape\
\* More than 100% = Portrait\
\* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
### Video settings
**Autoplay**\
Use this feature to automatically start a video when a visitor lands on a page without clicking the play button.\ **Note!** When enabled, all videos in the section start muted by default, providing a distraction-free browsing experience.
**Muted**\
Decide whether to display a video with or without sound by enabling or disabling the option.\ **Note!** This functionality is helpful when the autoplay video option is turned off.
**Loop video**\
Activate the option to play your video repeatedly and continuously.
### Product cards
{% hint style="info" %}
The product will appear at the bottom of an image or video. The product can be specified in the "[Video](#content-1)" block.
{% endhint %}
**Image ratio**\
Choose the appropriate aspect ratio of product cards. You can use one of the options that display well on all screen sizes: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". You can check the image ratios [here](/unicorn-shopify-theme/dynamic-theme-sections.md#content).
**Show secondary image on hover**\
Enable the option to show the second product image when the product card is hovered over.
**Show vendor**\
Display a brand for each product card.
**Show price**\
Activate the option to display the price below a product title.
### Layout options
{% hint style="success" %}
Check the layout option examples [here](/unicorn-shopify-theme/dynamic-theme-sections.md#layout-options).
{% endhint %}
**Layout**\
Change the "[Header](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" content group position using the picker:
* **"Stacked"**. Displays title elements above the media content and aligns them to the left.
* **"Centered"**. Shows the centered title elements above the media content.
**Mobile alignment**\
Align the elements from the "[Header](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" content group using one of the options:
* **"Auto"**. Uses the setting applied in the "Layout".
* **"Left"**. Displays content on the left.\ **Note!** The call-to-action button displays in full width by default.
* **"Center"**. Centers content.\ **Note!** The call-to-action button displays in full width by default.
**Dividing line**\
Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.
**Top spacing /** **Bottom spacing**\
Decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.
### Mobile settings
**Enable**\
Activates mobile settings. The options below take precedence on mobile devices.
**Media ratio**\
Change the media size using one of the options in the drop-down: "9/16", "16/9", "Fixed height", "Aspect ratio", "Fullscreen", or "Fullscreen without header".
* **"Fixed height"**. This option adapts a video size in pixels by setting the parameters on the **"Fixed height"** scale. The height can be adjusted between 100 and 800 pixels.
* **"Aspect ratio"**. Select the option to adjust a media height as a percentage using the **"Aspect ratio"** scale. The parameters can be changed from 10% to 210%.
**"Aspect ratio"** indicators:\
\* 100% = Square video\
\* Less than 100% = Landscape\
\* More than 100% = Portrait\
\* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
\* For an ideal video aspect ratio (16:9), set the proportion to 56%.
* **"Fullscreen"**. Set this option to show media in the full width of a page. The video width will match the page width set in global settings if the "Use page width limit" option is ticked under *Theme settings ->* [*Page layout*](/unicorn-shopify-theme/theme-settings/page-layout.md).
* **"Fullscreen without header"**. Using this option, the media is cropped at the top and bottom. The top spacing is subtracted from the total height. Check how the settings work on the storefront to confirm they meet your expectations.
### Product colors
**Background**\
Adjust the product card background color using the provided color picker.
**Text**\
Change the vendor, name, and price color using the color picker.
**Accent**\
Set the color of the active product name on hover.
**Price / Sale price**\
Specify price colors using the color pickers.
### Transparent header
Allows the header to overlay the section when a transparent header is used.
**Use inverted header colors**\
Enable the option to link the color of the Header elements, such as navigation menus, Search, Compare, Account, and Cart icons, with the "[Background](/unicorn-shopify-theme/theme-settings/colors.md#background)" item under *Theme settings -> Colors -> Primary colors*. If the option is disabled, the color of the Header elements is related to the "[Base](/unicorn-shopify-theme/theme-settings/colors.md#base)" item.
{% tabs %}
{% tab title="Desktop" %}
{% endtab %}
{% tab title="Mobile" %}
{% endtab %}
{% endtabs %}
***
## Video
### Click action
**Link**\
The video can be linked to pages/ collections/ products. Choose the destination in the source selector.
**Open in new tab**\
When enabled, the linked page opens in a new browser tab, allowing customers to keep their current page open while viewing the linked content.
### Media
**Type**\
Use the drop-down to set the media format. It can be changed to "Video" or "YouTube or Vimeo URL". Additional settings related to each option are displayed after an option is selected.
* **"Video"**. Embed a video file uploaded to your *Shopify admin -> Content -> Files* by selecting the option and pressing the **"Select"** button in the **"Video"** source selector.
* **"YouTube or Vimeo URL"**. Select the option to display a video from a URL. The video can be placed by simply pasting a link into the **"Video URL"** field.
### Video settings
{% hint style="warning" %}
**Note!** The "Cover image" and "Alt text" settings will be displayed after selecting the **"YouTube or Vimeo URL"** video type.
{% endhint %}
**Cover image**\
Press the **"Select"** button in the provided source selector to upload the necessary image for all screen sizes.
**Alt text**\
Paste the descriptive text for screen readers. Read more details in the initial [documentation](https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#video-block).
### Content
**Product**\
Add a specific product to the bottom of the media. Press the **"Select"** button to choose an existing product, or click **"Create product"** in the second step to add a new one to your admin.