OxxRing 筛选功能配置指南

核心原则

• 筛选为王 - 筛选功能是转化的关键
• 信息清晰 - 规格信息要详细准确
• 快速操作 - 减少用户操作步骤
• 批量折扣 - B2B客户需要批量优惠

Smart Product Filter & Search 配置

访问配置页面

Apps → Smart Product Filter & Search → Configure

配置筛选条件

Filter 1: Material（材质）

• Type: Tag
• Values: NBR, FKM/Viton, EPDM, Silicone, FFKM
• Display: Checkbox with count
• Enable: YES

Filter 2: Inner Diameter（内径）

• Type: Numeric Range
• Min: 0.010
• Max: 12.000
• Units: inches, mm
• Display: Dual slider + input fields
• Show both units: YES

Filter 3: Cross Section（截面）

• Type: Numeric Range
• Min: 0.070
• Max: 0.275
• Units: inches, mm
• Display: Dual slider + shortcuts
• Shortcuts:
• 0.139" (3.53mm) - AS568标准
• 0.070" (1.78mm) - 小尺寸
• 0.210" (5.33mm) - 大尺寸

Filter 4: Durometer（硬度）

• Type: Tag
• Values: 50A, 70A, 90A
• Display: Radio buttons
• Show descriptions:
• 50A: Soft - Low pressure sealing
• 70A: Standard - Most applications
• 90A: Hard - High pressure applications

Filter 5: Price（价格）

• Type: Price Range
• Min: $0
• Max: $100
• Display: Range slider
• Show count: YES

显示设置

• Enable on: All Collections
• Display style: Sidebar (Left)
• Show product count: YES
• Show active filters: YES
• Enable AJAX filtering: YES (Instant results)
• Show Reset button: YES
• Show Apply button: NO (Auto-apply)

排序选项

• Featured (Default)
• Price: Low to High
• Price: High to Low
• Inner Diameter: Small to Large
• Cross Section: Small to Large
• Newest
• Best Selling

产品Metafields配置

为每个产品添加以下Metafields：

Namespace: specs
Keys:
  - inner_diameter (文本) - 示例: 2.000"
  - inner_diameter_mm (数字) - 示例: 50.8
  - cross_section (文本) - 示例: 0.139"
  - cross_section_mm (数字) - 示例: 3.53
  - durometer (文本) - 示例: 70A
  - standard (文本) - 示例: AS568-222
  - working_temp (文本) - 示例: -40°C ~ +100°C
  - pressure_rating (文本) - 示例: 1500 psi

产品卡片模板

使用无图片的产品卡片，信息密集：

<div class="product-card">
  <div class="product-sku">{{ product.variants.first.sku }}</div>
  <div class="product-title">
    {{ product.title }} - {{ product.metafields.specs.durometer }}
  </div>
  <div class="product-specs">
    <div>ID: {{ product.metafields.specs.inner_diameter }}</div>
    <div>CS: {{ product.metafields.specs.cross_section }}"</div>
    <div>ID mm: {{ product.metafields.specs.inner_diameter_mm }} mm</div>
    <div>CS mm: {{ product.metafields.specs.cross_section_mm }} mm</div>
  </div>
  <div class="product-price">
    From {{ product.price_min | money }}
  </div>
  <div class="product-actions">
    <input type="number" class="qty-input" value="1" min="1">
    <button class="add-to-cart">Add</button>
    <a href="{{ product.url }}" class="view-link">View</a>
  </div>
</div>

快捷筛选组合

在首页添加快捷筛选链接：

Quick Filters:
  ✓ Common AS568 Standard (876 products)
  ✓ Small Size O-Ring (420 products)
  ✓ Food Grade Silicone (180 products)
  ✓ High Temp FKM (320 products)
  ✓ Hydraulic Applications (540 products)

CSS样式（简洁工业风）

/* Sidebar Filter */
.sidebar-filter {
  width: 25%;
  background: #f8f9fa;
  padding: 20px;
  border-right: 1px solid #e0e0e0;
}

.filter-group {
  margin-bottom: 24px;
}

.filter-group h3 {
  font-size: 14px;
  margin-bottom: 12px;
  color: #333;
}

.filter-option {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.filter-count {
  margin-left: auto;
  color: #666;
  font-size: 12px;
}

/* Product Card */
.product-card {
  border: 1px solid #e0e0e0;
  padding: 16px;
  margin-bottom: 16px;
}

.product-sku {
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.product-specs {
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  color: #333;
  line-height: 1.6;
}

.product-price {
  font-size: 18px;
  font-weight: 600;
  color: #0066cc;
  margin: 12px 0;
}

测试清单

• [ ] 筛选条件显示正确
• [ ] 筛选后结果即时更新
• [ ] 数值范围筛选正常
• [ ] 产品数量显示准确
• [ ] 排序功能正常
• [ ] 移动端响应式正常
• [ ] 无图片产品卡片显示正确
• [ ] 规格信息准确显示

转化率优化目标

• 目标转化率：3-5%
• 平均寻找产品时间：<5秒
• 筛选使用率：>60%
• 购物车转化率：>20%
• 客单价：>$50