# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://palo-alto.presidiocreative.com/collections/collection-pages/promo.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
