Overview
Product info blocks display dynamic product data from Shopify’s product context. These blocks automatically access the closest product object and render product-specific information like titles, prices, and descriptions.Product Title Block
Displays the product title with customizable typography and linking.Key Features
- Automatically links to product page
- Accesses
closest.product.title - Supports custom typography presets
- Optional background styling
Settings
Text container width
fit-content- Shrink to text width100%- Fill available space
Maximum width constraint
narrow- 600px maxnormal- 900px maxnone- No constraint
Text alignment (visible when width is “100%”)
Typography preset
rte- Default rich textparagraph- Paragraph styleh1throughh6- Heading stylescustom- Custom typography
Text color
var(--color-foreground)- Body text colorvar(--color-foreground-heading)- Heading colorvar(--color-primary)- Link color
Liquid Implementation
Product Price Block
Displays product pricing with support for sale prices, unit pricing, and installment options.Key Features
- Sale price display with strikethrough
- Unit pricing support
- Payment terms / installments
- Tax and shipping information
- Dynamic variant price updates
Settings
Show sale price before regular price
Display payment installment options (requires Shop Pay)
Show tax and shipping policy information
Typography preset for price display
- “ - Default
paragraph- Paragraphh1throughh6- Heading stylescustom- Custom typography
Price container width
fit-content- Fit to content100%- Full width
Text alignment
Liquid Implementation
Price Component Features
- Regular Price - Standard product price
- Sale Price - Discounted price when on sale
- Compare at Price - Original price with strikethrough
- Unit Price - Price per unit measure
- Volume Pricing - Bulk pricing tiers
- Payment Terms - Shop Pay installment options
Product Description Block
Displays the product description with rich text formatting.Key Features
- Renders
closest.product.description - Supports rich text HTML
- Custom typography options
- Background color support
Settings
The product description block uses the same text settings as the text block:Rich text content (defaults to product description)
Container width (
fit-content or 100%)Typography preset
Enable background color
Background color with alpha support
Liquid Implementation
Preset Configuration
Other Product Blocks
Horizon includes additional product info blocks:SKU Block
- Displays product SKU code
- Updates based on selected variant
- Custom formatting options
Product Inventory
- Shows stock availability
- Low stock warnings
- Customizable thresholds
Variant Picker
- Dropdown or swatch style selectors
- Color and size options
- Out of stock indicators
Buy Buttons
- Add to cart button
- Buy now / checkout button
- Quantity selector integration
- Accelerated checkout options
Swatches
- Visual variant selection
- Color swatches
- Image swatches
- Custom styling
Usage Examples
Standard Product Layout
Compact Product Info
Resource Context
Product blocks use Shopify’sclosest object to access product data:
- Product pages
- Collection pages
- Featured product sections
- Product recommendations
Source Code Reference
- Product Title:
/source/blocks/product-title.liquid:1-404 - Product Price:
/source/blocks/price.liquid:1-454 - Product Description:
/source/blocks/product-description.liquid:1-403