Select a product and style its card

Follow these steps

1. 1

   Connect the product

   PropertiesSelect Product

   Select the card and open Product > Select Product. Search by name, SKU, or brand and click a product. Use Refresh if the list is stale. Change selects another product; Remove clears the card’s selection.

2. 2

   Set the layout

   PropertiesCard Style

   The wide layout places the image on the left; the tall layout places it above the text. Adjust card radius, padding, and image gap. After resizing the card on the page, check that the text fits.

3. 3

   Choose visible fields

   PropertiesVisibility

   Toggle brand, category, SKU, price, description, button, and gallery as needed. Hiding a field does not erase the product record. Turning on a field does not create missing product data.

4. 4

   Adjust typography and colors

   PropertiesTypography and Colors

   Set font, weight, size, and color for title, description, and price. You can bind them to paragraph styles. Local overrides affect this card; updating a shared style affects its linked uses. Review brand, category, background, and button colors too.

5. 5

   Add card options

   PropertiesCard Options

   Enable colors or sizes. Add a color and label to each swatch, or values such as S and M to the size list; remove unwanted entries. These are card options, not an editor for the product record’s variants.

6. 6

   Choose the button action

   PropertiesButton Settings

   Choose Add to Cart or Order Form as the CTA type. Set text, icon, size, radius, and auto/full width. For a form, configure its title and fields as well. In reader preview, check that the action uses the intended product.

Related lessons

• Product cards and product tables
• Work with paragraph styles
• Open forms from buttons, cards, and hotspots
• Card images and the product gallery