Product reels

Overview

This section allows merchants to showcase products from a selected Shopify collection in a visually engaging reels-style layout. Products can be displayed in either a Grid or Slideshow layout, with configurable section heading, product card typography, responsive heights, navigation controls, container width, colors, and spacing.

Section Configuration

Setting	Description
Collection	Selects the Shopify collection whose products will be displayed in the Product Reels section.
Tagline	Adds a short introductory text above the main section heading.
Tagline Size	Controls the tagline text size: Large, Medium, or Small.
Tagline Weight	Controls the font weight of the tagline from Thin to Black.
Tagline Case	Controls text casing: None, Uppercase, Capitalize, or Lowercase.
Tagline Font Family	Selects the font family for the tagline: Default or Heading font.
Tagline Color Style	Applies a predefined color style: Default, Heading, or Body.
Heading	Defines the main heading/title of the Product Reels section.
Heading Size	Controls the heading size from H1–H6 or Large, Medium, and Small text sizes.
Heading Weight	Controls the heading font weight from Thin to Black.
Heading Case	Controls heading casing: None, Uppercase, Capitalize, or Lowercase.
Heading Tag	Defines the semantic HTML heading level from H1 to H6.
Heading Font Family	Selects the heading font family: Default or Body font.
Heading Color Style	Applies a predefined heading color style: Default or Body.
Heading Link Style	Defines the styling applied if the heading contains a link.
Description	Adds supporting rich-text content below the section heading.
Text Size	Controls the description text size: Large, Medium, or Small.
Text Weight	Controls the description font weight from Thin to Black.
Text Case	Controls description text casing.
Text Font Family	Selects the description font family: Default or Heading font.
Text Color Style	Applies a predefined color style: Default or Heading.
Header Margin – Desktop	Controls the spacing between the section header and product content on desktop.
Header Margin – Mobile	Controls the spacing between the section header and product content on mobile.

Card Configuration

The card settings control how individual products are presented within the Product Reels section.

Setting	Description
Card Heading Size	Controls the size of the product title displayed on each product card. Options include H6, Large, Medium, and Small.
Card Heading Weight	Controls the font weight of product titles.
Card Heading Case	Controls product title casing: None, Uppercase, Capitalize, or Lowercase.
Card Heading Tag	Defines the semantic HTML heading level used for product titles.
Card Heading Font Family	Selects the font family used for product titles.
Card Heading Color Style	Applies the selected color preset to product titles.
Show Unit Pricing	Enables or disables the display of product unit pricing where applicable.
Card Content Alignment	Controls vertical positioning of card content: Top or Bottom.

Grid Settings

These settings control spacing when products are displayed as a grid.

Setting	Description
Desktop Grid Spacing	Controls the gap between product cards on desktop.
Mobile Grid Spacing	Controls the gap between product cards on mobile.

Slideshow Settings

These settings apply when the section is configured to use slideshow behavior.

Setting	Description
Show Arrows	Enables or disables navigation arrows for moving between products/slides.
Autoplay	Enables automatic movement between slides.
Slide Change Interval	Controls the delay between automatic slide changes. The available range is 2–9 seconds.
Arrow Button Type	Defines the visual style of the slideshow navigation buttons: Primary, Secondary, or Link. This option is available when slideshow arrows are enabled.

Layout Settings

Setting	Description
Desktop Height	Controls the overall section height on desktop: 40vh, 60vh, 80vh, or 100vh.
Mobile Height	Controls the overall section height on mobile: 40vh, 60vh, 80vh, or 100vh.
Container Layout	Defines the section's horizontal layout: Page Width, Contained Content, or Container Fluid.
Border Style	Adds an optional border to the section: None, Top, Bottom, or Top & Bottom. This setting is available when the Page Width container is not selected.
Container Size	Controls the maximum desktop container width as a percentage of the available page width.
Desktop Text Alignment	Controls the alignment of the section's header content on desktop.
Mobile Text Alignment	Controls the alignment of the section's header content on mobile.
Color Scheme	Applies a predefined Shopify theme color scheme to the section.

Inner Spacing

Controls spacing inside the section container.

Setting	Description
Desktop Top Padding	Controls internal spacing at the top of the section on desktop.
Desktop Bottom Padding	Controls internal spacing at the bottom of the section on desktop.
Desktop Left Padding	Controls internal left spacing on desktop.
Desktop Right Padding	Controls internal right spacing on desktop.
Mobile Top Padding	Controls internal top spacing on mobile.
Mobile Bottom Padding	Controls internal bottom spacing on mobile.
Mobile Left Padding	Controls internal left spacing on mobile.
Mobile Right Padding	Controls internal right spacing on mobile.

Outer Spacing

Controls spacing outside the section.

Setting	Description
Desktop Top Spacing	Controls the space above the section on desktop.
Desktop Bottom Spacing	Controls the space below the section on desktop.
Desktop Left Spacing	Controls external left spacing on desktop.
Desktop Right Spacing	Controls external right spacing on desktop.
Mobile Top Spacing	Controls the space above the section on mobile.
Mobile Bottom Spacing	Controls the space below the section on mobile.
Mobile Left Spacing	Controls external left spacing on mobile.
Mobile Right Spacing	Controls external right spacing on mobile.