Variant selectors inside volume bundle

Shopify Discussion
,

Topic summary

A developer is building a custom volume bundle block for a Shopify product page but encountering issues with variant selectors not functioning properly.

Current Problem:

  • Variant selectors display on the page but dropdown options don’t appear when clicked
  • Multiple variant pickers are being rendered using the product-variant-picker snippet
  • The bundle shows tiered pricing (e.g., “Buy 3+, Save X%”) with discount calculations

Technical Context:

  • Using Shopify Liquid templating with standard component stylesheets
  • Rendering variant pickers with different picker_type parameters (swatch_dropdown)
  • Code includes volume pricing logic and discount percentage calculations

Status:
The issue remains unresolved with no responses yet. The developer has shared a product URL for reference but hasn’t received troubleshooting guidance on making the variant selectors interactive within the custom bundle implementation.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hello I’m trying to create a volume bundle block for on my product page. I currently have this HTML which displays variant selectors but does not show variant options when clicking the selector, and I want the variant selectors to work. HTML:

{{ 'section-main-product.css' | asset_url | stylesheet_tag }}
  {{ 'component-accordion.css' | asset_url | stylesheet_tag }}
  {{ 'component-price.css' | asset_url | stylesheet_tag }}
  {{ 'component-slider.css' | asset_url | stylesheet_tag }}
  {{ 'component-rating.css' | asset_url | stylesheet_tag }}
  {{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}

  {% unless product.has_only_default_variant %}
    {{ 'component-product-variant-picker.css' | asset_url | stylesheet_tag }}
    {{ 'component-swatch-input.css' | asset_url | stylesheet_tag }}
    {{ 'component-swatch.css' | asset_url | stylesheet_tag }}
  {% endunless %}
  {%- if product.quantity_price_breaks_configured? -%}
    {{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}
  {%- endif -%}
  
  
  
  {%- if product.quantity_price_breaks_configured? -%}
    
    
  {%- endif -%}
  

  ### {{ block.settings.bundle_title }}
  

{{ block.settings.bundle_description }}

{%- assign product_form_id = 'product-form-' | append: section.id -%}
  
  
  
      {% assign compare_at_price = product.compare_at_price | replace: ',', '.' | times: 1.0 %}
      {% assign price = product.price | replace: ',', '.' | times: 1.0 %}
      {% assign discount_amount = compare_at_price | minus: price %}
      {% assign discount_percentage = discount_amount | divided_by: compare_at_price | times: 100 %}

      
      {% assign compare_at_price = product.compare_at_price | replace: ',', '.' | times: 1.0 %}
      {% assign price = product.price | replace: ',', '.' | times: 1.0 %}
      {% assign additional_discount = price | times: 0.10 %}
      {% assign final_price = price | minus: additional_discount %}
      {% assign total_discount_amount = compare_at_price | minus: final_price %}
      {% assign total_discount_percentage = total_discount_amount | divided_by: compare_at_price | times: 100 %}

      
      {% assign compare_at_price = product.compare_at_price | replace: ',', '.' | times: 1.0 %}
      {% assign price = product.price | replace: ',', '.' | times: 1.0 %}
      {% assign total_original_price_for_3 = compare_at_price | times: 3 %}
      {% assign total_discounted_price_for_3 = price | times: 3 %}
      {% assign additional_discount = total_discounted_price_for_3 | times: 0.15 %}
      {% assign final_price_for_3 = total_discounted_price_for_3 | minus: additional_discount %}
      {% assign total_discount_amount = total_original_price_for_3 | minus: final_price_for_3 %}
      {% assign total_discount_percentage = total_discount_amount | divided_by: total_original_price_for_3 | times: 100 %}

      

| <br>        Buy 1 Save {{ discount_percentage | round: 0 }}%<br>        <br><br>          <br><br>Choose Variant(s)!<br><br><br>          <br>          {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id,picker_type: 'swatch_dropdown' %}<br> <br>        <br><br>       |
| - |
| <br>        Buy 2, Save {{ total_discount_percentage | round: 0 }}%<br>        <br><br>          <br><br>Choose Variant(s)!<br><br><br>          <br>          {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}<br>          {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id,picker_type: 'swatch_dropdown' %}<br> <br>        <br><br>       |
| <br>        Buy 3+, Save {{ total_discount_percentage | round: 0 }}%<br>        <br><br>          <br><br>Choose Variant(s)!<br><br><br>          {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id,picker_type: 'swatch_dropdown' %}<br>            {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}<br>           {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id,picker_type: 'swatch_dropdown' %}<br> <br>        <br><br>       |

Does anyone know how I can make the variant selectors work?

2

URL: Glow Curtain: 400 LED Lights for a Magical Ambiance – InteriorGlows