> For the complete documentation index, see [llms.txt](https://palo-alto.presidiocreative.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://palo-alto.presidiocreative.com/collections/collection-pages/promo.md).

# Promo

Promo blocks allow you to inject styled content between products in the grid. Useful for sales banners, category callouts, or custom messages.

<figure><img src="/files/bTLsEr6mcEuffLYbw0Gd" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
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.
{% endhint %}

<table><thead><tr><th width="197.4114990234375">Settings</th><th width="144.5928955078125" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Collection</td><td align="center"><code>collection</code></td><td>Show promo only on selected collection.</td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Promo background image.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Show in position</td><td align="center"><code>range</code></td><td>Determines product position to insert promo.</td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Choose how wide the promo should be: <code>Grid item</code>, <code>2 grid items</code>, or <code>Full width</code>.</td></tr><tr><td><strong>Text</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>richtext</code></td><td>Promo headline text (HTML supported).</td></tr><tr><td>Heading size</td><td align="center"><code>range</code></td><td>Size of heading text.</td></tr><tr><td><strong>Highlight</strong></td><td align="center"></td><td></td></tr><tr><td>Type</td><td align="center"><code>select</code></td><td>Visual treatment for emphasized words: <code>Underline</code>, <code>Squiggle</code>, <code>Circle</code>, <code>Alternate font</code>, etc.</td></tr><tr><td>Highlight color</td><td align="center"><code>color</code></td><td>Color used for text highlights.</td></tr><tr><td>Text color</td><td align="center"><code>color</code></td><td>Text color used when highlighting.</td></tr><tr><td>Text</td><td align="center"><code>textarea</code></td><td>Description or message text.</td></tr><tr><td>Text size</td><td align="center"><code>range</code></td><td>Adjusts the body text size.</td></tr><tr><td>Content position</td><td align="center"><code>select</code></td><td>Placement of text over the image:<code>Center</code>, <code>Top left</code>, <code>Bottom right</code>, etc.</td></tr><tr><td>Content layout</td><td align="center"><code>select</code></td><td>Layout of text and button: <code>Inline</code> or <code>Stacked</code>. Inline applies only on full width for desktop.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Adds an overlay: <code>Disabled</code>, <code>Opacity overlay</code>, and <code>Text underlay</code>.</td></tr><tr><td>Background color</td><td align="center"><code>color</code></td><td>Applies when no image is chosen.</td></tr><tr><td>Show text background</td><td align="center"><code>checkbox</code></td><td>Adds a colored background behind text.</td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Background color override.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Text color override.</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Button text</td><td align="center"><code>text</code></td><td>Button label. Leave blank to link the full promo image.</td></tr><tr><td>Button URL</td><td align="center"><code>url</code></td><td>Destination URL for the button.</td></tr><tr><td>Button color</td><td align="center"><code>select</code></td><td>Style color of the button: <code>Primary</code>, <code>Secondary</code>, <code>White</code>, or <code>Black</code>.</td></tr><tr><td>Button style</td><td align="center"><code>select</code></td><td>Visual button type: <code>Solid</code>, <code>Outline</code>, <code>Solid with border</code>, <code>Soft</code>, or <code>Text</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Button size option: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr></tbody></table>

### 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:

<figure><img src="/files/3viISyiJLlDDMJ8zYcgW" alt=""><figcaption></figcaption></figure>

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

{% hint style="info" %}
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.
{% endhint %}
