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.