Add pagination to a featured collection on homepage

[acid-betty]

Hello, I would like to add pagination to a "featured collection" I have on my homepage instead of having a "view all" button. Is this possible?

replace with:

[tim]

Yes.

Assuming your theme is Dawn, it would require modification to the code of the sections/featured-collection.liquid

Find code https://github.com/Shopify/dawn/blob/2d5c529f5d6c8be9aa3a921aaf055e0e91b069c2/sections/featured-coll... 

{% paginate section.settings.collection.products by section.settings.products_to_show %}
  {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}

and make it

{% assign collection = collections[section.settings.collection.handle] %}
{% paginate collection.products by section.settings.products_to_show %}
  {%- for product in collection.products limit: section.settings.products_to_show -%}

Then find this code https://github.com/Shopify/dawn/blob/2d5c529f5d6c8be9aa3a921aaf055e0e91b069c2/sections/featured-coll...:

{% endpaginate %}

And make it:

<div class=page-width style="text-align: center; width: 100%">
  {{  paginate | default_pagination }}
</div>
{% endpaginate %}

Save the changes and set section settings Carousel and "View all" button to off.

Result:

Bookmark this post to re-apply these edits after next theme update.

[EmbedAny]

Hi Acid-Betty,

To add pagination to your featured collection on Shopify, follow these steps:

Backup Your Theme: Before making any changes, duplicate your theme to avoid losing any data.

Access Theme Files: In Shopify Admin, go to Online Store > Themes > Actions > Edit code.

Locate the Collection Section: Find the file where your featured collection is displayed.

Add Pagination Code: Use this Liquid code to paginate products:

{% assign collection = collections['your-collection-handle'] %}

{% if collection.products.size > 0 %}
  <div class="featured-collection">
    <h2>{{ collection.title }}</h2>
    <div class="product-grid">
      {% paginate collection.products by 12 %}
        {% for product in collection.products %}
          <div class="product-card">
            <a href="{{ product.url }}">
              <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
              <p>{{ product.title }}</p>
              <span>{{ product.price | money }}</span>
            </a>
          </div>
        {% endfor %}
        
        <div class="pagination">
          {% if paginate.pages > 1 %}
            <ul>
              {% if paginate.previous %}
                <li><a href="{{ paginate.previous.url }}">&laquo; Previous</a></li>
              {% endif %}
              {% for i in (1..paginate.pages) %}
                <li class="{% if i == paginate.current_page %} active{% endif %}">
                  <a href="{{ paginate.page_url(i) }}">{{ i }}</a>
                </li>
              {% endfor %}
              {% if paginate.next %}
                <li><a href="{{ paginate.next.url }}">Next &raquo;</a></li>
              {% endif %}
            </ul>
          {% endif %}
        </div>
      {% endpaginate %}
    </div>
  </div>
{% endif %}

Style Pagination: Add custom CSS to make the pagination buttons fit your store’s look.

Test it out, and you’re done! Let me know if you need any tweaks.