Shopifyでオリジナルテーマを作成しよう～No.8[コレクションページの作成]～

<div class="subpage_bg_img d-flex justify-content-center align-items-center"
    style="background-image: url('assets/img/collection_top.jpg');">
    <h2 class="f36">COLLECTION</h2>
  </div>
  <nav aria-label="breadcrumb" class="mb-5">
    <ol class="breadcrumb bg-white d-flex justify-content-center">
      <li class="breadcrumb-item"><a href="index.html">Home</a></li>
      <li class="breadcrumb-item active" aria-current="page">Collection</li>
    </ol>
  </nav>

<div class="subpage_bg_img d-flex justify-content-center align-items-center"
  style="background-image: url('{% if collection.image %}{{collection.image | img_url: '1920x'}}{% else %}なんかの画像URL{% endif %}');">
  <h2 class="f36">{{collection.title}}</h2>
</div>
{% render 'breadcrumbs' %}

{% for product in collection.products %}
    <div>
      <a href="{{ product.url | within: collection }}">{{ product.title }}</a>
      {{ product.price | money }}
      {% unless product.available %}<br><strong>sold out</strong>{% endunless %}
      <a href="{{ product.url | within: collection }}">
        <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
      </a>
    </div>
  {% else %}
    <p>no matches</p>
  {% endfor %}

<div class="main">
  <div class="container">
    <div class="row row-cols-sm-3">
      {% for product in collection.products %}
      <a href="{{product.url | within: collection}}" class="col-sm mb-3">
        <div class="card position-relative">
          {% unless product.available %}<span class="f26 sold_out text-danger position-absolute">Sold
            Out</span>{% endunless %}
          <img class="item_list_img" src="{{product.featured_image.src | img_url: '1920x'}}" alt="">
          <div class="card-body">
            <p class="card-text font-weight-bold">{{product.title}}</p>
            <p>{{product.price | money}}</p>
          </div>
        </div>
      </a>
      {% else %}
      <p>no matches</p>
      {% endfor %}
    </div>
  </div>
</div>

{% paginate collection.products by x %}
{% endpaginate %}

{% if paginate.pages > 1 %}
  {{ paginate | default_pagination }}
{% endif %}

<div class="main">
  {% paginate collection.products by 3 %}
  <div class="container">
    <div class="row row-cols-sm-3">
      {% for product in collection.products %}
      <a href="{{product.url | within: collection}}" class="col-sm mb-3">
        <div class="card position-relative">
          {% unless product.available %}<span class="f26 sold_out text-danger position-absolute">Sold
            Out</span>{% endunless %}
          <img class="item_list_img" src="{{product.featured_image.src | img_url: '1920x'}}" alt="">
          <div class="card-body">
            <p class="card-text font-weight-bold">{{product.title}}</p>
            <p>{{product.price | money}}</p>
          </div>
        </div>
      </a>
      {% else %}
      <p>no matches</p>
      {% endfor %}
    </div>


    {% if paginate.pages > 1 %}
    <nav aria-label="Page navigation example" class="pagination_nav">
      {{ paginate | default_pagination: next: '»', previous: '«' }}
    </nav>
    {% endif %}
    {% endpaginate %}
  </div>
</div>

{% if paginate.pages > 1 %}
    <nav aria-label="Page navigation example" class="pagination_nav">
      {{ paginate | default_pagination: next: '»', previous: '«' }}
    </nav>
{% endif %}

next: '»', previous: '«'

/****************************************************/

/**   PAGINATE    **/

/****************************************************/

span.page a,span.page.current,span.next a,span.prev a,span.deco {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #333333;
  background-color: #fff;
  border: 1px solid #dee2e6;
}

.pagination_nav{
  display: flex;
  justify-content: center;
}

<nav aria-label="Page navigation example" class="pagination_nav">
      <span class="page current">1</span> <span class="page"><a href="/collections/adidas?page=2" title="">2</a></span> <span class="next"><a href="/collections/adidas?page=2" title="">»</a></span>
</nav>