Rich text - Basic

The Rich Text block is a versatile tool designed to enhance your theme by allowing you to add and format text content across various sections. It supports basic text formatting, color customization, and visibility settings, making it adaptable to different design needs. With options for text size, color, and background customization, the Rich Text block ensures your content is both visually appealing and accessible.

This block is available in sections such as Featured Product, Footer Navigation, Product Information, Logo List, and Hero. It allows you to provide detailed descriptions, add additional information or links, enhance product pages, and deliver impactful messages or calls to action. The Rich Text block is optimized for responsive design, ensuring readability across devices, and it supports accessibility standards by allowing for sufficient text color contrast.

Overview #

The Rich Text block is designed to allow users to add and format text content within various sections of a theme. It supports basic text formatting, color customization, and visibility settings, making it versatile for different design needs.

Key components and functionality #

Content

This setting allows you to add and format text content using a rich text editor. You can include links and apply basic formatting such as bold and italic to enhance the text's appearance.

• Default content: "

  Add relevant text content with the richtext editor. Note that you can also include <a href="#">links and basic formatting in this content, e.g. bold and italic.

  "

Text size

This setting lets you choose the size of the text within the block. It offers several options to fit different design requirements.

• Options:
  1. Small
  2. Medium (default)
  3. Large
  4. Extra large

Text color

This setting allows you to customize the color of the text, enabling you to match the block's appearance with your theme's color scheme.

Background color

This setting lets you set a background color for the block, providing a way to highlight or differentiate the text area from other content.

Background gradient

This setting allows you to apply a gradient background to the block, adding a dynamic visual effect.

Alignment settings

These settings control the horizontal alignment of text within the block for both desktop and mobile views, ensuring optimal readability across devices.

Visibility

This setting determines the block's visibility on different devices, allowing you to hide or show the block on desktop or mobile as needed.

• Options:
  1. Do not hide (default)
  2. Hide on desktop
  3. Hide on mobile

Available in sections #

• Featured product
• Footer navigation
• Product information
• Logo list
• Hero

Usage notes #

• Responsive design: Ensure text size and alignment settings are optimized for both desktop and mobile views to maintain readability.
• Performance: Use background colors and gradients judiciously to avoid impacting page load times.
• Accessibility: Ensure text color contrasts sufficiently with the background to meet accessibility standards.

Usage examples #

1. Featured product section: Use the Rich Text block to provide detailed descriptions or promotional content for a featured product.
2. Footer navigation: Add a Rich Text block to include additional information or links in the footer area.
3. Product information: Enhance product pages with rich text descriptions or specifications.
4. Logo list: Use the Rich Text block to add context or descriptions to a list of logos.
5. Hero section: Incorporate a Rich Text block to deliver impactful messages or calls to action at the top of a page.