# Customer support block

Use the **Customer support** block on your product page to let customers know about your support policy and how they can contact you.

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FdlhFMe66Gzj2KjBhW7um%2Fcustomer-support.png?alt=media&#x26;token=9c60f61c-0de6-4399-97da-915f6b30e62f" alt="" width="563"><figcaption></figcaption></figure>

## Set up block

***

In the editor side panel, click **(+) Add section** and select **Customer support**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

Click on the **Customer support** block to find the following settings.

<table><thead><tr><th width="181">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Column</mark></td><td>Display the block in either the <strong>Right column</strong> (in the product form) or the <strong>Left column</strong> (beneath the product media).</td></tr><tr><td><mark style="color:blue;">Add box</mark></td><td>Display the block within a box with a background color.</td></tr><tr><td><mark style="color:blue;">Text alignment</mark></td><td>Display the headings and buttons as <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong> aligned.</td></tr></tbody></table>

#### Content

<table><thead><tr><th width="186">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Add text to show a main heading for the block.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add text to inform customers about your support policy and contact details.</td></tr><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an optional image next to the text content.</td></tr><tr><td><mark style="color:blue;">Image size</mark></td><td>Set the pixel width of images for desktop screens: between 20 and 120 pixels.</td></tr><tr><td><mark style="color:blue;">Mobile image size</mark></td><td>Set the pixel width of images for mobile screens: between 20 and 100 pixels.</td></tr><tr><td><mark style="color:blue;">Apply circle crop to images</mark></td><td>Choose to crop the image to appear as a circle.</td></tr><tr><td><mark style="color:blue;">Image position</mark></td><td>Display the image Left of content or Right of content.</td></tr></tbody></table>

#### Buttons

<table><thead><tr><th width="161">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Label</mark></td><td>Enter call-to-action text for the button label.</td></tr><tr><td><mark style="color:blue;">Link</mark></td><td>Select or paste a URL to a contact page. <br><br>You can add a “mailto” link that will open up a draft message in their default email client. For example: mailto:joe@email.com</td></tr><tr><td><mark style="color:blue;">Style</mark></td><td>Change the style of the button. Select <strong>Primary button (Solid)</strong>, <strong>Secondary button (Solid)</strong>, or T<strong>ertiary button (Outline)</strong>.</td></tr></tbody></table>

#### Collapsible row

<table><thead><tr><th width="172">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Display as collapsible row</mark></td><td>Show an expandable title that reveals the text when clicked.</td></tr><tr><td><mark style="color:blue;">Expand by default</mark></td><td>Display the collapsible row as open with the text already revealed.</td></tr><tr><td><mark style="color:blue;">Collapsible row title</mark></td><td>Enter text for the row title.</td></tr></tbody></table>

<br>

***

> **Related links**
>
> [Product template](https://help.fluorescent.co/cornerstone/product-pages/product-template)\
> [Product overview blocks](https://help.fluorescent.co/cornerstone/product-pages/product-page-blocks)