Video popup

The Video Popup section allows merchants to display promotional videos inside an interactive popup layout combined with customizable media and content areas. This section is ideal for showcasing brand stories, campaign videos, product highlights, tutorials, or marketing content while maintaining a clean and visually engaging storefront presentation.

The section supports both image and video-based media layouts along with flexible content blocks for headings, text, buttons, and spacing control.

Settings

  • Image: Uploads the image displayed as the main section media.
  • A Shopify-hosted video: Uses a Shopify-hosted video instead of an image for the main media area.
  • Preload image: Enables image preloading to improve loading performance and visual stability.
  • Desktop media ratio: Controls the media aspect ratio displayed on desktop devices.
  • Tablet media ratio: Adjusts the media aspect ratio for tablet layouts.
  • Mobile media ratio: Defines the media aspect ratio displayed on mobile devices.
  • Color scheme: Controls the color styling used for the information content area.
  • Max width: Defines the maximum width of the information content container.
  • Background opacity: Adjusts the opacity level of the content background overlay for improved text readability.
  • Desktop position: Controls the content position on desktop devices.
  • Tablet position: Defines the content position for tablet layouts.
  • Mobile position: Adjusts the content position on mobile devices.
  • Desktop alignment: Controls the content alignment displayed on desktop screens.
  • Tablet alignment: Defines the content alignment for tablet devices.
  • Mobile alignment: Controls the content alignment on mobile devices.
  • Video: Selects a Shopify-hosted video used inside the popup window.
  • Or YouTube video link: Allows you to display a YouTube video inside the popup using a video URL.
  • Button label: Defines the text displayed for the popup trigger button.
  • Button text spacing: Controls the spacing between text elements displayed inside the popup button.

The Information area inside this section is built using flexible content blocks, including Heading, Text, Buttons, and Spacing blocks.

Block: Heading

  • Heading: Defines the main heading text displayed inside the section.
  • Heading style: Controls the visual appearance of the heading text. Available options include Default and Uppercase.
  • Large desktop font size: Controls the heading font size displayed on large desktop screens.
  • Desktop font size: Defines the heading font size for desktop devices.
  • Tablet font size: Adjusts the heading font size displayed on tablet devices.
  • Mobile font size: Controls the heading font size displayed on mobile devices for better responsiveness.

Block: Text

  • Text: Defines the descriptive or promotional text content displayed inside the block.
  • Text scale: Controls the overall text size and visual emphasis.

Block: Buttons

The Buttons block allows merchants to display up to two call-to-action buttons inside the section. Both buttons share the same configuration settings.

  • Button label: Defines the text displayed on the button. Leave empty to hide the button.
  • Button link: Sets the destination URL for the button.
  • Open this link in a new window: Opens the button link in a new browser tab or window when enabled.
  • Use outline button style: Applies an outline-style appearance instead of a solid button style.

Block: Spacing

The Spacing block allows merchants to add adjustable spacing between content blocks inside the section for cleaner and more flexible layouts.

  • Desktop spacing: Controls the spacing size displayed on desktop devices.
  • Tablet spacing: Adjusts the spacing size for tablet layouts.
  • Mobile spacing: Defines the spacing size displayed on mobile devices.

Using high-quality promotional videos, balanced content positioning, and concise messaging can help create a more interactive storefront experience while improving customer engagement with featured campaigns or products.