> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weltpixel.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](https://storage.crisp.chat/users/helpdesk/website/-/1/d/c/e/1dcea5dedf475100/5e9071d1-8117-47c5-8040-755e29_1lytz55.png)

---

## 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](https://storage.crisp.chat/users/helpdesk/website/-/b/b/9/c/bb9cb7b837b30800/807174aa-9dd5-430f-ba00-3041ce_rq5jmy.png)

---

## 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.