Reels
Integrate short video reels on your store pages with the "Reels" section to engage customers.
Reels
Use the "Heading" field to title the section.
The title size can be changed in the "Heading font size" drop-down to "Small", "Medium", or "Large".
If you need to change a title color, use the "Heading color" picker. Here you can paste the hex code to the related field or choose the color using the paint pallet. The color settings will be used for both desktop and mobile.
Use the "Description" input field to add some descriptive text strings to the section that will appear under the heading.
The color of the description can be set in the "Description color" picker. The color you apply for the item will be used for a desktop and mobile.
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 work out in your store: "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 the colorized text and border inside the button will be added. If you used the "Link style", the color will be applied to the text link.
Content
Set the number of content columns using the "Items in row" picker, choosing to display 2, 4, or 6 items per row.
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 align" picker, set the alignment of the heading, description, and buttons to the "Left" or "Center". Leave the "Auto" option to use the pre-set layout settings.
If you need to show a "Dividing line", choose the "Top", "Bottom", or "Both" position. It will be hidden once you use the option "None".
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.
Video
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", "Proportion in %", or "Fixed in px".
"Proportion in %". 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 in %" option is applied to mobile by default. To modify the height specifically for mobile, use the options in the "Mobile settings" sub-section.
"Proportion in %" indicators:
*100% = Square
*Less than 100% = Landscape
*More than 100% = Portrait
*For an ideal video aspect ratio (16:9), set the proportion to 56%.
"Fixed in px". This option helps to change image size in pixels by setting the parameters on the "Fixed height" scale. The height can be adjusted between 100 and 1000 pixels.
Use the "Autoplay" function to initiate 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.
Decide whether to display a video with or without a 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 videos repeatedly and continuously.
Product card
Choose the appropriate aspect ratio of the product images in the "Image ratio". You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Each image ratio you can check 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.
Mobile settings
Using the "Enable mobile settings" option, you can apply changes to the mobile mode regardless of the desktop settings.
The "Height" of an image/video on mobile can be changed by operating one of the options: "9/16", "16/9", "Fullscreen", "Fullscreen without header", "Proportion in %", or "Fixed in px".
"Fullscreen". Set this option to show a media in the full width of a page. The content width will match the page width set in global settings if the "Enable page width" option is ticked under Theme settings -> Layout.
"Fullscreen without header". Using this option, 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.
"Proportion in %". Select the option to adjust the media height as a percentage using the "Proportion of height" scale. The parameters can be changed from 10% to 210%.
"Proportion in %" indicators:
*100% = Square
*Less than 100% = Landscape
*More than 100% = Portrait
*For an ideal video aspect ratio (16:9), set the proportion to 56%.
"Fixed in px". This option helps to change media size in pixels by setting the parameters on the "Fixed height" scale. The height can be adjusted between 100 and 700 pixels.
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 a product name on the mouse hover, select a color for the "Product accent" item.
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.
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.
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.
Press the "Select" button in the "Image or cover image" source selector to upload the necessary image for both desktop and mobile. The image can be used as a banner or a cover image for a video. The recommended image ratio is two-to-one (width-to-height respectively).
Shopify-hosted video
Using this option, the Shopify-hosted video will appear within the block. The video can be added by simply pressing the "Select" button in the "Video" source selector. You can either upload the video to your Store library or utilize one that has already been stored in your Shopify admin -> Content -> Files.
Or embed video from URL
This approach lets you add a YouTube or Vimeo video. The video can be placed by simply pasting a link into the "URL" field.
In the "Video alt text", paste the descriptive text for the screen readers. More details can be read in the initial documentation.
This is an example of how a video reel might be displayed in the section:
Last updated
