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 file. You drop it into your theme’s /sections folder, save, and add it to a template in the theme editor like any built-in section.

Before you start

  • A Shopify store on any plan (Basic, Shopify, Advanced, or Plus).
  • A modern Shopify theme (technically: any Online Store 2.0 theme). Dawn 13 or higher, Refresh, Sense, Origin, and most premium themes from 2022 onward all qualify.
  • Permission to edit theme code. The default Owner and Staff role have 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 code 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 check the file. If there’s a syntax error from an incomplete copy, 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, and so on) from the dropdown at the top.
  10. 10Click Add section and scroll the list. Your new section appears with the name from its settings (for example, Sticky Add to Cart). Click to add it.
  11. 11Change 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. The in-editor name (visible when you click Add Section in the theme editor) is set inside the section file itself 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 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. 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.