Articles on: Magento 2 Pearl Theme User Guide

How to customize a page / block with Pearl Theme for Magento 2?

It’s easy to add simple customizations to pages and blocks in the Pearl Theme by inserting custom CSS and JS in the options provided for each entity.

Where breakpoints come from

Pearl lets you define responsive breakpoints that your custom CSS can target.

Path: WeltPixel → Frontend Options → Breakpoints

Set breakpoints for mobile, tablet, and large screens, then write CSS that uses those breakpoints.

Add custom CSS/JS to a CMS Page

Path: Content → Pages → [edit the desired page] → Design

Use the Custom CSS and Custom JS fields to inject your code for that specific page.

Editing a CMS page — Design tab with custom CSS/JS fields

Add custom CSS/JS to a CMS Block

Path: Content → Blocks → [edit the desired block]

Below the Magento editor, you’ll find fields for Custom CSS and Custom JS that apply only to that block.

Editing a CMS block — custom CSS/JS fields below the editor

Tips

Keep page- or block-specific CSS scoped tightly to avoid unintended side effects.
Use the Breakpoints you configured in Pearl to keep your customizations responsive.
After saving changes, clear relevant caches if updates don’t appear immediately.

Updated on: 16/09/2025

Was this article helpful?

Thank you!