modblo, modular sections, better stores
Browse

Documentation

Installing blocks

How to paste a block into Shopify's Custom Liquid section.

Blocks are smaller building pieces (newsletter signups, stat counters, CTA banners, social icons). They install via Shopify’s built-in Custom Liquid section — no code editor required, no theme files to touch.

When to use a block vs. a section

  • Use a block when you want a small drop-in piece (highlight banner, social icons, spec table, countdown timer) without touching theme code.
  • Use a section when you want full layout control, theme-editor settings, and the section to appear in the Add Section list permanently. Sections are also required for anything site-wide (sticky cart, mobile nav, cookie consent).

Step-by-step walkthrough

  1. 01On the block’s detail page, click Buy block (premium) or copy the code directly (free). Each block ships as a single self-contained snippet of HTML, CSS, and (sometimes) JavaScript.
  2. 02In Shopify Admin, go to Online Store → Themes and click Customize on your active theme.
  3. 03Pick the template where you want the block (Home page, About page, Product page, etc.) from the dropdown at the top.
  4. 04Click Add section. In the section list, scroll to find Custom Liquid (it’s built into every Online Store 2.0 theme).
  5. 05Add the Custom Liquid section. The right panel shows a single big textarea labeled Liquid.
  6. 06Paste the modblo block code into that textarea. Click Save.
  7. 07The block renders immediately in the preview. To customize text or colors, edit the code right in the textarea — every block has {% comment %} EDIT {% endcomment %} markers showing the spots you can safely change.

Custom Liquid is just an HTML container

Anything you put in the Custom Liquid textarea is rendered as-is at that point in the page. modblo blocks ship with their own scoped CSS classes (prefixed .modblo-) so they don’t collide with your theme’s styles.

Adding multiple blocks to the same page

You can add as many Custom Liquid sections as you want to a template, each with a different block. They’re reorderable in the theme editor like any other section. The class prefixes (.modblo-cta, .modblo-stat, .modblo-soc, etc.) keep their styles from interfering with each other.

Editing block content

Every block has marker comments showing the safe edit points:

  • {% comment %} EDIT heading {% endcomment %} — change the headline text.
  • {% comment %} EDIT colors {% endcomment %} — change CSS color values.
  • {% comment %} EDIT each row {% endcomment %} — duplicate or remove repeating elements (table rows, feature cells, stats).

Just edit the literal text or color value next to the comment, save, and the change is live.

Updating a block

When we ship updates, the block’s detail page shows the latest version. To update:

  1. 01Open the block’s detail page on modblo.
  2. 02Copy the new code.
  3. 03In Customize, click your existing Custom Liquid section to open it, select all in the textarea, paste the new code.
  4. 04Re-apply any text/color edits you made — Custom Liquid blocks store edits in the code itself, so updating overwrites them.

Heavily-edited blocks are easier to fork

If you’ve made significant edits, copy your customized version somewhere safe (a Notes file or a Liquid file in your theme) and skip future updates. Or fork the block by giving your customized version a different class prefix and treat it as your own.

Next: customizing

Read Customizing for the color and typography conventions, or jump to Troubleshooting if something doesn’t render the way you expected.