> 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/sections/sections/products/products-list/product.md).

# Product

Displays a specific product with options to override title, description, images, add a second variant image, and include customizable rotating circle text or image badge.

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FnTFpEpbudzmc9u8hBmRP%2Fproduct-block.gif?alt=media&amp;token=4ee79501-53a0-40bb-84df-22cc4bf8f6a2" alt=""><figcaption></figcaption></figure>

> It supports up to 3 blocks, either *Product* or *Collection* type.

<table><thead><tr><th width="228.0966796875">Settings</th><th width="146.90582275390625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Product</td><td align="center"><code>product</code></td><td>Select a Shopify product.</td></tr><tr><td>Title</td><td align="center"><code>text</code></td><td>Optional title override.</td></tr><tr><td>Description</td><td align="center"><code>richtext</code></td><td>Optional description override.</td></tr><tr><td>Button text</td><td align="center"><code>text</code></td><td>Text for the button.</td></tr><tr><td>Show second variant image</td><td align="center"><code>checkbox</code></td><td>Displays an alternate product image.</td></tr><tr><td>Custom image 1</td><td align="center"><code>image_picker</code></td><td>Overrides product image with a custom one.</td></tr><tr><td>Custom image 2</td><td align="center"><code>image_picker</code></td><td>Second custom image (used if enabled).</td></tr><tr><td><strong>Circle text</strong></td><td align="center"></td><td></td></tr><tr><td>Show circle text</td><td align="center"><code>checkbox</code></td><td>Enables circle overlay text.</td></tr><tr><td>Hide on mobile</td><td align="center"><code>checkbox</code></td><td>Hides circle text on small screens.</td></tr><tr><td>Color</td><td align="center"><code>color</code></td><td>Circle text color.</td></tr><tr><td>Rotate animation</td><td align="center"><code>select</code></td><td>Rotation animation: <code>None</code>, <code>Rotate</code>, or <code>Rotate on scroll</code>.</td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Circle message.</td></tr><tr><td>Word spacing</td><td align="center"><code>range</code></td><td>Space between words in circle text.</td></tr><tr><td>Size</td><td align="center"><code>range</code></td><td>Circle text/image size.</td></tr><tr><td>Custom image</td><td align="center"><code>image_picker</code></td><td>Replaces circle text with an image.</td></tr></tbody></table>