Product Box Designer: Block — Attribute Buttons
Block — Attribute Buttons
Attribute buttons display the product's selectable variants — such as size or color — as clickable buttons directly on the card. The customer can select a variant and add it to the cart without opening the product page.
What the block does
The block lists the product's variants as small buttons. A variant that is in stock becomes an active button that adds that specific variant to the shopping cart. An out-of-stock variant is displayed as struck through and in a subdued style, so the customer sees what is available without being able to select it.
The block therefore has its own colors for available and out-of-stock variants.
Settings
Setting | What it does |
|---|---|
Background color | Button color for in-stock variants. |
Text color | Text color for in-stock variants. |
Background color Out of stock | Button color for out-of-stock variants. |
Text color Out of stock | Text color for out-of-stock variants. |
Alignment | Left, centered, or right. |
Spacing between buttons | Space between variant buttons. |
Frame / Corner radius | Outline and rounding. |
Border color Out of stock | Separate border color for out-of-stock variants. |
Inner padding | Space inside the block. |
Outer padding | Space around the block. |
How to use it
- Use it in categories where variant selection is a natural part of the purchase — clothes, shoes, and similar. This saves the customer an extra click.
- Give out-of-stock variants a clearly subdued style, so it's easy to see what's left.
- Keep the spacing between buttons even, so a row of sizes looks tidy.
Tips
- The block only shows something for products that actually have variants. Products without variants get an empty field — consider which categories you place it in.
- For products without variants, the CTA button is often a better choice. The two complement each other: attribute buttons for variant products, CTA button for the rest.