Articles on: Magento 2 Pearl Theme User Guide

How to customize category pages with Pearl Theme for Magento 2 ?

You can customize individual category pages in the Pearl Theme by adding CSS and JS directly from the Magento Admin. Pearl introduces dedicated fields so you can target a single category without editing theme files.

Configure Global Breakpoints and CSS

Set your responsive breakpoints in:

WeltPixel → Pearl Theme Options → Frontend Options → Breakpoints

Define breakpoints for mobile, tablet, and large screens.
Use Custom Global CSS to apply CSS site-wide, regardless of screen size.

Add Category-Specific CSS/JS

Go to:

Products → Categories → [your category] → WeltPixel Options

Insert Custom CSS for this category only.
Insert Custom JS for this category only.
Combine with your breakpoint setup to tailor styles per device.

Tip: Add only the selectors and declarations needed for this category page.

Additional Category Page Options (WeltPixel Options)

Hide Page Title — Remove the category page H1.
Hide Breadcrumbs — Hide the breadcrumb trail on this category.
Custom Link — Define a link for the category tile:
Use http://yourcustomlink.com for an external link.
Use /yourpage.com to create a dynamic internal link (relative to base URL).
Use # to disable the link.
Open in New Tab — Set to Yes to open the custom link in a new tab.
Exclude from Sitemap — Set to Yes to exclude this category from the XML sitemap.

Workflow Summary

Configure breakpoints and global CSS in Pearl Theme Options.
Open the target category and add category-specific CSS/JS in WeltPixel Options.
Adjust page-level options (hide title/breadcrumbs, custom link, sitemap exclusion) as needed.
Save and clear relevant caches (Regenerate Pearl Theme CSS, Flush Magento Cache, and Browser Cache if needed) to apply changes.

Updated on: 16/09/2025

Was this article helpful?

Thank you!