How can I customize my pagination design?

Technical Q&A
,

Topic summary

Goal: Style blog pagination so the current page number appears black while other pages are gray.

Context: Shopify/Liquid pagination for a blog, with a preview link and a reference image illustrating the desired active state. HTML/Liquid code generates previous/next arrows and a numbered page list; CSS currently handles an underline hover effect but not active/gray coloring.

Details:

  • total_pages computed, pages rendered via a for-loop linking to /pageN.
  • Previous/next links use paginate.previous.url and paginate.next.url.
  • Conditions check $currentPage for disabling/enabling arrows; current page highlighting logic is not implemented.
  • CSS defines .underline and hover behavior; an .active class is present but not applied for color changes.

Request: Assistance with code to make the current page black and non-current pages gray.

Assets: A screenshot (pagination_active.png) is provided to show the intended design.

Status: No responses or solution yet; request remains open.

Summarized with AI on January 16. AI used: gpt-5.
1

Hi I am working on this pagination.

https://u20fo1fsqriynysh-57309069474.shopifypreview.com/blogs/news

Could anyone help me with the code to apply the following?

  • The current page is black and the others are gray.

pagination_active.png

 {% assign total_pages = blog.articles.size | divided_by: articles_per_page | plus: 1 %}
                  {% if total_pages > 1 %}
                    <nav aria-label="Page navigation example">
                      <ul class="list-style-none flex justify-center mt-10">
                        {%- if $currentPage > 1 -%}
                          <li>
                            <a class="relative block rounded px-4 transition-all duration-300 transform rotate-180" href="{{ paginate.previous.url }}"
                              aria-label="Previous">
                              <img class="rotate-180 w-4/5 opacity-25 hover:opacity-100" src="{{ 'arrow.svg' | file_url }}" alt="前のボタン">
                            </a>
                          </li>
                        {%- else -%}
                          <li class="disabled">
                            <a class="relative block rounded px-4 transition-all duration-300" href="{{ paginate.previous.url }}" aria-label="Previous">
                              <img class="rotate-180 w-4/5 opacity-25 hover:opacity-100" src="{{ 'arrow.svg' | file_url }}" alt="前のボタン">
                            </a>
                          </li>
                        {%- endif -%}
                        {% for page in (1..total_pages) %}
                          <li>
                            <a class="relative block rounded mx-4 text-lg transition-all duration-300 underline"
                              href="{{ blog.url }}{{ '/page' }}{{ page == 1 ? '' : page }}">{{ page }}</a>
                          </li>
                        {% endfor %}
                        {%- if $currentPage < total_pages -%}
                          <li>
                            <a class="relative block rounded px-4 transition-all duration-300" href="{{ paginate.next.url }}"
                              aria-label="Next"><img class="w-4/5 opacity-25 hover:opacity-100" src="{{ 'arrow.svg' | file_url }}" alt="次のボタン">
                            </a>
                          </li>
                        {%- else -%}
                          <li class="disabled">
                            <a class="relative block rounded px-4 transition-all duration-300" href="{{ paginate.next.url }}" aria-label="Next">
                              <img class="w-4/5 opacity-25 hover:opacity-100" src="{{ 'arrow.svg' | file_url }}" alt="次のボタン">
                            </a>
                          </li>
                        {%- endif -%}
                      </ul>
                    </nav>
                  {% endif %}

<style>
.underline {
  padding-bottom: 5px;
  position: relative;
}
.underline::before {
  background: #333;
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform 0.3s;
}
.underline:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.underline.active:hover {
  border-bottom-color: transparent; 
}
</style>

Thank you in advance!