Promotion banner

Overview:

The Promotion Banner section is designed to showcase promotional content through visually engaging banners with images, headings, call-to-action buttons, responsive layouts, and customizable styling. It supports multiple banner blocks, content alignment, responsive grid layouts, typography customization, CTA buttons, color schemes, and spacing controls. This section helps merchants promote featured collections, offers, campaigns, seasonal sales, or important announcements in a clean banner-based format.

Blocks Configuration

The Banner block displays an individual promotional banner inside the section.

Media Settings

Setting	Description
Image	Uploads the banner image displayed inside the promotional block.

Heading Settings:

Setting	Description
Heading	Defines the banner heading displayed over the image. Supports rich text formatting such as bold and italic styling.
Heading Size	Controls heading size such as H1–H6, Large, Medium, or Small.
Heading Weight	Adjusts the font thickness ranging from Thin (100) to Black (900).
Heading Case	Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default.
Heading Tag	Sets the HTML heading tag level from H1 to H6 for SEO and accessibility purposes.
Heading Font Family	Allows switching between Default and Body font family styles.
Heading Color Style	Applies predefined color styling to banner headings.
Heading Link Style	Controls styling behavior of links used inside heading content.

Button Settings:

Setting	Description
Button Label	Defines the text displayed on the CTA button such as Shop Now or Explore More.
Button Link	Adds a destination URL for the CTA button.
Button Style	Controls button appearance such as Primary or Secondary style.
Button Case	Changes button text transformation style such as Uppercase, Lowercase, Capitalize, or Default.
Open in New Tab	Opens the CTA link in a new browser tab when enabled.

Content Layout:

Setting	Description
Desktop Content Position	Controls banner content placement such as Top, Middle, or Bottom on desktop devices.
Mobile Content Position	Controls banner content placement on mobile devices.
Desktop Caption Width	Controls banner content width on desktop devices using percentage values.
Mobile Caption Width	Controls banner content width on mobile devices using percentage values.
Desktop Columns	Controls the number of banner columns displayed on desktop devices (1–6 columns).
Mobile Columns	Controls whether 1 or 2 columns appear on mobile devices.
Desktop Rows	Controls the number of banner rows displayed on desktop devices (1–4 rows).
Mobile Rows	Controls the number of banner rows displayed on mobile devices (1–4 rows).
Text Alignment (Desktop)	Sets text alignment inside banners on desktop devices (Left, Center, or Right).
Text Alignment (Mobile)	Sets text alignment inside banners on mobile devices.
Block Color Scheme	Applies a predefined color palette to individual banner blocks.

Section Configuration

Grid Settings:

Setting	Description
Desktop Grid Spacing	Adds spacing between banner blocks on desktop devices.
Mobile Grid Spacing	Adds spacing between banner blocks on mobile devices.

Layout:

Setting	Description
Desktop Height	Controls banner height on desktop devices (350px–598px).
Mobile Height	Controls banner height on mobile devices (250px–400px).
Container Layout	Determines whether the section uses Contained, Contained Content, or Full Width layout.
Container Width	Controls the maximum width of the section container on desktop devices.

Color Scheme:

Setting	Description
Section Color Scheme	Applies a predefined color palette to the Promotion Banner section background and content.