Customizing

Every modblo section follows the same conventions for class naming, color tokens, and theme-editor settings. Once you know the pattern, you can customize any section in seconds.

CSS class naming

All section CSS classes are prefixed modblo- followed by a short section abbreviation, then the BEM-style modifier. This keeps the CSS scoped and prevents collisions with your theme.

.modblo-vp           /* Variant Picker root */
.modblo-vp__row      /* Element inside the root */
.modblo-vp__opt      /* Another element */
.modblo-vp__opt.is-selected   /* State modifier */

.modblo-cdu          /* Cart Drawer Upsell root */
.modblo-cdu__panel
.modblo-cdu__bar-fill

.modblo-ann          /* Announcement Bar Pro root */
.modblo-ann__msg
.modblo-ann__msg.is-active

To override a section’s look without forking it, target these classes from your theme’s theme.scss.liquid or base.css:

/* Override the cart drawer panel width */
.modblo-cdu__panel {
  width: min(520px, 100%);  /* default is 440px */
}

/* Make all section buttons use your brand font */
[class^="modblo-"] button {
  font-family: var(--font-heading);
}

Color tokens

Every section exposes its color settings via CSS custom properties on the section root. These come from the theme-editor color settings and cascade into every nested element. The pattern looks like this in the Liquid template:

<section class="modblo-vp"
  style="--modblo-vp-bg: {{ section.settings.bg }};
         --modblo-vp-fg: {{ section.settings.fg }};
         --modblo-vp-accent: {{ section.settings.accent }};">
  ...
</section>

The standard token names are:

• --modblo-{prefix}-bg — section background color.
• --modblo-{prefix}-fg — primary text and icon color.
• --modblo-{prefix}-accent — primary CTA / link / active color (the brand accent).
• Section-specific tokens (e.g. --modblo-cdu-bar for the cart drawer’s free-shipping bar color, --modblo-rv-star for the reviews-display star color) — documented in each section’s settings panel.

Overriding colors globally

The theme-editor color settings are the easiest way to customize per section. If you want to enforce one accent color across every modblo section without touching each one in the editor, set a CSS custom property at the root and let it cascade:

:root {
  --modblo-vp-accent: #ff6b35;
  --modblo-cdu-accent: #ff6b35;
  --modblo-ann-accent: #ff6b35;
  --modblo-pop-accent: #ff6b35;
  /* ...etc, one per section prefix */
}

Typography

Sections inherit your theme’s body font. Headings use letter-spacing: -0.02em and font-weight 600 by default, which works with most modern theme stacks. To override:

[class^="modblo-"] h1,
[class^="modblo-"] h2,
[class^="modblo-"] h3 {
  font-family: var(--font-heading, "Your Brand Font"), sans-serif;
  letter-spacing: -0.025em;
}

Theme editor settings

Every premium section exposes its main configurables in the theme editor — colors, headings, behavior toggles. Each section’s detail page on modblo lists every setting in a table.

Some sections also use theme blocks for repeating content (questions in the Quiz, retailers in the Store Locator, notifications in the Social Proof Feed). You add those in the editor with Add block on the section.

Forking a section for heavy edits

If you want to make changes that go beyond the editor settings (custom layout, extra fields, different markup), the cleanest approach is to fork the section under a new name:

• In Edit code → Sections, create a new file (e.g. my-sticky-add-to-cart.liquid).
• Copy the original modblo code, then change the class prefix from modblo-satc- to something unique like my-satc- so future modblo updates don’t override your version.
• Edit freely. Skip future updates of the original section since you now own a custom version.

Next: JavaScript events

Many sections dispatch and listen for custom events (cart updates, consent changes, wishlist updates). Read JavaScript events if you want to wire your own scripts into the modblo ecosystem.