Skip to main content

Basic Blocks

Basic blocks are the fundamental content elements in Mind. These are the blocks you use most often to build your store's pages: headings, text, buttons, icons, and small decorative or animated elements. Mind includes 13 basic blocks. Images, videos, and backgrounds have their own page, Media Blocks. Every block also shares the universal controls described in Block Settings.

Heading​

block-heading.webp

The Heading block displays a title with a word-by-word entrance animation and full typography control.

Settings:

  • Text: The heading text.
  • Tag name: Choose the HTML tag (Heading 1-6) for SEO and page hierarchy.
  • Animation: Effect (None, Slide up, Slide right, Slide down, Slide left, Rotate left up, Rotate right up, or Zoom), Order (None, Left to right, Center, or Random), and Duration.
  • Layout: Width (fit, fill, or custom) and alignment.
  • Typography: Preset or custom font, size, italic, weight, line height, letter spacing, and case.
  • Color: Text color from the color scheme or a custom color, plus opacity.
  • Padding and margin: Device-specific spacing around the heading.

Reveal heading​

block-reveal-heading.webp

The Reveal heading block displays an animated heading with a hand-drawn highlight that reveals as it enters the viewport.

Settings:

  • Text: The heading text.
  • Tag name: Choose the HTML tag (Heading 1-6).
  • Highlight: Decoration (None, Underline, Circle, Double underline, Squiggle, Marker slanted, or Marker), stroke width, decoration color, text color, and italic for the highlighted words.
  • Animation: Turn on Enable, then pick the effect, the order (left to right, center, or random), and the duration.
  • Layout: Width, alignment, and hide on mobile.
  • Typography: Preset or custom font, size, italic, weight, line height, letter spacing, and case.
  • Color: Text color, opacity, and line clamp.
  • Padding and margin: Device-specific spacing around the heading.
tip

Use Reveal heading for hero and editorial titles that need a drawn highlight. For everyday titles, the Heading block is lighter and follows your typography presets.

Text​

block-text.webp

The Text block displays rich text content with typography, hover, and animation controls.

Settings:

  • Text: Rich text editor with formatting.
  • Reveal text effect: Gradually reveals the text as it scrolls into view; set the starting Reveal text opacity.
  • Layout: Width (fit, fill, or custom), alignment, and hide on mobile.
  • Typography: Preset (default, paragraph, Heading 1-6, or custom). Custom exposes font, size, weight, line height, letter spacing, case, and wrap.
  • Color: Text color from the color scheme or a custom color, plus opacity.
  • Line clamp: Limit the text to 1-5 visible lines.
  • Hover: None, color, opacity, or underline in/out effects.
  • Animation: Global preset, custom effect and duration, or none.
  • Padding and margin: Device-specific spacing around the text.

Button​

block-button.webp

The Button block adds a call-to-action button that follows the button styles defined in Theme Settings.

Settings:

  • Text: The text shown on the button.
  • Button label and Link: The label and destination of the button.
  • Button style: Global, Primary, Secondary, Tertiary, Standard, Inverse, or Glassmorphism.
  • Size variant: Small, Medium, Large, Extra large, or Extra extra large.
  • Animation: Global preset, custom effect and duration, or none.
  • Padding: Device-specific top, bottom, left, and right padding.

Badge​

block-badge.webp

The Badge block displays a small label with an optional image, useful for "New", "Sale", or feature callouts.

Settings:

  • Image: Optional small image shown alongside the label.
  • Badge text: The label text.
  • Background color: Badge fill color.
  • Foreground color: Badge text color.

Icon​

block-icon.webp

The Icon block displays an icon from Mind's built-in icon library or your own image, optionally wrapped in a link.

Settings:

  • Icon type: Built-in icon or your own image.
  • Icon: Choose from about 100 built-in icons (arrows, cart, social networks, delivery, dark and light mode, and more).
  • Icon size, color, opacity: Size of the glyph and its color from the scheme or a custom value.
  • Image and Image (darkmode): Your own icon image, with an alternate version for dark mode.
  • Width / Height: Size of the box around the icon.
  • Link: Optional URL, with an option to open it in a new tab.
  • Hover: Hover type (none, left to right, right to left, bottom to top, or top to bottom) and Hover parent to trigger it from the parent container.
  • Appearance: Color scheme, background (color, gradient, or image with overlay), corner radius, and border.
  • Animation: Global preset, custom effect and duration, or none.

block-breadcrumb.webp

The Breadcrumb block renders the current page's breadcrumb trail (Home > Collection > Product) so you can place it inside any section.

Settings:

  • Alignment: Left, center, or right.
  • Typography: Preset or custom font, size, italic, weight, line height, letter spacing, case, and wrap.
  • Color: Text color from the scheme or a custom color, plus opacity.
  • Line clamp: Limit the trail to a number of lines.
  • Animation: Global preset, custom effect and duration, or none.

Divider​

block-divider.webp

The Divider block adds a horizontal or vertical line between content, optionally with a short label.

Settings:

  • Type: Horizontal or Vertical.
  • Width: Line length as a percentage of the container, for a horizontal divider.
  • Height: Line length in pixels, for a vertical divider.
  • Text: Optional label displayed on the line. Leave it empty for a plain line.
  • Typography: Preset or custom font, size, italic, weight, and color for the label.
  • Border: None, Solid, or Gradient, with width, color, opacity, and a Border gradient editor.
  • Animation: Global preset, custom effect and duration, or none.

Shape​

block-shape.webp

The Shape block draws a decorative organic shape, such as a blob, hills, or waves, that you can place freely behind or beside other content.

Settings:

  • Shape type: Blob wide, Blob tall, Pebble, Blob pointed, Blob angular, Hills, Hills wide, Hills panorama, Blob round, Waves, Grid sketch, or Cloud.
  • Shape color, opacity: Fill from the color scheme or a custom color.
  • Size: Width (fit or fill), height (fit, fill, or custom), and max width for desktop and mobile.
  • Position: Turn on Absolute to pin the shape to a corner (top left, top right, bottom right, or bottom left) with top, bottom, left, and right offsets and a Rotate angle per device.
  • Layer order: Higher values bring the shape in front of other elements; negative values push it behind.
  • Animation: Global preset, custom effect and duration, or none.

Marquee​

block-marquee.webp

The Marquee block scrolls a continuous row of Text, Icon, and Image blocks across the page.

Settings:

  • Direction: Forward or Backward.
  • Alignment: Align the items to the top, middle, or bottom of the row.
  • Pause on hover: Stop the movement while the visitor hovers over it.
  • Sync with page scroll: Tie the marquee movement to the page scroll.
  • Speed: Scroll speed from 1 to 10.
  • Item spacing desktop / mobile: Space between items, from 5 to 50 px.
  • Appearance: Color scheme, background (none, color, or gradient), corner radius, and border.
  • Child blocks: Text, Icon, and Image blocks. The preset starts with one Text block.

Count to​

block-countto.webp

The Count to block animates a number counting from a start value to an end value, ideal for statistics such as "1,000+ customers".

Settings:

  • Start value and End value: The numbers the counter runs between.
  • Duration (ms): How long the count takes.
  • Time delay (ms): Wait before the count starts.
  • Suffix text: Text after the number, such as "+" or "%".
  • Typography: Preset or custom font, size, italic, weight, line height, letter spacing, case, wrap, and color.

Circle bar​

block-circle-bar.webp

The Circle bar block displays an animated circular progress ring filled to a percentage.

Settings:

  • Circle value: The fill percentage, from 0 to 100.
  • Animation duration (ms): How long the ring takes to fill.
  • Stroke width (px): Thickness of the ring.
  • Size (px): Diameter of the circle.
  • Track color: Color of the empty part of the ring.
  • Thumb color: Color of the filled part.
tip

Pair a Circle bar with a Count to block and a Text label inside a Group to build an animated statistic.

Custom liquid​

block-custom-liquid.webp

The Custom liquid block renders your own Liquid or HTML code anywhere a block is allowed.

Settings:

  • Custom liquid: Add app snippets or other code to create advanced customizations.
caution

Code entered here is rendered as-is. Test changes in an unpublished copy of the theme before publishing.

Combining basic blocks

Basic blocks are meant to be stacked inside the container blocks described in Layout Blocks. A typical card is a Group containing an Image, a Heading, a Text paragraph, and a Button.