Shopify Variant Selector with Images

Shopify Variant Selector with Images

A dynamic variant selector that updates product images, price, and availability when customers select different options.

{% comment %}
  Product Variant Selector
  Add this to your product template
{% endcomment %}

<div class="product-variants" data-product='{{ product | json | escape }}'>
  {% unless product.has_only_default_variant %}
    <div class="variant-selectors">
      {% for option in product.options_with_values %}
        <div class="variant-option">
          <label for="option-{{ forloop.index0 }}">
            {{ option.name }}
          </label>

          <select
            id="option-{{ forloop.index0 }}"
            name="option{{ forloop.index }}"
            class="variant-select"
            data-option-index="{{ forloop.index0 }}"
          >
            {% for value in option.values %}
              <option
                value="{{ value | escape }}"
                {% if option.selected_value == value %}selected{% endif %}
              >
                {{ value }}
              </option>
            {% endfor %}
          </select>
        </div>
      {% endfor %}
    </div>
  {% endunless %}

  {%- assign current_variant = product.selected_or_first_available_variant -%}

  <div class="product-info">
    <div class="product-price" data-price>
      {% if current_variant.compare_at_price > current_variant.price %}
        <span class="price-compare">{{ current_variant.compare_at_price | money }}</span>
        <span class="price-sale">{{ current_variant.price | money }}</span>
        <span class="price-badge">Save {{ current_variant.compare_at_price | minus: current_variant.price | money }}</span>
      {% else %}
        <span class="price">{{ current_variant.price | money }}</span>
      {% endif %}
    </div>

    <div class="product-availability" data-availability>
      {% if current_variant.available %}
        <span class="in-stock">In Stock</span>
      {% else %}
        <span class="out-of-stock">Out of Stock</span>
      {% endif %}
    </div>
  </div>

  <input type="hidden" name="id" data-variant-id value="{{ current_variant.id }}">
</div>

<script>
class VariantSelector {
  constructor(element) {
    this.element = element;
    this.productData = JSON.parse(element.dataset.product);
    this.selects = element.querySelectorAll('.variant-select');
    this.priceElement = element.querySelector('[data-price]');
    this.availabilityElement = element.querySelector('[data-availability]');
    this.variantIdInput = element.querySelector('[data-variant-id]');

    this.init();
  }

  init() {
    this.selects.forEach(select => {
      select.addEventListener('change', () => this.onVariantChange());
    });
  }

  onVariantChange() {
    const selectedOptions = Array.from(this.selects).map(select => select.value);
    const variant = this.getVariantFromOptions(selectedOptions);

    if (variant) {
      this.updatePrice(variant);
      this.updateAvailability(variant);
      this.updateImage(variant);
      this.updateURL(variant);
      this.variantIdInput.value = variant.id;

      // Dispatch custom event
      this.element.dispatchEvent(new CustomEvent('variant:changed', {
        detail: { variant }
      }));
    }
  }

  getVariantFromOptions(options) {
    return this.productData.variants.find(variant => {
      return variant.options.every((option, index) => {
        return options[index] === option;
      });
    });
  }

  updatePrice(variant) {
    let priceHTML = '';

    if (variant.compare_at_price && variant.compare_at_price > variant.price) {
      const savings = variant.compare_at_price - variant.price;
      priceHTML = `
        <span class="price-compare">${this.formatMoney(variant.compare_at_price)}</span>
        <span class="price-sale">${this.formatMoney(variant.price)}</span>
        <span class="price-badge">Save ${this.formatMoney(savings)}</span>
      `;
    } else {
      priceHTML = `<span class="price">${this.formatMoney(variant.price)}</span>`;
    }

    this.priceElement.innerHTML = priceHTML;
  }

  updateAvailability(variant) {
    const availableHTML = variant.available
      ? '<span class="in-stock">In Stock</span>'
      : '<span class="out-of-stock">Out of Stock</span>';

    this.availabilityElement.innerHTML = availableHTML;
  }

  updateImage(variant) {
    if (!variant.featured_image) return;

    const productImage = document.querySelector('.product-image img');
    if (productImage) {
      productImage.src = variant.featured_image.src;
      productImage.alt = variant.featured_image.alt || variant.name;
    }
  }

  updateURL(variant) {
    if (!window.history.replaceState) return;

    const url = new URL(window.location.href);
    url.searchParams.set('variant', variant.id);
    window.history.replaceState({}, '', url.toString());
  }

  formatMoney(cents) {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: '{{ shop.currency }}'
    }).format(cents / 100);
  }
}

// Initialize
document.addEventListener('DOMContentLoaded', () => {
  const variantSelector = document.querySelector('.product-variants');
  if (variantSelector) {
    new VariantSelector(variantSelector);
  }
});
</script>

Styling

.variant-selectors {
  margin-bottom: 20px;
}

.variant-option {
  margin-bottom: 15px;
}

.variant-option label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}

.variant-select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  background: white;
  cursor: pointer;
  transition: border-color 0.3s;
}

.variant-select:hover {
  border-color: #999;
}

.variant-select:focus {
  outline: none;
  border-color: #000;
}

.product-price {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 700;
}

.price-compare {
  text-decoration: line-through;
  color: #999;
  font-size: 20px;
}

.price-sale {
  color: #e53935;
}

.price-badge {
  background: #e53935;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}

.product-availability {
  margin-bottom: 20px;
}

.in-stock {
  color: #10b981;
  font-weight: 600;
}

.out-of-stock {
  color: #ef4444;
  font-weight: 600;
}

Features

• Real-time Updates: Price, availability, and images update instantly
• URL Updates: Variant changes update the URL for sharing
• Custom Events: Dispatches events for integration with other scripts
• Progressive Enhancement: Works with or without JavaScript
• Mobile Friendly: Responsive design with touch-friendly selectors

Alternative: Swatch Variant Selector

For color/image swatches instead of dropdowns:

<div class="variant-swatches">
  {% for option in product.options_with_values %}
    {% if option.name == 'Color' %}
      <div class="swatch-group">
        <label>{{ option.name }}</label>
        <div class="swatches">
          {% for value in option.values %}
            <button
              type="button"
              class="swatch {% if option.selected_value == value %}active{% endif %}"
              data-value="{{ value | escape }}"
            >
              {{ value }}
            </button>
          {% endfor %}
        </div>
      </div>
    {% endif %}
  {% endfor %}
</div>