Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Shopify/horizon/llms.txt

Use this file to discover all available pages before exploring further.

​
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

​
width
select
default:"fit-content"
Text container width
  • fit-content - Shrink to text width
  • 100% - Fill available space
​
max_width
select
default:"normal"
Maximum width constraint
  • narrow - 600px max
  • normal - 900px max
  • none - No constraint
​
alignment
text_alignment
default:"left"
Text alignment (visible when width is “100%”)
​
type_preset
select
default:"rte"
Typography preset
  • rte - Default rich text
  • paragraph - Paragraph style
  • h1 through h6 - Heading styles
  • custom - Custom typography
​
color
select
default:"var(--color-foreground)"
Text color
  • var(--color-foreground) - Body text color
  • var(--color-foreground-heading) - Heading color
  • var(--color-primary) - Link color

​
Liquid Implementation

{% if closest.product == blank %}
  {% assign text = 'placeholders.product_title' | t %}
  {% assign product_title = '<p>' | append: text | append: '</p>' %}
  {% render 'text', fallback_text: product_title, block: block %}
{% else %}
  {% assign product_title = '<p>' | append: closest.product.title | append: '</p>' %}
  <a
    class="contents user-select-text"
    href="{{ closest.product.selected_or_first_available_variant.url }}"
  >
    {% render 'text', fallback_text: product_title, block: block %}
  </a>
{% endif %}

​
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_first
checkbox
default:"true"
Show sale price before regular price
​
show_installments
checkbox
default:"false"
Display payment installment options (requires Shop Pay)
​
show_tax_info
checkbox
default:"false"
Show tax and shipping policy information
​
type_preset
select
default:""
Typography preset for price display
  • “ - Default
  • paragraph - Paragraph
  • h1 through h6 - Heading styles
  • custom - Custom typography
​
width
select
default:"100%"
Price container width
  • fit-content - Fit to content
  • 100% - Full width
​
alignment
text_alignment
default:"left"
Text alignment

​
Liquid Implementation

{%- liquid
  assign block_settings = block.settings
  assign product_resource = closest.product
  assign selected_variant = product_resource.selected_or_first_available_variant
-%}

<product-price
  class="text-block {{ block_settings.type_preset }}"
  data-product-id="{{ product_resource.id }}"
  {{ block.shopify_attributes }}
>
  {% render 'price',
    show_unit_price: true,
    product_resource: product_resource,
    show_sale_price_first: block_settings.show_sale_price_first
  %}

  {% if block_settings.show_tax_info %}
    <div class="tax-note">
      {%- if cart.duties_included and cart.taxes_included -%}
        {{ 'content.duties_and_taxes_included' | t }}
      {%- elsif cart.taxes_included -%}
        {{ 'content.taxes_included' | t }}
      {%- endif -%}
    </div>
  {% endif %}

  {%- if selected_variant != blank and block_settings.show_installments -%}
    <div class="installments">
      {%- form 'product', product_resource, class: 'payment-terms' -%}
        <input type="hidden" name="id" value="{{ selected_variant.id }}">
        {{ form | payment_terms }}
      {%- endform -%}
    </div>
  {%- endif -%}
</product-price>

​
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:
​
text
richtext
Rich text content (defaults to product description)
​
width
select
default:"fit-content"
Container width (fit-content or 100%)
​
type_preset
select
default:"rte"
Typography preset
​
background
checkbox
default:"false"
Enable background color
​
background_color
color
default:"#00000026"
Background color with alpha support

​
Liquid Implementation

{% liquid
  assign product = block.settings.product
  if request.visual_preview_mode and product == blank
    assign product = collections.all.products.first
    assign text = product.description
  endif
%}

{% render 'text', fallback_text: text, block: block %}

​
Preset Configuration

{
  "name": "Product Description",
  "category": "product",
  "settings": {
    "text": "{{ closest.product.description }}"
  }
}

​
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

{
  "blocks": [
    {
      "type": "product-title",
      "settings": {
        "type_preset": "h2",
        "width": "100%"
      }
    },
    {
      "type": "price",
      "settings": {
        "type_preset": "h4",
        "show_sale_price_first": true,
        "show_installments": true
      }
    },
    {
      "type": "product-description",
      "settings": {
        "type_preset": "paragraph",
        "width": "100%"
      }
    }
  ]
}

​
Compact Product Info

{
  "blocks": [
    {
      "type": "product-title",
      "settings": {
        "type_preset": "h5",
        "alignment": "center"
      }
    },
    {
      "type": "price",
      "settings": {
        "type_preset": "paragraph",
        "alignment": "center",
        "show_tax_info": false
      }
    }
  ]
}

​
Resource Context

Product blocks use Shopify’s closest object to access product data: 
{{ closest.product.title }}
{{ closest.product.price }}
{{ closest.product.description }}
{{ closest.product.selected_or_first_available_variant.url }}
This ensures blocks work correctly within:
  • 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

Build docs developers (and LLMs) love

Get started for freeTalk to us