# Promo

Displays a promotional image with optional heading, text, and button to advertise offers or highlight content within your store grid layout.

{% hint style="warning" %}
You can add up to 5 promo blocks to appear within the product grid.
{% endhint %}

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FdCMmACUdKeAfZ4VAQbf4%2Fpromo-block.gif?alt=media&#x26;token=d0fcc21d-79d9-4987-9471-2db9fe12eb43" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="203.58282470703125">Settings</th><th width="141.21875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Uploads an image to display in the promo.</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 the product slot in which the promo should appear.</td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Sets promo block width: <code>Full width</code>, <code>2 grid items</code>, or <code>Grid item</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 with support for highlight styling.</td></tr><tr><td>Heading size</td><td align="center"><code>range</code></td><td>Adjusts promo headline size.</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>Applies special style (<code>Underline</code>, <code>Circle</code>, etc.) to italicized heading words.</td></tr><tr><td>Highlight color</td><td align="center"><code>color</code></td><td>Sets the decoration color for highlighted words.</td></tr><tr><td>Text color</td><td align="center"><code>color</code></td><td>Sets the color of highlighted text.</td></tr><tr><td>Text</td><td align="center"><code>textarea</code></td><td>Adds short descriptive promo content.</td></tr><tr><td>Text size</td><td align="center"><code>range</code></td><td>Controls promo text size.</td></tr><tr><td>Text color</td><td align="center"><code>select</code></td><td>Sets promo text color to <code>Light</code> or <code>Dark</code>.</td></tr><tr><td>Content position</td><td align="center"><code>select</code></td><td>Positions the text over the image: <code>Top left</code>, <code>Center</code>, <code>Bottom right</code>, and etc.</td></tr><tr><td>Content layout</td><td align="center"><code>select</code></td><td>Choose a layout style: <code>Stacked</code> or <code>Inline</code>.</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>Add an opacity or text underlay: <code>Disabled</code>, <code>Opacity</code>, or <code>Text underlay</code>.</td></tr><tr><td>Background color</td><td align="center"><code>color</code></td><td>Fallback background color if no image is used.</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>Override color scheme for background.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Override color scheme for text.</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>Sets the button text. Leave blank to make entire image clickable.</td></tr><tr><td>Button URL</td><td align="center"><code>url</code></td><td>Destination link for the promo button or image.</td></tr><tr><td>Button color</td><td align="center"><code>select</code></td><td>Sets button color. Options: <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>Select a style: <code>Solid</code>, <code>Outline</code>, <code>Soft</code>, <code>Text</code>, or <code>Solid with border</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Sets button size: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr></tbody></table>
