Pagination on Atelier theme

[milly41]

How can I add pagination to my atelier theme? all the products are on one page

[ghukasyanishxan]

Could you please provide the URL of the current page of your store that you want to paginate?

[suyash1]

@milly41 pagination code will need to be used into collection template to show pagination

[TheUntechnickle]

Hey @milly41! The Atelier theme should have pagination built-in, but if all your products are showing on one page, there are a few things to check and fix:

First, check your theme settings:

1. Go to Online Store > Themes > Customize
2. Navigate to a collection page in the preview
3. Look for Collection or Collection pages settings in the sidebar
4. Find a setting called “Products per page” or “Number of products” and make sure it’s set to a reasonable number like 12, 20, or 24 (not something huge like 100)

If that setting doesn’t exist or isn’t working, here’s how to add/fix pagination:

Go to Online Store > Themes > Actions > Edit Code and find your collection template file. This could be:

• templates/collection.liquid
• sections/collection-template.liquid
• sections/main-collection.liquid

Look for code that displays your products. It should look something like this:

{% paginate collection.products by 20 %}
  {% for product in collection.products %}
    <!-- product display code here -->
  {% endfor %}
  
  {% if paginate.pages > 1 %}
    {{ paginate | default_pagination }}
  {% endif %}
{% endpaginate %}

If you see the product loop WITHOUT the paginate tags wrapped around it, that’s your problem. You need to wrap the product loop with pagination tags.

The fix:
Replace the number 20 with however many products you want per page (max 50). The pagination links will automatically appear at the bottom when you have more products than the limit.

Quick example for Atelier theme:

{% paginate collection.products by 24 %}
  <div class="product-grid">
    {% for product in collection.products %}
      {% include 'product-item' %}
    {% endfor %}
  </div>
  
  {% if paginate.pages > 1 %}
    <nav class="pagination">
      {{ paginate | default_pagination }}
    </nav>
  {% endif %}
{% endpaginate %}

If you’re not comfortable editing code, let us know and we’ll do that for you for free.

Cheers!
Shubham | Untechnickle

[milly41]

Hi Shubham, thanks so much for your reply! unfortunately I’ve checked the sidebar and can’t see a setting to adjust the number of products per page. That would be great if you could please help me with the coding!

[devcoders]

Hello @milly41

Go to: Online Store > Themes > Edit Code.

Open the collection template:
templates/collection.liquid or sections/main-collection-product-grid.liquid.

Adjust by 24 to how many products per page you want.

Let me know if you’re using collection.json + main-collection.liquid — the setup may vary slightly.

Find the product loop, usually:

{% paginate collection.products by 24 %}
  {% for product in collection.products %}
    <!-- product card -->
  {% endfor %}

  {{ paginate | default_pagination }}
{% endpaginate %}

[TheUntechnickle]

It’d be our pleasure to help you with this. Please DM or email us your collaborator code, we’ll send you the store access request and add the fixes to a copy of theme. Once you’re satisfied, we can publish the theme.

Looking forward to hearing from you,
Shubham | Untechnickle

[ghukasyanishxan]

just i cannot send well formatted code

[ghukasyanishxan]

@devcoders

{%- doc -%}
  This snippet is used to render the product grid on collection and search pages.

  @param {object} section - The section object
  @param {object} paginate - Pagination object
  @param {object} products - Array of product objects
  @param {string} [title] - Header of the collection or search results
  @param {string} children - List or grid of product cards
{%- enddoc -%}

{% capture product_card_size %}
  {% render 'util-product-grid-card-size' section: section %}
{% endcapture %}
{% assign product_card_size = product_card_size | strip %}

{% style %}
  @media (min-width: 750px) {
    {% case section.settings.layout_type %}
      {% when 'grid' %}
        .product-grid--{{ section.id }}:is(.product-grid--grid) {
          --product-grid-columns-desktop: repeat(auto-fill, minmax({{ product_card_size }}, 1fr));
        }
      {% when 'organic' %}
        {% assign large_span = 2 %}
        {% assign row_cycle = 3 %}
        {% assign product_cycle = row_cycle | times: 2 %}
        {% assign right_large_start_col = 3 %}
        .product-grid--{{ section.id }}:not([product-grid-view='zoom-out']):is(.product-grid--organic) .product-grid__item:nth-child({{ product_cycle }}n + 1) {
          grid-column: 1 / span {{ large_span }};
        }

        .product-grid--{{ section.id }}:not([product-grid-view='zoom-out']):is(.product-grid--organic) .product-grid__item:nth-child({{ product_cycle }}n + 2),
        .product-grid--{{ section.id }}:not([product-grid-view='zoom-out']):is(.product-grid--organic) .product-grid__item:nth-child({{ product_cycle }}n + 5) {
          align-self: end;
        }

        .product-grid--{{ section.id }}:not([product-grid-view='zoom-out']):is(.product-grid--organic) .product-grid__item:nth-child({{ product_cycle }}n + {{ product_cycle }}) {
          grid-column: {{ right_large_start_col }} / span {{ large_span }};
        }

        .product-grid--{{ section.id }}:not([product-grid-view='zoom-out']):is(.product-grid--organic) {
          --product-grid-columns-desktop: repeat(4, 1fr);
        }
    {% endcase %}

    {% case section.settings.product_card_size %}
      {% when 'extra-large' or 'large' %}
        @container product-grid (max-width: calc({{ product_card_size }} * 3 + {{ section.settings.columns_gap_horizontal }}px * 2)) {
          .product-grid--{{ section.id }}:is(.product-grid--grid) {
            --product-grid-columns-desktop: repeat(2, 1fr);
          }
        }
    {% endcase %}

    .product-grid--{{ section.id }}:is([product-grid-view='zoom-out']) {
      --product-grid-columns-desktop: repeat(auto-fill, minmax(6.25rem, 1fr));
    }

    .product-grid--{{ section.id }}:is([product-grid-view='zoom-out']) .product-grid-view-zoom-out--details {
      display: block;
    }

    .product-grid--{{ section.id }}:is([product-grid-view='zoom-out']) .product-grid__card {
      padding-inline-start: var(--zoom-out-padding-inline-start, 0);
      padding-inline-end: var(--zoom-out-padding-inline-end, 0);
      padding-block-start: var(--zoom-out-padding-block-start, 0);
      padding-block-end: var(--zoom-out-padding-block-end, 0);
    }
  }

  .pagination-list {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 0.5rem;
    padding: 1.5rem 0;
    margin: 0;
  }

  .pagination-list li {
    display: inline;
  }

  .pagination-list a,
  .pagination-list .current {
    padding: 0.5em 0.75em;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
  }

  .pagination-list .current {
    font-weight: bold;
    background-color: #eee;
  }
{% endstyle %}

<div
  id="ResultsList"
  class="
    grid main-collection-grid
    {%- if section.settings.inherit_color_scheme == false %} color-{{ section.settings.color_scheme }}{% endif %}
    {%- if section.settings.product_grid_width == 'full-width' %} collection-wrapper--full-width{% endif %}
    {%- if section.settings.full_width_on_mobile == true %} collection-wrapper--full-width-on-mobile{% endif %}
    spacing-style
  "
  style="
    --grid--margin--mobile: 0{% if section.settings.product_grid_width == 'centered' and section.settings.full_width_on_mobile == false %} var(--margin-lg){% else %} 0{% endif %};
    --grid-column--desktop: var(--{% if section.settings.product_grid_width == 'centered' %}centered{% else %}full-width{% endif %});
    --grid-column--mobile: var(--{% if section.settings.full_width_on_mobile %}full-width{% else %}{% if section.settings.product_grid_width == 'centered' %}centered{% else %}full-width{% endif %}{% endif %});
    --padding-inline-start: {{ section.settings.padding-inline-start }}px;
    --padding-inline-end: {{ section.settings.padding-inline-end }}px;
  "
>
  <div
    style="
      grid-column: var(--full-width);
      --product-grid-gap-mobile: {{ section.settings.columns_gap_vertical | at_most: 12 }}px {{ section.settings.columns_gap_horizontal | at_most: 12 }}px;
      --product-grid-gap-desktop: {{ section.settings.columns_gap_vertical }}px {{ section.settings.columns_gap_horizontal }}px;
      container-type: inline-size;
      container-name: product-grid;
    "
  >
    {% if products.size == 0 %}
      <div class="main-collection-grid__empty">
        <h2 class="main-collection-grid__empty-title h2">
          {{ 'content.no_products_found' | t }}
        </h2>
        <p>
          {{ 'content.use_fewer_filters_html' | t: link: collection.url, class: 'main-collection-grid__empty-link' }}
        </p>
      </div>
    {% else %}

      {% if title %}
        <h4 class="main-collection-grid__title">{{ title }}</h4>
      {% endif %}
      <ul
        class="product-grid product-grid--{{ section.id }} product-grid--{{ section.settings.layout_type }} {% if section.settings.mobile_product_card_size == 'large' %} product-grid-mobile--large{% endif %}"
        product-grid-view="default"
        ref="grid"
        role="list"
        data-last-page="{{ paginate.pages }}"
        data-product-card-size="{{ section.settings.product_card_size }}"
      >
        {{ children }}
      </ul>

      {% if paginate.pages > 1 %}
        <nav class="pagination" role="navigation" aria-label="Pagination Navigation">
          <ul class="pagination-list">
            {% if paginate.previous %}
              <li><a href="{{ paginate.previous.url }}" class="pagination-prev">← Previous</a></li>
            {% endif %}

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

            {% if paginate.next %}
              <li><a href="{{ paginate.next.url }}" class="pagination-next">Next →</a></li>
            {% endif %}
          </ul>
        </nav>
      {% endif %}
    {% endif %}
  </div>
</div>

{% unless request.design_mode %}
  <script>
    (() => {
      const grid = document.querySelector('.product-grid');

      if (grid) {
        const currentDevice = window.innerWidth >= 750 ? 'desktop' : 'mobile';
        const storedLayout = sessionStorage.getItem(`product-grid-view-${currentDevice}`);

        if (storedLayout) {
          const options = document.querySelectorAll(`input[type="radio"][name="grid"]`);

          grid.setAttribute('product-grid-view', storedLayout);

          for (const option of options) {
            option.checked = option.value === storedLayout;
          }
        }
      }
    })();
  </script>
{% endunless %}

now its good visible

[ghukasyanishxan]

delete full code and put this code to snippets/product-grid.liquid

[milly41]

Hi, what code do I need to use?

[milly41]

Thank you this worked! I currently have 24 products showing per page, how can i change this to 16 products per page? (4 columns by 4 rows)

[devcoders]

Hello @milly41

In your Shopify Admin go to online store > themes → Customize → collecton → Product grid.

[milly41]

Hi! unfortunately I don’t have the ‘product grid’ option in my sidebar

[devcoders]

Hello @milly41
Please click on the collection, use it, and send me a screenshot.

[milly41]

Sure! here you go

[ghukasyanishxan]

@milly41

Thank you this worked! I currently have 24 products showing per page, how can i change this to 16 products per page? (4 columns by 4 rows)

find sections/main-collection.liquid then this part > {% paginate collection.products by 24 %} change to 16

[Shadab_dev]

A feature like pagination is kind of basic and should be in all the themes. I haven’t checked atelier as it’s newly released but all other themes do have pagination implemented by default.

You may want to look to the settings for the collection template.

It could also be due to some bug, or you will need add it with code.

There’s another way to load the products is with a load more button so instead of displaying all products at once as you scroll user can click to load more products. It does add products on the same page but does not do all at once. So just a better ui and user interaction.

Check collection pages for this example site:

Eluxe Store

[milly41]

Thank you! is there a way to do 4 products in a row? as at the moment it is 5 products per row, so the last row only has 1 product and it looks a bit strange

[ghukasyanishxan]

go to assets/base.css and bottom put this code and save. > @media (min-width: 750px) {
.product-grid–grid
{
–product-grid-columns-desktop: repeat(auto-fill, minmax(280px, 1fr)) !important;
}
}