Blog Posts

Blog Post (Article Detail Page)

The Blog Post template controls how individual blog articles are displayed.

This is the detailed article view that opens when a visitor clicks on a post from the blog list.

The layout is built using block-based content, allowing flexible composition of article elements.

Currently, this template supports two block types.

Available Blocks

1. Blog Banner

The Blog Banner block displays a large visual header at the top of the article.

It is typically used to highlight the article title and provide a strong visual introduction.

Features:

• Choose the banner background source:
  • Article Featured Image
  • Custom Image
  • Background Color

• Optional image overlay with adjustable color and opacity

  Customizable text color for better contrast

  Text alignment control (left, center, right)

  Flexible heading source:

  • Article Title

  • Custom Text

    Flexible description source:

  • Article Content
  • Custom Text

This block is ideal for creating a strong first impression and setting the tone of the article.

2. Blog Image with Text

The Blog Image with Text block displays the main article content alongside a featured image.

Features:

• Image position control:
  • Left
  • Right
• Displays the article featured image
• Renders the full article content (rich text, headings, lists, links, etc.)
• Automatically adapts to long-form content
• Responsive layout optimized for desktop and mobile

This block is designed for reading comfort and works well for detailed blog posts, tutorials, or editorial content.

Related Products (Optional)

Below the article content, a Related Products block can be displayed.

This block dynamically loads products related to the article content and helps drive product discovery from blog posts.

If no related products are found, the block is automatically hidden to maintain a clean layout.

Best Practices

• Use Blog Banner as the first block for visual impact.
• Follow with Blog Image with Text to present the full article content.
• Keep banner text concise for better readability.
• Use overlays when placing text over images to ensure sufficient contrast.