Product Box Designer — Block Reference

Each block is a single information element on the product card — an image, a price, a button. You add blocks to sections, configure them individually, and arrange them by dragging. This page describes all available blocks and their settings.

Product image (Product Thumbnail)

Displays the product's main image.

Setting	What it does
Image size	The resolution the image is loaded in
Object Fit (Object Fit)	How the image fills the container (Cover, Contain, etc.)
Inner/outer spacing	Space inside and around the block

Product title (Product Title)

Displays the product name.

Setting	What it does
Font options	Font size, weight, and style
Text color	Color of the title text
Background color	Background behind the title
Show long title	When off, a short title is displayed if one exists
Line limit	Max number of lines before text is truncated (1–5, or no limit)
Column width	How wide the block is relative to others in the same row
Inner/outer spacing	Space inside and around the block

Product price (Product Price)

Displays the product price with separate styling for regular price, sale price, and the strikethrough old price.

Group	Settings
Regular price	Background color, text color, font options
Sale price	Background color, text color, font options
Old price	Background color, text color, font options
General	Alignment, extra spacing between prices, column width, inner/outer spacing

Product description (Product Description)

Displays the product's description text.

Setting	What it does
Font options	Font size, weight, and style
Text color	Color of the description text
Background color	Background behind the description
Show long description	When on, full description is displayed instead of short description
Line limit	Max number of lines before text is truncated (1–5, or no limit)
Column width	Width relative to other blocks in the same row
Inner/outer spacing	Space inside and around the block

Product Ribbons

Badge-style labels placed over the product card — for discounts, new arrivals, customer club campaigns, and bundles. All ribbons on a card share the same position and style, but each ribbon type can be toggled on and off independently.

Positioning: Choose which corner of the card the ribbons are anchored to, whether they are stacked horizontally or vertically, and the distance from the card's edges.

Style options: Solid, Outline, Soft (toned), Pill, Badge, Elevated

Common settings: Corner radius, inner spacing, font, text transform (None, Uppercase, Lowercase, Capitalized), icon position (before or after text)

Ribbon group	What it shows
Custom HTML ribbon	A ribbon based on a custom HTML tag set on the product
Discount percentage	The discount share for products on offer
New arrival label	"New" label on recently added products
Customer club label	Label for products with customer club price
Bundle label	Label for bundled products

Each group has its own settings for: background color, text color, accent/border color, gradient end color, and icon.

Product Tag

A single configurable label that floats freely over the card. Unlike the ribbons, the product label is positioned with exact coordinates and can be rotated.

Setting	What it does
Label type	What the label shows: Custom text, Newness, or Discount percentage
Shape	Pill, Circle, Rectangle, or Rounded
Background color	The label's background
Text color	The label's text color
Font options	Font size, weight, and style
Icon	Optional icon on the label
Border / Corner radius	Outline and corner rounding
Inner padding	Spacing inside the label
Transparency	Transparency (0–1)
Rotation	Angle in degrees (−180° to 180°)
Position X / Y	Placement as a percentage from the left and top of the card

Stock Status (Product Stock Status)

Shows whether the product is in stock.

Setting	What it does
Font options	Font size, weight, and style
Hide text	Shows only the status indicator without a text label
Show stock quantity	Shows the exact number of units in stock
Override "In stock" text	Replaces default "In stock" text with custom text
Override "Sold out" text	Replaces default "Sold out" text with custom text
Text color	Color of the status text
Background color	Background for the status badge
Border / Corner radius	Outline and rounding
Column width	Width relative to other blocks
Inner/outer padding	Spacing inside and around the block

CTA Button (Product CTA Button)

The call-to-action button — typically used to add the product to the cart.

Setting	What it does
Font options	Font size, weight, and style
Hide button text	Shows only the icon, no text label
Text color	Button label color
Background color	Button's background
Hover text color	Text color on hover
Hover background color	Button's background on hover
Icon	Icon displayed on the button
Border / Corner radius	Outline and rounding
Column width	Width relative to other blocks
Inner/outer spacing	Spacing inside and around the block

Wishlist (Product Wishlist)

A button that allows customers to save the product to their wishlist.

Setting	What it does
Icon	Wishlist icon (default: heart)
Icon color	Icon color
Background color	Background behind the icon button
Border / Corner radius	Outline and rounding
Column width	Width relative to other blocks
Inner/outer spacing	Spacing inside and around the block

Attribute Buttons (Product Attribute Buttons)

Displays selectable product attributes (such as size or color) as clickable buttons directly on the card.

Group	Settings
Colors (in stock)	Button's background color, text color
Colors (out of stock)	Button's background color, text color
Borders	Border, corner radius; separate border color for sold-out variants
General	Alignment, spacing between buttons, inner/outer spacing

Article Number (Product Article Number)

Displays the product's article number (SKU) and/or EAN code.

Setting	What it does

Setting	What it does
Show item number (SKU)	Turns SKU display on and off
Show EAN	Turns EAN display on and off
Font options	Font size, weight, and style
Text color	Color of the item number text
Background color	Background behind the text
Frame / Corner radius	Outline and rounding
Column width	Width in relation to other blocks
Inner/outer spacing	Spacing inside and around the block

Manufacturer (Product Manufacturer)

Displays brand or manufacturer — as a logo image by default, or as text if no image exists (or if you force text display).

Setting	What it does
Font options	Font size, weight, and style (used for text display)
Use manufacturer name instead of image	Forces text display even if a logo image is available
Image size	How large the logo is displayed (as a percentage)
Column width	Width in relation to other blocks
Inner/outer spacing	Spacing inside and around the block

Reviews (Product Reviews)

Displays the product's star rating and number of reviews.

Setting	What it does
Alignment	Left, centered, or right
Inner/outer spacing	Spacing inside and around the block