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

---

Banner Content Settings

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

---

Banner Positioning & Padding

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 Styling

• 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.