Reels
Integrate short video reels on your store pages with the "Reels" section to engage customers.
Reels
Heading
Use the "Heading" placeholder to add a section title. Start typing text in the field to view the additional settings:
The font size of the title can be changed to "Small", "Medium", or "Large" in the "Size" drop-down.
If you need to change a title color, use the "Color" picker. Here you can paste the hex code into the related field or select the color using the paint palette. The color settings will be used for both desktop and mobile.
Description
Use the "Description" input field to add some descriptive text strings to the section that will appear under the heading. Color settings will be shown after entering text.
The color of the description can be set in the "Color" picker. The color you apply to the item will be used for both desktop and mobile.
Content
Set the number of content columns using the "Items in row" picker, choosing to display 2, 4, or 6 items per row.
Media
Use the "Height" options to adapt a media to the desired size. There are a few available options that can be selected from the drop-down: "9/16", "16/9", Fixed in px", or "Proportion of height".
"Fixed in px". This option helps to change an image size in pixels by specifying the parameters on the "Fixed height" scale. The height can be adjusted between 100 and 1000 pixels.
"Proportion of height". Select the option to adjust a media height as a percentage using the "Proportion of height" scale. The parameters can be changed from 10% to 210%*.
*The "Proportion of height" option is applied to mobile by default. To modify the height specifically for mobile, use the options in the "Mobile settings" subsection.
"Proportion of height" indicators:
* 100% = Square image
* 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%.
Video settings
Use the "Autoplay" function to start a video display automatically upon a visitor landing on a page without pressing the play button. The video will always be muted, and the entire video area will function as a clickable link. Deactivate the option if you need to use the "Muted" option.
Decide whether to display a video with or without sound by enabling or disabling the "Muted" option. This functionality is helpful when the autoplay video option is turned off.
Activate the "Loop" option to play your video repeatedly and continuously.
Product card
Choose the appropriate image aspect ratio in the "Image ratio" drop-down. You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Check each image ratio here.
Show second image on hover
Use the option to display a second product image when hovering over the product image.
Show vendor
Display the product vendor above the product title by simply enabling the checkbox.
Show price
Activate the "Show price" option to display the price below a product name.
Button/Second button
Use the settings described below to add or edit buttons that will be displayed under the description.
Change the internal button text in the "Label" field. Leave the field blank to hide the button.
To redirect customers to the desired page, edit the "Link". Use the link from the source selector, or paste the one if you use an external link.
Use the "Style" drop-down to change the button's appearance in the sections. The theme includes three styles that can fit your store design: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following help page.
Use the "Color" picker to change the button background color for the "Primary" style. For the "Secondary" style, colored text and a border will be added to the button. If you used the "Link style", the color will be applied to the text link.
Section layout
Use the "Layout" drop-down to position the section's title, description, and buttons to the left or center. Select either "Heading on top" or "Heading top center."
In the "Mobile alignment" picker, set the alignment of the heading, description, and buttons to "Left" or "Center". Leave the "Auto" option to use the pre-set layout settings.
To add a divider between sections, use the "Dividing line" to set the position: "Top", "Bottom", or "Both". The dividing line will be hidden when you select the "None" option.
On the "Top spacing" and "Bottom spacing" scales, 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
Using the "Enable" option, you can apply changes to the mobile mode regardless of the desktop settings. Activate the option to display all the related settings.
The "Height" of an image or video on mobile can be changed by operating one of the options: "9/16", "16/9", "Fixed in px", "Proportion of height", "Fullscreen", or "Fullscreen without header".
"Fixed in px". This option helps to change an image size in pixels by specifying the parameters on the "Fixed height" scale. The height can be adjusted between 100 and 800 pixels.
"Proportion of height". Select the option to adjust a media height as a percentage using the "Proportion of height" scale. The parameters can be changed from 10% to 210%*.
*The "Proportion of height" option is applied to mobile by default.
* "Proportion of height" indicators:
* 100% = Square image
* 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 image/video width will match the page width set in global settings if the "Enable page width" option is ticked under Theme settings -> Page layout.
"Fullscreen without header". Using this option, the media will be cropped at the top and bottom. The top spacing will be subtracted from the total height. Be sure to review the settings on the storefront to confirm they meet your expectations.
Colors
The background color of a product can be adjusted in the "Product background" color picker.
The product vendor, name, and price color will be changed by specifying the color in the "Product text" picker.
To change the color of the product name when hovered over, select a color for the "Product accent" element.
Specify colors especially for price using the "Product price" and "Product sale price" color pickers.
Check the following examples of how the section might display on desktop and mobile:
Video
Tip: Add media columns individually using the "Video" block, which can be used multiple times.
Block link
In the "Link" source selector, choose a destination page or paste an external link to redirect visitors when they click on a video or image.
Media
In the "Type" drop-down, determine the media format. It can be changed to "Video" or "YouTube or Vimeo URL". Additional settings related to each option will be displayed after an option is selected.
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 apploaded 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
Note! The "Cover image" and "Alt text" settings will be displayed after selecting the "YouTube or Vimeo URL" video type.
Press the "Select" button in the "Cover image" source selector to upload the necessary image for both desktop and mobile. The recommended image ratio is two-to-one (width-to-height).
In the "Alt text", paste the descriptive text for screen readers. Read more details in the initial documentation.
Content
Using the "Product" selector, you can add a specific product to the bottom of the media. Press the "Select" button to choose an existing product, or click the "Create product" in the second step to add a new one to your admin.
This is an example of how a video reel might be displayed in the section:
Last updated