Product card block

Your theme

One product shown as a card with image, title, price and quick add.

Where to find it: open any section sidebar that accepts theme blocks, choose Add block, then pick Product card.

The same block in the three themes:

When you add this section, you can start from these presets: Product card, Product card, tilted.

Settings

Setting	Type	Default	Options	Notes
Product	Product
Image ratio	Select	Use theme setting	Use theme setting, Adapt to image, Portrait (4:5), Square (1:1), Landscape (4:3), Wide (16:9)
Vendor	Select	Use theme setting	Use theme setting, Show, Hide
Show quick action button	Select	Use theme setting	Use theme setting, Show, Hide
Tilt angle	Slider	0 °	-6 to 6 °, step 1	Tilts the card at rest, less on phones. It straightens with a spring on hover and keyboard focus.
Heading level	Select	Heading 3	Heading 2, Heading 3, Heading 4, Heading 5, Heading 6	Use one level below the heading above the card, so the page outline stays in order.

Setting	Type	Default	Options	Notes
Alignment	Text alignment	left	Left, center, right
Width	Select	Fill	Fit content, Fill, Custom
Custom width	Slider	50 %	10 to 100 %, step 5	Shown when Width is Custom.
Max width	Select	None	None, Narrow, Normal, Wide

Setting	Type	Default	Options	Notes
Inherit color scheme	Checkbox	On
Color scheme	Color scheme	Scheme 1		Shown when Inherit color scheme is off.
Corner radius	Slider	0 px	0 to 80 px, step 2
Border	Select	None	None, Solid, Dashed
Border thickness	Slider	2 px	1 to 8 px, step 1	Shown when Border is not None.

Setting	Type	Default	Options	Notes
Customize padding	Checkbox	Off		Padding settings stay visible while any side has padding. Set a side to 0px to remove its padding.
Top padding	Slider	0 px	0 to 100 px, step 2	Shown when Customize padding is on or Top padding is on or Bottom padding is on or Left padding is on or Right padding is on.
Bottom padding	Slider	0 px	0 to 100 px, step 2	Shown when Customize padding is on or Top padding is on or Bottom padding is on or Left padding is on or Right padding is on.
Left padding	Slider	0 px	0 to 100 px, step 2	Shown when Customize padding is on or Top padding is on or Bottom padding is on or Left padding is on or Right padding is on.
Right padding	Slider	0 px	0 to 100 px, step 2	Shown when Customize padding is on or Top padding is on or Bottom padding is on or Left padding is on or Right padding is on.

Setting	Type	Default	Options	Notes
Animation on scroll	Select	None	Theme default, None, Fade, Slide up, Scale in, Wipe, Blur in	The card already slides in on its own. Pick an effect to animate the whole block as well.