Category page layout is a page containing product list, category details, and product list actions

<aside> ℹ️ Usually, styling this element takes from-to: 3-5h

</aside>

Where this element can be seen?

Element is visible on all Category Pages.

How should this element be designed?

categoryy.png

<aside> ➡️ If designs have a layout switcher, both layout variants should be represented.

</aside>

Design example #1

Design example #2

How to develop styles for this element?

Theme the CategoryPage route.

Mainly only element placement and gaps between elements have to be adjusted in scope of this ticket.

These elements includes the breadcrumbs. The breadcrumbs are already styled by another ticket, so just check their placement and display. Also, check if it is necessary to add breadcrumbs to the mobile page. By default, the category page breadcrumbs are hidden on mobile.

<aside> ➡️ Additionally, adjustments for smaller elements may be needed.

</aside>

To style a component, override its .style.scss file. You can also customize how it is rendered by overriding the .component.js file.

How to override JavaScript classes?

How to override styles?

Implementation example #1

Implementation example #2