# Promotion tiles

In the product grid, you can add promotion tiles that appear next to products. Choose an image or autoplay video, add promotional text, and link to other pages.

<div><figure><img src="/files/1bTzBjOoBOOEAA1Jlj2V" alt=""><figcaption><p>One column layout</p></figcaption></figure> <figure><img src="/files/5YBAu1VWkIgWsIe3pJRR" alt=""><figcaption><p>Two column layout</p></figcaption></figure> <figure><img src="/files/qhBw11OGW7efTa9WNjpN" alt=""><figcaption><p>Full width layout</p></figcaption></figure></div>

## Set up promotion tile

***

Add a promotion tile block, then set the width and height of the tile.

&#x20;

`Click Promotion tile block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="389">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Position in results</mark></td><td>Set the position of the promotion tile within the product grid results.</td><td><strong>1-50</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 1</mark></td></tr><tr><td><mark style="color:blue;">Width</mark></td><td>Choose the width of the promotion tile relative to the product grid columns.</td><td><strong>One column</strong><br><strong>Two columns</strong><br><strong>Full width</strong></td></tr><tr><td><mark style="color:blue;">Mobile width</mark></td><td>Choose the width of promotion tile for mobile screens.</td><td><strong>One column</strong><br><strong>Full width</strong> <em><mark style="background-color:yellow;">Default</mark></em></td></tr><tr><td><mark style="color:blue;">Minimum height</mark></td><td>Set the minimum height of the promotion tile.</td><td><strong>150-600</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 300</mark></td></tr></tbody></table>

## Add image or autoplay video

***

Add an image or autoplay video (without sound) as the promotion tile's background.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Using color overlays</strong></mark></td><td>Learn how to change overlay colors and use gradients.</td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#overlay-colors">/pages/3wq6hFMr3k1BDOHIgjqZ#overlay-colors</a></td><td><a href="/files/r6qvEikOKVMq5Hv30JkJ">/files/r6qvEikOKVMq5Hv30JkJ</a></td></tr></tbody></table>

{% tabs %}
{% tab title="Video requirements" %}
For **autoplay videos**, make sure your video files meet the following requirements:

<table data-header-hidden><thead><tr><th width="210"></th><th></th></tr></thead><tbody><tr><td><strong>Video file type</strong></td><td><code>.mp4</code> or <code>.mov</code><br><br><em>Embedded YouTube or Vimeo videos are not supported</em>.</td></tr><tr><td><strong>Video length</strong></td><td>&#x3C; 20 seconds (Recommended)</td></tr><tr><td><strong>Video size</strong></td><td>&#x3C; 10MB (Recommended)</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

&#x20;

`Click Promotion tile block to find settings`

<table><thead><tr><th width="176">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image for the promotion tile.</td></tr><tr><td><mark style="color:blue;">Mobile image</mark></td><td>Select or upload an alternate image for mobile devices.</td></tr><tr><td><mark style="color:blue;">Video</mark></td><td>Add a short autoplay video (without sound) to replace the image.</td></tr></tbody></table>

## Add text

***

Add a **heading** and **text** to overlay the promotion tile.

&#x20;

`Click Promotion tile block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="344">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Add a title for the promotion tile.</td><td><mark style="background-color:yellow;">Default: Promotion</mark></td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add descriptive text for the promotion.</td><td></td></tr><tr><td><mark style="color:blue;">Text alignment</mark></td><td>Set the position of the text content within the promotion tile.</td><td><strong>Top / Middle / Bottom</strong><br><strong>Left / Center / Right</strong></td></tr></tbody></table>

## Add link and button

***

You can make the promotion tile a **clickable link** or add a **button** to redirect visitors to another page.

&#x20;

`Click Promotion tile block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="364">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Link URL</mark></td><td>Enter the URL that you want the promotion tile to link to.</td><td></td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter the text to display on the button.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: Shop now</mark></td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Choose the visual style of the button.</td><td><strong>Solid</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Outline</strong><br><strong>Text</strong></td></tr><tr><td><mark style="color:blue;">Button placement</mark></td><td>Select where to position the button within the promotion tile.</td><td><strong>Standard</strong><br><strong>Bottom-anchored</strong> <em><mark style="background-color:yellow;">Default</mark></em></td></tr></tbody></table>


---

# 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://help.fluorescent.co/eclipse/collections/collection-page/promotion-tiles.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.