Skip to main content

How to Configure Comparison Fields

Learn how to configure which product attributes and fields are displayed in your comparison table.

Accessing Field Configuration​

Step 1: Navigate to Settings​

  1. Go to your Shopify admin dashboard
  2. Click Apps → XB Products Compare
  3. Select Settings → Comparison Fields

Step 2: Field Selection Interface​

The field configuration interface shows:

  • Available Fields: All possible fields you can display
  • Selected Fields: Currently active comparison fields
  • Field Order: Drag-and-drop to reorder fields
  • Preview: Real-time preview of your changes

Standard Field Configuration​

Basic Product Information​

Configure these essential fields:

  • Product Image: High-quality product photos
  • Product Name: Product title and variant information
  • Price: Current price with discount information
  • Availability: Stock status and inventory levels
  • Description: Product description text
  • SKU: Product identifier code

Technical Specifications​

For products with technical details:

  • Weight: Product weight information
  • Dimensions: Length, width, height measurements
  • Materials: Construction materials used
  • Warranty: Warranty period and terms
  • Features: Key product features list

Business Information​

For business context:

  • Vendor: Product manufacturer or brand
  • Product Type: Category classification
  • Tags: Product tags and labels
  • Collection: Product collection membership
  • Created Date: When the product was added

Custom Field Configuration​

Creating Custom Fields​

  1. In the field configuration interface
  2. Click Add Custom Field
  3. Enter field name and description
  4. Select field type (text, number, date, etc.)
  5. Configure display options

Custom Field Types​

  • Text Fields: Short or long text descriptions
  • Number Fields: Numeric values with units
  • Boolean Fields: Yes/No or True/False values
  • Date Fields: Dates with formatting options
  • Image Fields: Additional product images
  • Link Fields: External links or references

Field Mapping​

Map custom fields to product metafields:

  1. Select your custom field
  2. Choose the corresponding metafield
  3. Configure data transformation if needed
  4. Set default values for missing data

Field Display Options​

Field Visibility​

Control which fields are shown:

  • Always Show: Field is always visible
  • Conditional Show: Show based on conditions
  • Hide on Mobile: Hide on small screens
  • Admin Only: Only visible to store admins

Field Formatting​

Customize how fields are displayed:

  • Text Formatting: Bold, italic, underline options
  • Number Formatting: Decimal places, thousands separators
  • Date Formatting: Date and time format options
  • Currency Formatting: Currency symbols and formatting
  • Color Coding: Background colors for different values

Field Grouping​

Organize fields into logical groups:

  • Basic Information: Product name, price, availability
  • Specifications: Technical details and features
  • Shipping: Delivery and shipping information
  • Reviews: Customer ratings and feedback
  • Custom Group: Your custom field categories

Advanced Configuration​

Conditional Logic​

Show fields based on conditions:

// Example: Show warranty only for electronics
if (product.type === 'Electronics') {
  showField('warranty');
}

// Example: Show size only for clothing
if (product.tags.includes('clothing')) {
  showField('size');
}

// Example: Show color options only for products with variants
if (product.variants.length > 1) {
  showField('color_options');
}

Field Dependencies​

Set up field dependencies:

  • Required Fields: Fields that must be displayed
  • Optional Fields: Fields that can be hidden
  • Linked Fields: Fields that show together
  • Exclusive Fields: Fields that exclude each other

Data Validation​

Ensure field data quality:

  • Required Values: Fields that must have data
  • Data Types: Enforce correct data types
  • Value Ranges: Set minimum/maximum values
  • Format Validation: Validate data formats

Field Templates​

Pre-built Templates​

Use templates for common product types:

  • Electronics: Standard electronics fields
  • Clothing: Fashion and apparel fields
  • Home & Garden: Home improvement fields
  • Beauty: Cosmetics and personal care
  • Sports: Athletic and fitness equipment

Custom Templates​

Create your own field templates:

  1. Configure fields for a product category
  2. Save configuration as template
  3. Apply template to similar products
  4. Modify template as needed

Performance Optimization​

Field Selection Impact​

Consider performance implications:

  • Field Count: More fields = slower loading
  • Field Types: Images and complex fields are slower
  • Data Size: Large text fields impact performance
  • Caching: Cache frequently accessed fields

Optimization Tips​

  • Essential Fields Only: Show only necessary fields
  • Lazy Loading: Load fields as needed
  • Data Compression: Compress large field data
  • Caching Strategy: Cache field configurations

Testing and Validation​

Field Testing​

Test your field configuration:

  1. Preview Mode: Use preview to test changes
  2. Different Products: Test with various product types
  3. Mobile Testing: Check mobile field display
  4. Performance Testing: Monitor loading times

Validation Checklist​

  • All important fields are included
  • Field order is logical
  • Mobile display is optimized
  • Performance is acceptable
  • Data is accurate and complete

Troubleshooting​

Common Issues​

  • Fields Not Showing: Check field selection and visibility
  • Incorrect Data: Verify field mapping and data sources
  • Performance Issues: Reduce field count or optimize data
  • Mobile Problems: Check responsive field configuration

Debug Steps​

  1. Check field configuration in admin
  2. Verify product data completeness
  3. Test on different devices and browsers
  4. Monitor performance metrics
  5. Check browser console for errors
Pro Tip

Start with essential fields and gradually add more based on customer feedback and analytics data. Focus on fields that help customers make purchasing decisions.