---
title: "Product Box Designer: Block — CTA Button"
url: "https://support.acendy.com/en/article/new-article-5b6c2ca0-0fd4-45c0-a49d-ceb7a90bed41"
language: "en"
last_updated: "2026-06-26T10:30:45.181Z"
---

# Product Box Designer: Block — CTA Button

## Block — CTA button

The CTA button is the action button on the card — usually "Add to cart". It allows the customer to shop directly from the category list without visiting the product page.

* * *

## What the block does

The block displays a button that adds the product to the cart. The button text adapts to the product's status: a purchase button when the item is in stock, a contact us button, or a pre-order button where applicable. You can override the text for each state, display only an icon, and style the button with custom colors for normal and hover states.

* * *

## Settings

| Setting | What it does |
| --- | --- |
| Button text (in stock) | Custom text when the item is in stock. Empty = default text is used. |
| Button text (out of stock) | Custom text when the item is sold out. |
| Pre-order text | Custom text for pre-order. |
| Contact us text | Custom text for the contact us button. |
| Font options | Font size, weight, and style. |
| Hide button text | Displays only the icon, no text. |
| Text color / Background color | Button colors in normal state. |
| Hover text color / Hover background color | Button colors when the customer hovers the mouse over it. |
| Icon | The icon on the button. Shopping cart by default. |
| Border / Corner radius | Outline and rounding. |
| Column width | How wide the block is in the row, out of 8 columns. |
| Inner spacing | Spacing inside the block. |
| Outer spacing | Spacing around the block. |

* * *

## How to use it

-   Give the button the store's main accent color and a clear hover color. It should be the obvious place to click.
-   **Hide button text** creates a compact icon button — good when space is limited, or when the card is already rich in content.
-   Set custom texts only when you want to deviate from the standard, for example, 'Buy now' instead of 'Add to cart'.

* * *

## Tips

-   If you leave the text fields empty, the button will use the store's default text for each state. This is usually the safest option.
-   The button handles different product types automatically. A product that requires contact will show the contact us button instead of the buy button.
-   If the product has selectable variants (such as size or color), the button can open the variant selection instead of adding directly to the cart. See \[Block — Attribute Buttons\] to display the variants directly on the card.