Skip to main content

Popup Sections

Popup sections show overlay content on top of the page. Ronin includes 4 popup sections. They live in the Popup section group, which appears on every page, instead of in the page's own section list. Open Online Store > Themes > Customize, find the Popup group in the sidebar, and enable the popup you want. All four ship disabled by default.

Every popup shares the same conditions:

  • Popup type: Flyout (slides up in the bottom-right corner) or Lightbox (zooms in at the centre).
  • Where to show: On all pages, or On target pages listed one rule per line.
  • When to show: Immediately, or On conditions. On conditions combines a Time delay (None, 3, 5, 15, or 30 seconds, 1 or 2 minutes) with a Page scroll depth (None, 25%, 50%, 75%, or 100%).

Popups that can repeat also have a How often to show setting: Only once, Once per session, Every hour, Every 12 hours, Every day, Every 3 days, Every week, Every 2 weeks, or No limit.

A promotional overlay for announcing sales, launches, or news with a single call to action.

section-popup-promo.webp

Features:

  • Popup type, where to show, target pages, when to show, time delay, and page scroll depth conditions
  • How often to show frequency control
  • Subheading, heading with size, body, disclaimer, and content alignment
  • Promo button label and link, plus a close button label
  • Image or video media with desktop media width and position (Left, Right, or Background)
  • Hide the image on mobile and set the media overlay opacity
  • Color scheme and desktop content width

An age gate with accept and decline buttons. Accepting confirms the visitor's age and closes the popup. Declining sends them to a URL you choose.

section-popup-age-verification.webp

Features:

  • Popup type, where to show, target pages, when to show, time delay, and page scroll depth conditions
  • Subheading, heading with size, body, disclaimer, and content alignment
  • Accept button label
  • Decline button label and decline button link for under-age visitors
  • Image or video media with desktop media width and position (Left, Right, or Background)
  • Hide the image on mobile and set the media overlay opacity
  • Color scheme and desktop content width
note

Popup age verification has no How often to show setting. Only the conditions above and the visitor's accept or decline choice control when it appears.

A promotional overlay with a live countdown timer that builds urgency around a limited offer.

section-popup-countdown-promo.webp

Features:

  • Popup type, where to show, target pages, when to show, time delay, and page scroll depth conditions
  • How often to show frequency control
  • Timer mode: Fixed date, Evergreen (the default), or Daily
  • Fixed date with year, month, day, hour, and minute
  • Evergreen timer with a unit (Days, Hours, Minutes, or Seconds) and value
  • Daily timer that counts down to a chosen hour and minute
  • Subheading, heading with size, body, disclaimer, and content alignment
  • Promo button label and link, plus a close button label
  • Image or video media with desktop media width, position, hide on mobile, and overlay opacity
  • Color scheme and desktop content width

A newsletter overlay with an email field. It submits through Shopify's customer form and shows a success message after the visitor signs up.

section-popup-sign-up.webp

Features:

  • Popup type, where to show, target pages, when to show, time delay, and page scroll depth conditions
  • How often to show frequency control
  • Subheading, heading with size, body, disclaimer, and content alignment
  • Email placeholder, submit button label, and close button label
  • Inline error and success messages from the Shopify customer form
  • Image or video media with desktop media width and position (Left, Right, or Background)
  • Hide the image on mobile and set the media overlay opacity
  • Color scheme and desktop content width
Popup best practices
  • One popup at a time: Enable only the popup with your most important message. Stacked overlays frustrate visitors.
  • Let visitors settle first: Set When to show to On conditions with a short time delay or scroll depth instead of Immediately.
  • Respect dismissals: Choose a How often to show interval such as Every day or Every week rather than No limit.
  • Target where it matters: Use Where to show > On target pages to limit a promo to the pages where it is relevant.
  • Check mobile: Enable Hidden image on mobile if the media crowds the content, and confirm the close button is easy to reach.