I am new to Magento 2.1.7. following set to create the category product listing page.

  1. Create the Root category and sub category In display setting Anchor value is Yes.
  2. Than create the product attribute and assign to attribute set.In the each attribute I give the following options:

Use in Filter Options value is Yes.
Use in Search value is Yes.
Use in Layered Navigation value is Filterable (with results).
Use in Search Results Layered Navigation value is Yes.
Visible on Catalog Pages on Storefront value is Yes.
Used in Product Listing value is Yes.
Used for Sorting in Product Listing value is Yes.

  1. Create the configurable product with select the option attribute set.
  2. Then create the page to list the products.In that page

Design -> Layout is 2 columns with left bar
Design -> Layout Update XML

<referenceContainer name="sidebar.main">
<block class="Magento\LayeredNavigation\Block\Navigation\Category" name="catalog.leftnav" before="-" template="layer/view.phtml">
<block class="Magento\LayeredNavigation\Block\Navigation\State" name="catalog.navigation.state" as="state" />
<block class="Magento\LayeredNavigation\Block\Navigation\FilterRenderer" name="catalog.navigation.renderer" as="renderer" template="layer/filter.phtml"/>
<referenceContainer name="content">
<block class="Magento\Catalog\Block\Product\ListProduct" name="category.products.list" as="product_list" template="Magento_Catalog::product/list.phtml">
<container name="category.product.list.additional" as="additional" />
<block class="Magento\Framework\View\Element\RendererList" name="category.product.type.details.renderers" as="details.renderers">
<block class="Magento\Framework\View\Element\Template" as="default"/>
<block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="category.product.addto" as="addto">
<block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare"
 name="category.product.addto.compare" as="compare"
<block class="Magento\Catalog\Block\Product\ProductList\Toolbar" name="product_list_toolbar" template="Magento_Catalog::product/list/toolbar.phtml">
<block class="Magento\Theme\Block\Html\Pager" name="product_list_toolbar_pager"/>
<action method="setToolbarBlockName">
<argument name="name" xsi:type="string">product_list_toolbar</argument>
  1. For Price Filter

    Stores -> Configuration -> Catalog -> Layered Navigation

Display Product Count value is yes
Price Navigation Step Calculation value is Manual
Default Price Navigation Step value is 0.5.
Maximum Number of Price Intervals value is 2

I have followed the all steps but the color swatch and price filter are not showing.In Product details page color swatch is showing.
Anyone helps me.

1 Answer 1


Color swatch not loading in the custom page which you have created, it may be css issue.

The basic swatch css should be loaded to display the swatch in the left navigation.



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.