Collection Pages - Nexus Theme Documentation

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;
}