Changing the Product List Controls

Design > Themes Editor > Customize > CSS Editor > Custom CSS

You can apply CSS to remove or make some changes to this field.


To remove the Pager or Sorter rows, do the following.

  1. From the Admin Panel, select Design>Theme Editor
  2. Click [Customize] button on your Current Theme
  3. Select CSS Editor on the left column
  4. In Edit custom.css field, add the following css code

To remove the pager row block:

.pager { display: none; }

To remove the sorter row block:

.sorter{ display: none; }

To change location of Items (# ITEM(S)) and Show # PER PAGE, you can use some css tricks to switch their location. To move Items to left and Show to the right, follow above steps and paste the code below.

.pager .amount { float: right; }
.pager .limiter { float: left; }
.sorter .view-mode { float: right; }

You can find the css class or id name of all items on any page by using your browser's developer tool option if available. For example, you can point your mouse on any item on the page when using Google Chrome by right clicking and selecting "Inspect Element" in the menu list. A window will expand at bottom of your browser and will show the browser's source code where you can find all the relevant css class or id names.


RSS: New Article posts

Explore the Knowledge Base