Variant Picker Customization

Store Design
, ,

Topic summary

A user is customizing the Dawn theme’s variant picker to display a table showing in-stock versus special-order products. The table includes checkboxes for variant selection, but currently doesn’t trigger price and image updates when clicked.

Current Implementation:

  • Custom table created in snippets/product-variant-picker.liquid
  • Table displays product availability status
  • Checkboxes present but non-functional for variant switching

Solution Provided:
A JavaScript solution was offered that:

  • Listens for checkbox clicks and ensures only one can be selected at a time
  • Retrieves the variant ID from a data-variant-id attribute on table rows
  • Triggers Dawn’s native variant selector to update price, images, and availability
  • Requires adding data-variant-id attributes to each table row

Status: The discussion remains open, awaiting confirmation whether the proposed solution works or if paid custom development is needed. The original poster mentioned having detailed specifications available for potential custom coding quotes.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi - I am trying to customize the Variant Picker using Dawn Theme. I sell both in-stock and special order products I so have created a table that shows if the product is available for shipping or is special order. I put the code for the table in snippets/product-variant-picker.liquid.

I need to see how to create the code so that when I select the variant with the check box in the table it changes to that variant, changing the price, and image to match. Does anyone know how to do this or able to provide a cost to custom code it for me. If you want to quote on custom coding, I have more detail spec I can provide.

Screenshot 2025-03-31 at 8.35.42 AM.png
Screenshot 2025-03-31 at 8.35.42 AM.png1417×1099 134 KB

2

Hi @RollyTaskerNA ,

If you want implement that feature, we can make a discuss more detail.

The feature you want to make here are when the user click to checkbox then the images and the price will change, right?

3

Hi @RollyTaskerNA ,

Thanks for reaching out about your Dawn theme customization! I think I have a solution that should work for your variant picker table.

You’ll need to add some JavaScript to connect those checkboxes in your table to Dawn’s variant selection system. Here’s what you can try:

Add this code at the bottom of your product-variant-picker.liquid snippet:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Connect table checkboxes to the variant selector
    const variantCheckboxes = document.querySelectorAll('table input[type="checkbox"]');
    
    variantCheckboxes.forEach(checkbox => {
      checkbox.addEventListener('click', function() {
        // Uncheck other boxes when one is selected
        variantCheckboxes.forEach(cb => {
          if (cb !== this) cb.checked = false;
        });
        
        // Find the variant ID from the row
        const row = this.closest('tr');
        const variantId = row.getAttribute('data-variant-id');
        
        // Update the actual variant selector that Dawn uses
        const variantSelect = document.querySelector('select[data-product-select]');
        if (variantSelect && variantId) {
          variantSelect.value = variantId;
          variantSelect.dispatchEvent(new Event('change', { bubbles: true }));
        }
      });
    });
  });
</script>

You’ll also need to make a small change to your table rows - add the variant ID as a data attribute to each row:

<tr data-variant-id="{{ variant.id }}">
  <!-- Your existing table cells -->
</tr>

This should connect your custom table interface with Dawn’s built-in variant handling, so when someone clicks a checkbox, it’ll update the price, image, and availability information automatically.

Let me know if you run into any issues with this approach or if you need more specific help. I’m happy to look at your detailed specs if you want a more customized solution!

Cheers,

Shubham | Untechnickle