Skip to main content

Basic Blocks

Basic blocks are the fundamental content elements in Ronin. These are the blocks you use most often to build your store's pages: text, images, video, icons, buttons, and small utility elements. Ronin includes 14 basic blocks. Every block also shares the universal controls described in Block Settings.

Text​

The Text block displays rich text content with typography, hover, and animation controls. It doubles as a heading block: pick the Text: Heading preset or set the typography preset to a heading level to turn it into a title.

block-text.webp

Presets:

  • Text: A paragraph of body copy.
  • Text: Heading: An H2 heading with the Heading 2 typography preset.

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, italic, 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.

Reveal Heading​

The Reveal Heading block displays an animated heading with a decorative highlight that reveals as it enters the viewport.

block-heading.webp

Settings:

  • Text: The heading text.
  • Tag name: Choose the HTML tag (Heading 1-6) for SEO and page hierarchy.
  • Highlight: Decoration (none or six drawn styles), stroke width, decoration color, text color, and italic for the highlighted words.
  • Animation: Enable the reveal, pick an effect (slide up, right, down, or left, rotate left or right up, or zoom), 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.
tip

Use Reveal Heading for hero and editorial titles that need motion and a highlight. For everyday headings, the Text: Heading preset of the Text block is lighter and inherits your typography presets.

Image​

The Image block displays an image with size, aspect ratio, border, and animation controls.

block-image.webp

Settings:

  • Image: Select an image from your store's library.
  • Enter the URL: Optional link wrapping the image, with an option to open it in a new tab.
  • Show on: Display on all devices, desktop only, or mobile only.
  • Size: Aspect ratio (auto, 9:16, 3:4, 1:1, 4:3, 16:9, or a custom width/height ratio), width (fit or fill), height (fit, fill, or custom), and an optional max width. Mobile can inherit the desktop values or use its own.
  • Borders: Border style, width, color, opacity, and corner radius.
  • Animation: Global preset, custom effect and duration, or none. The default preset uses a zoom-out.

Video​

The Video block embeds a Shopify-hosted video or a YouTube/Vimeo video from a URL.

block-video.webp

Settings:

  • Autoplay: Start playback automatically.
  • Enable video looping: Repeat the video when it ends.
  • Shopify-hosted video: Pick a video uploaded to your store's files.
  • Or embed video from URL: Paste a YouTube or Vimeo URL instead.
  • Cover image: Thumbnail displayed before the video plays.
  • Video alt text: Description for customers using screen readers.

Icon​

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

block-icon.webp

Settings:

  • Icon type: Built-in icon or your own image.
  • Icon: Choose from over 100 built-in icons (arrows, cart, social, shipping, and more).
  • Icon style: Custom (full appearance controls) or Style 1 (a preset box with its own background color).
  • Icon size, color, opacity: Size of the glyph and its color from the scheme or a custom value.
  • Width / Height: Size of the box around the icon.
  • Link: Optional URL, with an option to open it in a new tab.
  • Appearance: Color scheme, background (none, color, gradient, or image with overlay), corner radius, and border.
  • Animation: Global preset, custom effect and duration, or none.

Button​

The Button block creates a clickable button that follows the button styles defined in Theme Settings.

block-button.webp

Settings:

  • Button label: The button text.
  • Button style: Solid, Outline, Underline, Ghost, Solid primary, Solid secondary, Solid tertiary, or Link.
  • Button size: Small, medium, or large.
  • Enter the URL: The destination link.
  • Open the link in a new tab: Open the destination in a new browser tab.

Badge​

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

block-badge.webp

Settings:

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

Divider​

The Divider block adds a horizontal line between content, optionally with a short label in the middle.

block-divider.webp

Settings:

  • Text: Optional label displayed on the line. Leave it empty for a plain line.
  • Divider width: Line width as a percentage of the container.
  • Divider weight: Line thickness.
  • Divider style: Solid or dashed.
  • Animation: Global preset, custom effect and duration, or none.

Spacer​

The Spacer block adds empty space between blocks, vertically or horizontally.

block-space.webp

Settings:

  • Direction: Vertical (adds height) or horizontal (adds width inside a row layout).
  • Desktop size (px): Space on desktop screens.
  • Mobile size (px): Space on mobile screens.

Custom liquid​

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

block-custom-liquid.webp

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.

Text with image​

The Text with image block displays rich text with small inline images placed wherever you type an [img] token; each token is replaced, in order, by one of the block's Image children.

block-text-with-image.webp

Settings:

  • Text: Rich text with [img] placeholders marking where the images go.
  • Link: Optional URL wrapping the text, with an option to open it in a new tab.
  • Reveal text effect: Gradually reveals the text as it scrolls into view, with a starting opacity.
  • Layout: Width, alignment, and hide on mobile.
  • Typography: Preset or custom font, size, italic, weight, line height, letter spacing, case, and wrap, plus color, opacity, and line clamp.
  • Hover: None, color, opacity, or underline in/out effects.
  • Animation: Global preset, custom effect and duration, or none.
  • Child blocks: Image blocks (below) and app blocks.

Image​

The Image child block is a small inline picture that fills one [img] token in the parent text. You add it from inside the Text with image block only.

block-image-2.webp

Settings:

  • Image: Select an image from your store's library.
  • Enter the URL: Optional link, with an option to open it in a new tab.
  • Size: Desktop and mobile width and height; mobile can inherit the desktop values.
  • Borders: Border style, width, color, opacity, and corner radius.
  • Margin: Top and bottom margin per device.

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

block-breadcrumb.webp

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.

The Logo block displays the store logo configured in Theme settings > Logo and favicon, sized for desktop and mobile.

block-logo-basic.webp

Settings:

  • Show on: Display on all devices, desktop only, or mobile only.
  • Logo type: Default or inverse logo (useful on dark backgrounds).
  • Size: Desktop and mobile width. Turn on Height to set a fixed desktop and mobile height. Leave the mobile values empty to inherit the desktop ones.
  • Appearance: Background (none, color, or gradient), corner radius, and border.

Social media​

The Social media block displays a row of social network icons linking to your profiles.

block-social-media.webp

Settings:

  • Preset: Global uses the links from Theme settings > Social media; Custom lets you enter links for this block only.
  • Network links: X (Twitter), Facebook, Pinterest, Instagram, TikTok, Tumblr, Snapchat, YouTube, and Vimeo. Empty links are hidden.
  • Icon size, color, opacity: Size and color of the icons.
  • Width / Height: Size of the box around each icon.
  • Appearance: Color scheme, background (none, color, or gradient), corner radius, and border.
  • Animation: Global preset, custom effect and duration, or none.
Editorial banner

The Editorial banner block is not a standalone basic block. It is a child block available only inside the Main collection section, where it inserts a promotional card into the product grid. See Page Templates for the collection template that uses it. Its settings:

  • Layout: Split (image and panel) or Overlay (text on image).
  • Grid columns: How many product columns the banner spans (1 or 2).
  • Image, Overline, Heading, and Intro: The banner content.
  • Accent the italic word: Tints the italic word in the heading with your primary color.
  • Highlight style: Box, Highlighter, or Underline, applied to a word wrapped in [square brackets] in the heading.
  • Heading size and Alignment: Size (extra small to extra extra large) and alignment of the text.
  • Link and Button label: Where the banner links and the button text.
  • Color scheme: Panel colors for the split layout, or text color for the overlay layout.
  • Insert before product number: Where the banner appears in the product grid.
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 Text heading, a Text paragraph, and a Button.