modblo, modular sections, better stores
Browse

Documentation

Installing sections

Step-by-step walkthrough for adding a section to your theme.

Every modblo section is a single self-contained Liquid file. You drop it into your theme’s /sections folder, save, and add it to a template via the theme editor like any built-in section.

Prerequisites

  • A Shopify store on any plan (Basic, Shopify, Advanced, or Plus).
  • An Online Store 2.0 theme. Dawn 13+, Refresh, Sense, Origin, and most premium themes from 2022 onward all qualify.
  • Edit-code permission on your theme. The default Owner / Staff role has it; some restricted staff roles do not.

Step-by-step walkthrough

  1. 01On the section’s detail page, click Buy section (premium) or copy the Liquid directly (free). The full file appears in a code panel — copy it to your clipboard.
  2. 02In Shopify Admin, go to Online Store → Themes.
  3. 03Find your active theme, click the ... menu, then Edit code. The code editor opens.
  4. 04In the left file tree, find the Sections folder. Click Add a new section.
  5. 05Name the file. We recommend the modblo- prefix to keep modblo sections grouped together — for example modblo-sticky-add-to-cart. (Don’t include the .liquid extension; Shopify adds it.)
  6. 06Shopify creates the file with a placeholder. Select all (⌘ A on Mac, Ctrl A on Windows) and delete the placeholder, then paste the modblo code in.
  7. 07Click Save in the top right. Shopify will lint the file — if there’s a syntax error you copied incompletely, it shows up here.
  8. 08Go back to Online Store → Themes and click Customize on your active theme.
  9. 09Pick the template you want the section on (Home page, Product page, etc.) from the dropdown at the top.
  10. 10Click Add section, scroll the list — your new section appears with the name from its {% schema %} block (e.g. Sticky Add to Cart). Click to add it.
  11. 11Configure the settings in the right panel — text, colors, behavior. Then save the theme.

The modblo- prefix is optional

It just keeps modblo sections clustered together in your file tree and in the Add Section list. If you prefer a different convention, the section will work with any filename — but the "CB" in the in-editor section name comes from each section’s schema and won’t change with the filename.

Adding a section to every page

For sections that should appear site-wide (Sticky Add to Cart, Mobile Bottom Nav, Cart Drawer, Cookie Consent, Announcement Bar Pro, Predictive Search), include the section in theme.liquid instead of adding it per-template:

layout/theme.liquid

<body>
  {% sections 'header-group' %}

  {{ content_for_layout }}

  {% sections 'footer-group' %}

  {%- comment -%} Add modblo site-wide sections here, just before </body> {%- endcomment -%}
  {% section 'modblo-sticky-add-to-cart' %}
  {% section 'modblo-cart-drawer-upsell' %}
  {% section 'modblo-cookie-consent' %}
</body>

Updating a section

When we ship updates (new features, bug fixes, design refinements), the section’s detail page on modblo always shows the latest code. To update:

  1. 01Open the section’s detail page on modblo.
  2. 02Copy the new Liquid code (your section license includes lifetime updates).
  3. 03In your theme editor, open the existing modblo-{section-name}.liquid file under Sections.
  4. 04Select all, paste the new code, save. Your existing theme-editor settings (colors, text, behavior) are preserved automatically because they live on the section instance, not in the section file.

Custom edits will be overwritten

If you’ve made hand-edits inside the section file (changed CSS, renamed CSS classes, added Liquid blocks), pasting the new version will overwrite them. Keep a copy of your customizations in a separate file and re-apply after updating, or fork the section under a different name and skip updates entirely.

Removing a section

Two-step removal:

  1. 01In Customize, hover the section in the left list and click Remove. (This removes it from the template only.)
  2. 02(Optional) In Edit code → Sections, click the file and delete it. This removes the section file from your theme entirely so it no longer shows up in the Add Section list.

Next: customizing

Read Customizing for the color, typography, and class-name conventions every modblo section follows — useful when you want to override the default look.