How to Customize Comparison Table

Learn how to customize the appearance and behavior of your product comparison table.

Basic Customization

Access Customization Settings

1. Go to your Shopify admin
2. Navigate to Apps → XB Products Compare
3. Click Settings → Appearance
4. Use the visual editor to customize your table

Color Customization

• Primary Color: Main color for headers and buttons
• Secondary Color: Accent color for highlights
• Background Color: Table background color
• Text Color: Main text color
• Border Color: Table and cell border colors

Typography Settings

• Font Family: Choose from available fonts
• Font Size: Adjust text size for readability
• Font Weight: Bold, normal, or light text
• Line Height: Spacing between text lines

Advanced CSS Customization

Custom CSS Classes

You can target specific elements with CSS:

/* Main comparison table */
.xb-compare-table {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
}

/* Table header */
.xb-compare-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Product cells */
.xb-compare-cell {
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
  vertical-align: top;
}

/* Product images */
.xb-compare-image {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.xb-compare-image:hover {
  transform: scale(1.05);
}

/* Price styling */
.xb-compare-price {
  font-size: 1.5em;
  font-weight: bold;
  color: #28a745;
}

.xb-compare-price-compare {
  text-decoration: line-through;
  color: #6c757d;
  font-size: 1.2em;
  margin-right: 10px;
}

/* Add to cart button */
.xb-compare-add-to-cart {
  background: #007bff;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.xb-compare-add-to-cart:hover {
  background: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,123,255,0.3);
}

Layout Customization

Table Width and Alignment

/* Full width table */
.xb-compare-table {
  width: 100%;
  margin: 0 auto;
}

/* Centered table with max width */
.xb-compare-table {
  max-width: 1200px;
  margin: 0 auto;
}

/* Fixed column widths */
.xb-compare-table th:nth-child(1) { width: 200px; }
.xb-compare-table th:nth-child(2) { width: 300px; }
.xb-compare-table th:nth-child(3) { width: 300px; }
.xb-compare-table th:nth-child(4) { width: 300px; }

Cell Padding and Spacing

/* Consistent cell padding */
.xb-compare-table td,
.xb-compare-table th {
  padding: 20px 15px;
}

/* Different padding for different cell types */
.xb-compare-table .image-cell {
  padding: 15px;
  text-align: center;
}

.xb-compare-table .text-cell {
  padding: 20px;
  text-align: left;
}

.xb-compare-table .price-cell {
  padding: 20px;
  text-align: center;
}

Mobile Responsiveness

Mobile-First Design

/* Mobile styles */
@media (max-width: 768px) {
  .xb-compare-table {
    font-size: 14px;
  }

  .xb-compare-table th,
  .xb-compare-table td {
    padding: 10px 8px;
  }

  .xb-compare-image {
    width: 80px;
    height: 80px;
  }

  .xb-compare-add-to-cart {
    padding: 8px 16px;
    font-size: 12px;
  }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1024px) {
  .xb-compare-table th,
  .xb-compare-table td {
    padding: 15px 12px;
  }

  .xb-compare-image {
    width: 120px;
    height: 120px;
  }
}

Horizontal Scroll for Mobile

/* Mobile horizontal scroll */
@media (max-width: 768px) {
  .xb-compare-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .xb-compare-table {
    min-width: 600px;
  }

  .xb-compare-table th:first-child,
  .xb-compare-table td:first-child {
    position: sticky;
    left: 0;
    background: white;
    z-index: 1;
  }
}

Animation and Effects

Hover Effects

/* Row hover effect */
.xb-compare-table tbody tr:hover {
  background-color: #f8f9fa;
  transform: scale(1.02);
  transition: all 0.2s ease;
}

/* Button hover effects */
.xb-compare-add-to-cart {
  position: relative;
  overflow: hidden;
}

.xb-compare-add-to-cart::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.xb-compare-add-to-cart:hover::before {
  left: 100%;
}

Loading Animations

/* Loading spinner */
.xb-compare-loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Fade in animation */
.xb-compare-table {
  opacity: 0;
  animation: fadeIn 0.5s ease-in forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

Custom Fields and Content

Custom Field Styling

/* Custom field styling */
.xb-compare-custom-field {
  background: #f8f9fa;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 4px 0;
  font-size: 0.9em;
}

.xb-compare-custom-field.highlight {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
}

.xb-compare-custom-field.important {
  background: #d1ecf1;
  border-left: 4px solid #17a2b8;
  font-weight: 600;
}

Badge and Label Styling

/* Product badges */
.xb-compare-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.xb-compare-badge.sale {
  background: #dc3545;
  color: white;
}

.xb-compare-badge.new {
  background: #28a745;
  color: white;
}

.xb-compare-badge.featured {
  background: #ffc107;
  color: #212529;
}

Troubleshooting

Common Issues

• CSS Not Applying: Check CSS specificity and selectors
• Mobile Issues: Test responsive breakpoints
• Performance: Optimize CSS and avoid heavy animations
• Browser Compatibility: Test across different browsers

Debug Tips

• Use browser developer tools to inspect elements
• Check CSS specificity and inheritance
• Validate CSS syntax
• Test on different devices and screen sizes

Pro Tip

Start with basic customization and gradually add more advanced features. Test each change to ensure it works well across all devices.