> 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/media.md). # Media ## Media {% hint style="success" %} This section contains the "[Header](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" and "[Media](#media-block)" blocks.\ **Tip:** Press **"Add block"** to use the desired block. Each block can be added individually and customized in different ways.\ You can combine media with headings, descriptions, and other content to highlight products, features, or brand messaging. {% endhint %} ### Layout {% hint style="success" %} Check the layout option examples [here](/unicorn-shopify-theme/dynamic-theme-sections.md#layout-options). {% endhint %} The layout settings change the look and feel of the section. **Layout**\ Change the "[Header](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" content group position using the picker: * **"Split"**. Puts the "Header" group in the content grid while keeping it on the right. * **"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 on mobile by default. * **"Center"**. Centers content.\ **Note!** The call-to-action button displays in full width on mobile by default. **Use custom width**\ Enable the option to display the related settings. **Width** \ Set the media width between 30% and 100%. **Min width**\ Set the minimum media width to maintain readability on larger screens. The value can be set to range from 400 to 1400 pixels. **Position**\ Choose the media position within the section. * **"Side"**. Aligns the form to the left. * **"Center"**. Centers the form within the section. **Note!** This feature works only if the map width is set to less than the full width of the screen. ### Layout options **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. ### 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 %} *** ## Media (block) ### Section link **Link**\ The media 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 "Image", "Video", or "YouTube or Vimeo URL". Additional settings related to each option are displayed after an option is selected. * **"Image"**. Choose the option and link an image by pressing the **"Select"** button to display a simple image banner. The following section provides two methods of displaying a video on a page. Select the one that fits you well: * **"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. **Image ratio**\ Use the options to adapt media to the desired size. You can select one of the standard options: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Check the image ratios [here](/unicorn-shopify-theme/dynamic-theme-sections.md#content).\ Alternatively, apply one of the custom options. These options include additional settings that appear underneath the drop-down after selecting an option: * **"Proportion"**. Select the option to adjust a media height as a percentage using the **"Proportion"** scale. The parameters can be changed from 10% to 210%\*. \*The "Proportion" option is applied to mobile by default. **"Proportion"** 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. * **"Fixed"**. 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 1000 pixels. ### 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 both desktop and mobile. **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). **Autoplay**\ Use this feature to automatically start a video when a visitor lands on a page without clicking the play button.\ **Note!** When enabled, a video in the section starts 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. **Show controls**\ To display the video's Parental Controls, tick the **"Controls"** option.\ **Note!** Ensure the link field is empty to use the video controls. Otherwise, visitors will be redirected to another page when pressing the video player controls. ### Mobile settings **Enable**\ Activates mobile settings. The options below take precedence on mobile devices. **Image ratio**\ Use the options to adapt media to the desired size. You can select one of the standard options: "Same as desktop", "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Check the image ratios [here](/unicorn-shopify-theme/dynamic-theme-sections.md#content).\ Alternatively, apply one of the custom options. These options include additional settings that appear underneath the drop-down after selecting an option: * **"Proportion"**. Select the option to adjust a media height as a percentage using the **"Proportion"** scale. The parameters can be changed from 10% to 210%\*. \*The "Proportion" option is applied to mobile by default. **"Proportion"** 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. * **"Fixed"**. 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 1000 pixels.