Hi there,
I’m currently using the Dawn theme (version 15.0.0) for my store and I’m looking to customize the pagination style for the Featured Collections section on my homepage. Specifically, I want to replace the default numeric pagination with underscores (like ______) instead of numbers or arrows.
URL: https://acediamondsmoissanite.com/
Change this:
To this:
Has anyone done this before, or can someone provide guidance on how to achieve this effect?
I’d appreciate any help or pointers!
Thanks in advance
Hi @acedeno92
Great question and nice clean layout on your featured collection! 
Yes, it’s definitely possible to replace the default numeric pagination in the Dawn 15.0.0 theme with underscores. You can do this with a small edit to your Liquid and CSS files.
Here’s a quick, working approach:
Edit your pagination code
Go to Online Store → Edit Code → sections/featured-collection.liquid and find this line:
{% render ‘pagination’, paginate: paginate %}
Replace it with:
{% if paginate.pages > 1 %}
<ul class="pagination__list list-unstyled" role="list">
{% for part in paginate.parts %}
{% if part.is_link %}
<li class="pagination__item">
<a href="{{ part.url }}" class="custom-pagination">\____\_</a>
</li>
{% elsif part.title == paginate.current_page %}
<li class="pagination__item pagination__item--current">
<span class="custom-pagination active">\____\_</span>
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
Add custom CSS
Open assets/base.css and paste this at the bottom:
.custom-pagination {
display: inline-block;
color: #fff; /* Adjust to match your theme */
margin: 0 5px;
font-size: 24px;
text-decoration: none;
transition: opacity 0.3s ease;}
.custom-pagination:hover {
opacity: 0.6;}
.custom-pagination.active {
text-decoration: underline;
opacity: 1;
}
After saving, your pagination will show clean underscores instead of numbers or arrows — exactly like your second example image.
You can also customize the color or add subtle hover effects if you want a more branded feel.
Hope this helps!
1 Like
Hey AceDiamond 
Nice idea — that underscore-style pagination gives a really clean, modern look! You can definitely achieve this in Dawn 15.0.0 with a bit of CSS and a small tweak to your theme code.
Here’s one way to do it:
-
Go to: Online Store > Themes > Edit code
-
Open the file:
sections/featured-collection.liquid
-
Find the pagination markup (it’s usually inside a <nav> or <ul> element).
-
Replace the number-based pagination with simple span elements or list items representing your underscores.
Example:
<ul class="custom-pagination">
{% for i in (1..paginate.pages) %}
<li class="{% if paginate.current_page == i %}active{% endif %}">_</li>
{% endfor %}
</ul>
-
Then add this CSS to your base.css or theme.css:
.custom-pagination {
display: flex;
justify-content: center;
gap: 10px;
list-style: none;
}
.custom-pagination li {
cursor: pointer;
font-size: 24px;
color: #bbb;
}
.custom-pagination li.active {
color: #000;
}
That’ll give you the underscore-style effect and highlight the active page cleanly.
Hope that helps! 
1 Like
Hi there,
Thanks for the detailed instructions! I’ve been trying to follow your steps, but I can’t locate the line {% render ‘pagination’, paginate: paginate %} in the sections/featured-collection.liquid file. It seems like the Dawn 15.0.0 theme might structure pagination differently now.
Could you clarify where exactly in the file I should look, or provide the updated snippet for this version?
Thanks!
Hi,
Thanks for the guide! Step 4 isn’t completely clear to me — I’m not exactly sure what you want me to do when replacing the number-based pagination with spans or list items. Could you clarify what the final code should look like in Dawn 15.0.0?
Appreciate your help!
Hi @AceDiamond
Absolutely thanks for pointing that out! Let me clarify
In Dawn 15.0.0, you’ll want to replace the default pagination snippet with this final version so it displays underscores instead of numbers.
Here’s exactly what it should look like:
{% if paginate.pages > 1 %}
<ul class="pagination__list list-unstyled" role="list">
{% for part in paginate.parts %}
{% if part.is_link %}
<li class="pagination__item">
<a href="{{ part.url }}" class="custom-pagination">\____\_</a>
</li>
{% elsif part.title == paginate.current_page %}
<li class="pagination__item pagination__item--current">
<span class="custom-pagination active">\____\_</span>
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
Then, add this CSS to your base.css:
.custom-pagination {
display: inline-block;
color: #fff;
margin: 0 5px;
font-size: 24px;
text-decoration: none;
transition: opacity 0.3s ease;
}
.custom-pagination:hover {
opacity: 0.6;
}
.custom-pagination.active {
text-decoration: underline;
}
After saving, your pagination will show clean underscores instead of numbers — just like the example you shared earlier
1 Like
Thanks for the clarification, @Webbsitediva. That code definitely works for replacing the pagination numbers with underscores.
However, I’m running into a couple of issues I’m hoping to fine-tune:
-
The underscore pagination currently appears on all product collection pages, but I only want it to show on the featured collection section of the homepage. The regular numbered pagination should remain for all other collections.
-
Right now, the underscores only work when you click them to switch products, but what I’m trying to achieve is the opposite — the underscores should automatically update as you slide through each product.
Basically, each underscore represents a product, and when you slide to the next product, the active underscore should turn white, indicating which product (1st, 2nd, 3rd, etc.) is currently visible.
At the moment, the underscores aren’t reacting along with the product slider — they stay static unless clicked. I’d like them to respond dynamically to the slider movement instead of acting as clickable links.
Hey @AceDiamond,
In order to change the style of the pagination requires to do the custom code in your theme file.
By any chance can I have your store collab code so that I can implement the requested changes.
You can share it in the p/m.
Thanks
1 Like
Anyone have a solution for this?
