Skip to main content

​
What are Blocks?

Blocks are reusable content components that can be added to sections in the Horizon theme. They provide the building blocks for creating flexible, customizable page layouts in Shopify’s theme editor.

​
Block Categories

​
Layout Blocks

Layout blocks help structure and organize content:
  • Card - Container block with background media, overlay, and flexible content layout
  • Accordion - Collapsible content panels with customizable rows
  • Group - Container for grouping multiple blocks together

​
Product Information Blocks

Blocks that display dynamic product data:
  • Product Title - Displays the product name with customizable typography
  • Product Description - Shows product description text
  • Product Price - Displays pricing with sale price, unit price, and installments
  • SKU - Shows product SKU information
  • Variant Picker - Allows customers to select product variants
  • Buy Buttons - Add to cart and checkout buttons

​
Media Blocks

Blocks for displaying visual content:
  • Image - Single image with aspect ratio and border controls
  • Video - Video player supporting uploaded videos and external URLs
  • Media - Unified media block for images or videos

​
Content Blocks

Blocks for text and interactive content:
  • Text - Rich text content with custom typography
  • Button - Call-to-action button with link
  • Icon - Display icon with customization options
  • Spacer - Add vertical spacing between elements

​
Common Block Features

​
Schema Settings

All blocks use Shopify’s block schema to define their configurable settings. The schema includes: 
{% schema %}
{
  "name": "Block Name",
  "tag": null,
  "settings": [...],
  "presets": [...]
}
{% endschema %}

​
Nested Blocks

Many blocks support nested child blocks through the {% content_for 'blocks' %} tag: 
<div class="parent-block">
  {% content_for 'blocks' %}
</div>

​
Shopify Attributes

Blocks use {{ block.shopify_attributes }} to enable theme editor functionality: 
<div class="block" {{ block.shopify_attributes }}>
  <!-- Block content -->
</div>

​
Accessing Block Settings

Block settings are accessed via block.settings: 
{% assign block_settings = block.settings %}

<div class="block">
  {{ block_settings.text }}
</div>

​
Best Practices

  1. Use Semantic Naming - Name blocks clearly to indicate their purpose
  2. Provide Defaults - Always set sensible default values in the schema
  3. Support Inheritance - Allow blocks to inherit color schemes from parent sections
  4. Responsive Design - Include mobile-specific settings where appropriate
  5. Accessibility - Ensure blocks generate semantic HTML with proper ARIA attributes

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us