Styling Products

Styling Products

Global CSS Classes

CSS Variables

Product Grid Variables

Product Card Variables

Image Variables

Usage Examples

Basic Product Grid Customization

/* Change grid to 3 columns instead of default 4 */
:root {
  --nobi-product-grid-columns: 3;
}

/* Style the main products grid container */
.nobi-products-grid {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
}

Product Card Styling

/* Customize product cards */
.nobi-product-card {
  --nobi-product-card-border: 2px solid #007bff;
  --nobi-product-card-border-radius: 16px;
  background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nobi-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.15);
}

/* Remove borders for clean look */
.clean-cards .nobi-product-card {
  --nobi-product-card-border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Product Content Styling

/* Style product titles */
.nobi-product-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
  line-height: 1.4;
}

/* Style product prices */
.nobi-product-price {
  font-size: 18px;
  font-weight: 700;
  color: #27ae60;
  margin: 12px 0;
}

/* Style compare-at prices */
.nobi-product-compare-price {
  text-decoration: line-through;
  color: #7f8c8d;
  margin-left: 8px;
  font-size: 14px;
  opacity: 0.8;
}

/* Change title color on card hover */
.nobi-product-card:hover .nobi-product-title {
  color: #3498db;
}

Image Customization

/* Square product images */
:root {
  --nobi-image-aspect-ratio: 1/1;
}

/* Style product images */
.nobi-product-image {
  border-radius: 8px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.nobi-product-image:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Different aspect ratios for different contexts */
.wide-images {
  --nobi-image-aspect-ratio: 16/9;
}

.portrait-images {
  --nobi-image-aspect-ratio: 3/4;
}

.natural-images {
  --nobi-image-aspect-ratio: auto;
}

Expandable Sections

/* Style expandable product groups */
.nobi-expandable-group {
  background-color: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 20px;
  margin: 16px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.nobi-expandable-group:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #ced4da;
}

Responsive Grid Layouts

/* Responsive column layouts */
@media (min-width: 1400px) {
  /* More columns on very wide screens */
  :root {
    --nobi-product-grid-columns: 5;
  }
}

@media (max-width: 1200px) {
  :root {
    --nobi-product-grid-columns: 3;
  }
}

@media (max-width: 900px) {
  :root {
    --nobi-product-grid-columns: 2;
  }
}

/* Note: Mobile (≤650px) automatically uses 1 column regardless of this setting */

Complete Theme Example

/* Modern product theme */
.modern-product-theme {
  --nobi-product-grid-columns: 3;
  --nobi-product-card-border: none;
  --nobi-product-card-border-radius: 16px;
  --nobi-image-aspect-ratio: 1/1;
}

.modern-product-theme .nobi-products-grid {
  gap: 24px;
  padding: 32px 0;
}

.modern-product-theme .nobi-product-card {
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
}

.modern-product-theme .nobi-product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.modern-product-theme .nobi-product-title {
  font-size: 16px;
  font-weight: 500;
  color: #1a202c;
  margin-bottom: 8px;
}

.modern-product-theme .nobi-product-price {
  font-size: 20px;
  font-weight: 700;
  color: #2d3748;
}

.modern-product-theme .nobi-product-image {
  transition: transform 0.5s ease;
}

.modern-product-theme .nobi-product-card:hover .nobi-product-image {
  transform: scale(1.1);
}