Customize default_pagination number styling in Shopify

user_19137162 0
Viewed 80

I am trying to customize the numbers for the default_pagination filter. I need to show a box around the numbers. So for this, I need to create a custom class for the numbers, and change the style in CSS. But I can't figure out how to do it. A bit of help will be much appreciated.

This is my code:

<div class="container">
    {% paginate collection.products by 5 %}
        {% for product in collection.products %}
            <a href="{{ product.url }}"><img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
                <figcaption>{{ product.title }} 
                    {% if product.compare_at_price_max > 0 %}
                        <span>{{ product.compare_at_price_max | money }}</span>
                        <span>{{ product.price | money }}</span>
                    {% else %} 
                        <span>{{ product.price | money }}</span>
                    {% endif %}
                </figcaption>
            </a>
        {% endfor %}
    {{ paginate | default_pagination: next: '>', previous: '<' }}   
   {% endpaginate %}
</div>
shopify liquid css pagination html
1 Answers

Instead of using Shopify Liquid's default_pagination filter which creates a boilerplate pagination component for you, you can create a fully customizable pagination like this:

<nav class="Pagination">
  <ul class="Pagination__List">
    {%- if paginate.previous -%}
      <li>
        <a
          class="Pagination__Item Pagination__Item--Next" 
          href="{{ paginate.previous.url }}"
          >
          Next Page
        </a>
      </li>
    {%- endif -%}

    {%- for part in paginate.parts -%}
      <li>
        {%- if part.is_link -%}
          <a
            class="Pagination__Item"
            href="{{ part.url }}"
            >
            {{ part.title }}
          </a>
        {%- else -%}
          {%- if part.title == paginate.current_page -%}
            <span class="Pagination__Item Pagination__Item--Current">{{ part.title }}</span>
          {%- else -%}
            <span class="Pagination__Item">{{ part.title }}</span>
          {%- endif -%}
        {%- endif -%}
      </li>
    {%- endfor -%}

    {%- if paginate.next -%}
      <li>
        <a
          class="Pagination__Item Pagination__Item--Prev"
          href="{{ paginate.next.url }}"
          >
          Previous Page
        </a>
      </li>
    {%- endif -%}
  </ul>
</nav>

Check out the Liquid paginate object for more information.

Styling it the way you want should be quite easy then. Comment if you need help with that. I'm happy to help :)

user_187945370
Related