Product - Promo Banner

The Promo Banner allows you to highlight limited-time deals, major events, or announcements directly on your product page. It’s fully customizable and designed to grab attention without interrupting the shopping experience.

❗❗Custom Placement Instructions❗❗

To place the Promo Banner on your product page:

  1. Go to the Product Information section in your theme editor.

  2. Click “Add block” and choose Custom Liquid.

  3. Paste the following snippet inside the block:

htmlCopyEdit<div id='ecomz-banner'></div>

  1. Save your changes and drag the block to adjust its placement on the page.

Accessibility

  • Accessibility Label Sets an ARIA label for screen readers. Default: Promotional Banner

Section Layout Settings

These settings control the overall spacing and size of the promo banner container:

  • Section Background Color: Customize the full section’s background. Example: #FFFFFF

  • Section Margin Top/Bottom (rem): Control vertical spacing above and below the section. Example: Top 1, Bottom 0

  • Section Padding Top/Bottom (rem): Adjust internal spacing inside the section. Example: Top 2, Bottom 2

  • Max Section Width (rem): Restrict the max width of the banner for better layout control. Desktop: 90, Mobile: 120

  • Section Left/Right Padding (px): Fine-tune horizontal spacing. Desktop: Left 20, Right 160 Mobile: Left 0, Right 0

Customize the text inside the promo banner:

  • Banner Message Write your promotional message using basic rich text or inline HTML. Example: ✨ New markdown! Biggest sale in 60+ days

  • Banner Font Size (px) Desktop: 16 Mobile: 15

  • Banner Text Color Example: #000000

  • Banner Font Family Example: Lato

Align and space the text inside the banner:

  • Banner Position Choose from: Left Aligned / Centered / Right Aligned Example: Left Aligned

  • Text Padding Desktop (px)

    • Left: 15

    • Right: 0

    • Bottom: 13

  • Text Padding Mobile (px)

    • Left: 12

    • Right: 0

    • Bottom: 9

  • Banner Background Color Set the background color of the actual banner container. Example: #F5F5F5

  • Banner Border Radius (px) Define how round the corners of the banner should be. Example: 41

This banner is a great way to draw attention to time-sensitive messages while keeping your product page clean and visually cohesive. For advanced placement or stacking multiple snippets, consider using additional Custom Liquid blocks.

PreviousProduct – Text TimerNextProduct - Vertical Benefits

Last updated