Styling Products

CUSTOMIZING PRODUCTS AND PRODUCT GROUPS

Styling Products

Customize the appearance of product displays, product cards, and product grids in your Nobi implementation.

Global CSS Classes

The following global CSS classes are available for targeting specific product elements:
Class Name
Description
.nobi-products-grid
The main container for product search results and collections
.nobi-expandable-group
Expandable content sections that can show/hide additional products
.nobi-product-card
Individual product cards within the grid
.nobi-product-image
Product images within cards
.nobi-product-title
Product names/titles
.nobi-product-price
Product prices
.nobi-product-compare-price
Strikethrough compare-at prices

CSS Variables

Product Grid Variables

Variable Name
Description
Default Value
--nobi-product-grid-columns
Number of columns in the product grid (desktop only)
4

Product Card Variables

Variable Name
Description
Default Value
--nobi-product-card-border-radius
Border radius for product cards
8px
--nobi-product-card-border
Border style for product cards
1px solid #DBD8E0

Image Variables

Variable Name
Description
Default Value
--nobi-image-aspect-ratio
Aspect ratio for product images
auto

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