Improved Variant Selection

Enhanced card-based variant selector that replaces Shopify's default dropdown interface.

The Improved Variant Selection feature replaces Shopify's default variant selector with an enhanced, card-based interface that provides a better user experience, shows price differences, and prevents invalid variant combinations.

What It Does

The improved variant selector displays all product options (like size, color, material) as clickable cards instead of dropdown menus. When customers select different options, they immediately see:

  • Price differences between variants
  • Which combinations are available
  • Real-time updates to availability
  • Updated product URL for sharing

Benefits

For Your Customers

  • Better visual presentation - See all options at a glance instead of dropdown menus
  • Price transparency - Instantly see how different choices affect price (+$50, -$20)
  • Prevent errors - Can't select invalid combinations (like "Size XL" with "Color Red" if that combo doesn't exist)
  • Easier sharing - URL updates automatically, so customers can bookmark or share specific configurations
  • Keyboard navigation - Full accessibility with keyboard support

For Your Business

  • Reduced support inquiries - Customers can't select unavailable combinations
  • Higher conversion rates - Better UX leads to more completed purchases
  • Mobile-friendly - Cards work better on touchscreens than dropdowns
  • Professional appearance - Modern interface matches premium brands

How It Works

Default Shopify Selector:

  • Dropdown menus for each option
  • No price differences shown
  • Can select invalid combinations
  • Less visual appeal

Weevio Improved Selector:

  • Visual cards for each option
  • Price differences displayed clearly
  • Invalid combinations grayed out
  • Modern, intuitive interface

Configuration

Requirements

To use the Improved Variant Selection feature, you need:

  • Shopify Storefront API access token
  • Storefront API scopes configured (see Prerequisites)
  • No feature purchase required (included with all plans)

Enabling the Feature

  1. Ensure you have a Storefront API access token from your Shopify Custom App
  2. Open your Shopify theme code where the widget is installed
  3. Find the window.weevioWidgetConfig object
  4. Add these lines:
window.weevioWidgetConfig = {
  // ... other config ...

  enableImprovedVariantSelection: true,
  storefrontAccessToken: 'your_storefront_token_here',
};
  1. Save your theme changes
  2. Test on a product page with multiple variants

Configuration Options

{
  // Enable the feature
  enableImprovedVariantSelection: true,

  // Required: Your Storefront API token
  storefrontAccessToken: 'shpat_xxxxx',

  // Optional: Custom error message for invalid selections
  invalidVariantMessage: 'This combination is not available. Please choose different options.',
}

Use Cases

Apparel Stores

Perfect for clothing stores with size, color, and style options:

  • Customers see all sizes and colors as visual cards
  • Price differences shown for premium colors or sizes
  • Invalid combinations automatically disabled
  • Easy to browse all options

Electronics Stores

Great for products with multiple configurations:

  • Memory, storage, and color options as cards
  • Price increases clearly displayed (+$200 for 512GB)
  • Prevent selecting incompatible configurations
  • Professional, Apple-like interface

Custom Products

Ideal for products with many customization options:

  • Material, size, finish options as cards
  • Real-time price calculation
  • Visual representation of choices
  • Simplified decision-making

Customer Experience

Desktop Experience

  1. Customer lands on product page
  2. Sees all options displayed as cards
  3. Clicks first option (e.g., "Color: Blue")
  4. Sees price difference: "+$10"
  5. Clicks second option (e.g., "Size: Large")
  6. Widget validates combination and updates price
  7. "Add to Cart" button activates if valid

Mobile Experience

The card interface is particularly effective on mobile:

  • Large, touch-friendly cards
  • Easy to tap and select
  • No awkward dropdown menus
  • Smooth, native feel

Accessibility

Full keyboard navigation support:

  • Tab through options
  • Arrow keys to navigate cards
  • Enter/Space to select
  • Screen reader compatible

Price Display

Price Differences

Shows how each option affects the total price:

Standard Size: $99.99
Large Size: +$10.00 ($109.99)
XL Size: +$15.00 ($114.99)

Base Price Updates

As customers select options, the main product price updates automatically to reflect their choices.

Invalid Combinations

The widget automatically prevents invalid variant combinations:

Example: If "Red T-Shirt in Size XL" doesn't exist in your Shopify product variants:

  • Selecting "Red" will gray out "Size XL"
  • Selecting "Size XL" will gray out "Red"
  • Customer can't accidentally select invalid combination

URL Updating

When customers select variant options, the URL updates automatically:

Before: /products/t-shirt
After: /products/t-shirt?variant=41234567890

Benefits:

  • Customers can bookmark specific configurations
  • Share links to exact variants via text/email
  • Browser back button works correctly
  • Better for SEO

Styling

The widget inherits your theme's styles but can be customized:

Default Styling

  • Uses your theme's fonts and colors
  • Matches your button styles
  • Responsive to screen sizes
  • Dark mode compatible

Custom Styling

Add CSS to further customize appearance:

/* Custom styles for variant cards */
.weevio-variant-card {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.weevio-variant-card.selected {
  border-color: #your-brand-color;
}

.weevio-variant-card.disabled {
  opacity: 0.5;
}

Troubleshooting

Selector Not Appearing

Check:

  • enableImprovedVariantSelection: true is set
  • storefrontAccessToken is configured and valid
  • Storefront API scopes are enabled in Shopify Custom App
  • Product has multiple variants

Price Differences Not Showing

Check:

  • Variants have different prices in Shopify
  • Price differences are configured correctly
  • No caching issues (clear browser cache)

Invalid Combinations Not Disabled

Check:

  • Storefront API token has correct permissions
  • Product variants are configured correctly in Shopify
  • Widget is receiving product data correctly

Styling Issues

Check:

  • Theme CSS may be conflicting
  • Add custom CSS to override if needed
  • Check for JavaScript errors in console

See the Troubleshooting Guide for more solutions.

Best Practices

Product Setup

  • Clear option names - Use descriptive names like "Size: Medium" not just "M"
  • Logical ordering - Put most important options first
  • Price strategy - Consider showing base price for cheapest variant
  • Variant images - Use unique images for each variant when possible

Configuration

  • Test thoroughly - Check all variant combinations work correctly
  • Mobile testing - Verify cards work well on all screen sizes
  • Error messages - Customize messages to match your brand voice
  • Performance - Monitor page load times with variant data

Customer Communication

  • Product descriptions - Explain how options affect the product
  • Size guides - Link to sizing charts if applicable
  • Tooltips - Add helpful hints for complex options

Performance Considerations

The improved variant selector is optimized for performance:

  • Lazy loading - Variant data loads only when needed
  • Caching - Storefront API responses cached locally
  • Efficient rendering - Updates only changed elements
  • Small payload - Minimal JavaScript bundle size

Typical impact:

  • Initial load: +50-100ms
  • Variant switches: <50ms
  • Works well with 250+ variants

Combining with Other Features

The improved variant selector works seamlessly with other widget features:

  • Shipping Estimates - Updates when variant changes
  • B2B Pricing - Shows customer-specific prices on cards
  • In-Stock Recommendations - Triggers when selected variant unavailable
  • Cross-Sell - Adds selected variant to cart correctly

Next Steps

Need Help?

Questions about improved variant selection?

Need Help?

For assistance, please send a message to our Support page.