Skip to main content
Collection pages in Nexus Theme provide advanced functionality for browsing product collections with filtering, sorting, and responsive design.

​
Overview

Collection pages include:
  • Product Grid Display with multiple layout options
  • Advanced Filtering by price, vendor, tags, and more
  • Sorting Options by price, popularity, and date
  • Pagination for large collections
  • Quick View functionality
  • Responsive Design optimized for all devices

​
Collection Page Features

​
Product Grid

<div class="collection-grid">
  {% for product in collection.products %}
    <div class="collection-product">
      <div class="collection-product__image">
        <a href="{{ product.url }}">
          <img src="{{ product.featured_image | image_url: width: 400 }}" 
               alt="{{ product.title | escape }}"
               loading="lazy">
        </a>
      </div>
      
      <div class="collection-product__info">
        <h3 class="collection-product__title">
          <a href="{{ product.url }}">{{ product.title }}</a>
        </h3>
        
        <div class="collection-product__price">
          {% if product.compare_at_price > product.price %}
            <span class="collection-product__price-current">{{ product.price | money }}</span>
            <span class="collection-product__price-compare">{{ product.compare_at_price | money }}</span>
          {% else %}
            <span class="collection-product__price-current">{{ product.price | money }}</span>
          {% endif %}
        </div>
      </div>
    </div>
  {% endfor %}
</div>

​
Filtering and Sorting

<div class="collection-toolbar">
  <div class="collection-filters">
    <!-- Filter options -->
  </div>
  
  <div class="collection-sort">
    <select name="sort_by" id="sort_by">
      <option value="manual">Featured</option>
      <option value="price-ascending">Price: Low to High</option>
      <option value="price-descending">Price: High to Low</option>
      <option value="title-ascending">Name: A to Z</option>
      <option value="title-descending">Name: Z to A</option>
      <option value="created-ascending">Oldest to Newest</option>
      <option value="created-descending">Newest to Oldest</option>
      <option value="best-selling">Best Selling</option>
    </select>
  </div>
</div>

​
CSS Styling

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.collection-product {
  background: white;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.collection-product:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.collection-product__image {
  aspect-ratio: 1;
  overflow: hidden;
}

.collection-product__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.collection-product:hover .collection-product__image img {
  transform: scale(1.05);
}

.collection-product__info {
  padding: 1rem;
}

.collection-product__title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.collection-product__title a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.collection-product__title a:hover {
  color: var(--color-primary);
}

.collection-product__price {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.collection-product__price-current {
  font-weight: 600;
  color: var(--color-text-primary);
}

.collection-product__price-compare {
  text-decoration: line-through;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}