Collection pages promo

Promo blocks on collection pages are customizable visual banners used to highlight promotions, collections, or announcements. They're strategically inserted within the product grid based on a defined position.

How the block works

To start, you need to open up the theme editor and open any collection page.

Each promo block features a background image, headline, optional content, and a call-to-action button. They can be tailored in design, size, and layout to complement the overall collection style.

Note: you can choose a collection here but this will only show the promo block for that one collection. Leave the setting empty if you want the promo block to be shown on all collection pages.

Key settings

Setting	Type	Description
Collection	collection	Show this promo only on a specific collection page.
Image	image_picker	Upload or select an image for the promo background.
Show in position	range	Grid position where this promo appears (1–48).
Width	select	Defines promo block width (Full width, 2 grid items, or Grid item).
Heading	richtext	Promo heading text. Supports HTML and allows highlighting key words.
Heading size	range	Adjusts the size of the heading (100%–200%).
Type (Highlight)	select	Style of heading highlight (e.g., underline, squiggle, circle, alternate font, etc.).
Highlight color	color	Background color of the highlighted text.
Text color (Highlight)	color	Color of the text inside the highlight.
Text	textarea	Description or subtext under the heading.
Text size	range	Adjusts the body text size (100%–200%).
Text color	select	Choose Light or Dark based on the image for readability.
Content position	select	Placement of text over the image (Center, Top left, Bottom right, etc.).
Content layout	select	Layout of text and button (Inline or Stacked). Inline applies only on full width for desktop.
Text contrast	range	Adjust overlay opacity (0–95%) to improve text readability over the image.
Background color	color	Applies only if no image is chosen. Sets a fallback background color.
Button text	text	CTA label. If left blank, entire promo image becomes clickable.
Button URL	url	CTA label. If left blank, entire promo image becomes clickable.
Button color	select	Style color of the button (Primary, Secondary, White, or Black).
Button style	select	Visual button type (Solid, Outline, Solid with border, Soft, or Text).
Size (Button)	select	Button size option (Small, Medium, or Large).

Adding a new banner

To add a new banner you need to add a new block to the collection pages section.

Show a percentage discount

With Palo Alto, you have the option to show a percentage discount in the collection promo blocks:

To change the position of each block, you have to set it from the block settings (you can not drag and drop them like most blocks).

Please note that if the position set is unavailable (i.e. there are not enough products in the collection) the promo banner will not be shown.