How can I remove pagination and add circular categories in Dawn Theme store?

Store Design

Topic summary

Issue 1: Removing Pagination

The user wants to eliminate pagination across their Dawn theme store and enable infinite scrolling instead. Multiple solutions were attempted:

  • CSS approach: Adding display:none rules to base.css for pagination elements, but this truncated pages and prevented all products from loading
  • Liquid file modification: Removing specific pagination code lines from main-list-collections.liquid (deleting {%- paginate %}, {% render 'pagination' %}, and {%- endpaginate -%} tags)
  • Settings adjustment: Modifying main-collection-product-grid.liquid around line 199 to change the products_per_page range parameters (increasing max from 500 to 1000, adjusting min/step values accordingly)

The liquid file approach reportedly resolved the issue for one user.

Issue 2: Circular Category List

The user wants to implement circular category icons on the homepage, but no solutions were provided for this request.

Open Question

One participant asked how to remove pagination from only a specific collection rather than site-wide, which remains unanswered.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

My Store link: https://alancartonline.myshopify.com/ , Please help me to resolve 2 issues

Issue 1 : I need to remove pagination option (view all ) across website and enable infinity scrolling

Issue 2: I need to implement circular categories list on home page.

Screenshots attached.

2

@Alancart
add below css into base.css file(online store->themes->assets->base.css)

a#ViewAllButton-template--16820368605493__2e5d404c-af17-41ee-bd1e-0d397de81100 {
    display: none !important;
}
.center.collection-list-view-all.small-hide.medium-hide {
    display: none !important;
}
.center.collection__view-all {
    display: none !important;
}
3

Still pagination is visible on collection pages : https://alancart.com/collections/women

There is a 1,2,3 button at the end of the page and I need infinity scrolling option.

Screenshot 2023-01-02 165546.png
Screenshot 2023-01-02 165546.png1715×401 22.8 KB

4

@Alancart
can you put below css also

.pagination-wrapper {
    display: none !important;
}

in base.css file

5

This option is truncating page 2 and 3 an d other pages, not loading all products.

6

Hi Alan, Try adding this code to the bottom of component-slideshow.css

.slideshow__controls.slider-buttons.no-js-hidden { display:none; }

7

@Alancart i think you need to remove pagination code into main-collection-product-grid.liquid file .

8

Not working, same issue.

9

Hi @Alancart ,

I had the same issue and couldn’t find a solution on the internet.

So I tried solving with my own common sense and programming knowledge.

Here’s how you do it:

  • Got Edit Code from your dawn theme
  • And the file “main-list-collections.liquid”
  • Search for the following lines of codes:
{%- paginate collections by paginate_by -%}
  
      {%- for collection in collections -%}
          ...
     {%- endfor -%}
   

    {% render 'pagination', paginate: paginate %}
{%- endpaginate -%}​
  • and only remove/delete the following lines:
{%- paginate collections by paginate_by -%}
    ...
    {% render 'pagination', paginate: paginate %}
{%- endpaginate -%}​

It solved my problem, hope it does same for you.

10

I found this to be easier

look for the section file “main-collection-product-grid.liquid”

Scroll to about line 199 where you will see this:

"name": "t:sections.main-collection-product-grid.name",
  "class": "section",
  "settings": [
    {
      "type": "range",
      "id": "products_per_page",
      "min": 25,
      "max": 500,
      "step": 25,
      "default": 25,
      "label": "t:sections.main-collection-product-grid.settings.products_per_page.label"
    },

then change the following parameters to what you want for example

Max: 1000

Min: 100

Step: 100

Default: 1000

  • Note: the STEP and MIN values must be multiples of the MAX value. My rule of thumb is the MIN/STEP values is the MAX value divided by 10.
11

Would you by chance know how to approach this if you only wanted to remove pagination from a specific collection?