Custom variants send to cart and order invoice

Store Design
, , ,

Topic summary

A user is implementing custom variant pills (specifically “Farbe Kabel” - cable color options) on a Shopify product page but encountering an issue where these custom attributes don’t appear in the cart after adding the product.

Technical Details:

  • Modified the product-form.js file to capture the selected custom variant value
  • Code retrieves the checked input value for “Farbe Kabel” and appends it to the form data
  • The JavaScript code snippet shows the implementation attempt but appears incomplete/corrupted in parts

Current Status:

Response:
Another user suggested hiring a Shopify expert if a coding solution cannot be found independently, offering this as a fallback option for implementing the feature at a reasonable price.

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

Hi Guys,

I added some custom variant pills to my product page. However, when I add the product to the cart, it’s not displayed there. What do I need to add? I have changed the product-form.js file like that.

page is https://giubotti.com/products/luce-pendants

if (!customElements.get('product-form')) {
  customElements.define('product-form', class ProductForm extends HTMLElement {
    constructor() {
      super();

      this.form = this.querySelector('form');
      this.form.querySelector('[name=id]').disabled = false;
      this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
      this.cart = document.querySelector('cart-notification') || document.querySelector('cart-drawer');
      this.submitButton = this.querySelector('[type="submit"]');
      if (document.querySelector('cart-drawer')) this.submitButton.setAttribute('aria-haspopup', 'dialog');
    }

onSubmitHandler(evt) {
  evt.preventDefault();
  if (this.submitButton.getAttribute('aria-disabled') === 'true') return;

  this.handleErrorMessage();

  this.submitButton.setAttribute('aria-disabled', true);
  this.submitButton.classList.add('loading');
  this.querySelector('.loading-overlay__spinner').classList.remove('hidden');

  const config = fetchConfig('javascript');
  config.headers['X-Requested-With'] = 'XMLHttpRequest';
  delete config.headers['Content-Type'];

  const formData = new FormData(this.form);

  // Get the selected value of the "Farbe Kabel" attribute
  const farbeKabelInput = this.querySelector('input[name="attributes[Farbe Kabel]"]:checked');
  const farbeKabelValue = farbeKabelInput ? farbeKabelInput.value : '';

  // Add the selected value to the form data
  formData.append('attributes[Farbe Kabel]', farbeKabelValue);

  if (this.cart) {
    formData.append('sections', this.cart.getSectionsToRender().map((section) => section.id));
    formData.append('sections_url', window.location.pathname);
    this.cart.setActiveElement(document.activeElement);
  }
  config.body = formData;

  fetch(`${routes.cart_add_url}`, config)
    .then((response) => response.json())
    .then((response) => {
      if (response.status) {
        this.handleErrorMessage(response.description);

        const soldOutMessage = this.submitButton.querySelector('.sold-out-message');
        if (!soldOutMessage) return;
        this.submitButton.setAttribute('aria-disabled', true);
        this.submitButton.querySelector('span').classList.add('hidden');
        soldOutMessage.classList.remove('hidden');
        this.error = true;
        return;
      } else if (!this.cart) {
        window.location = window.routes.cart_url;
        return;
      }

      if (!this.error) publish(PUB_SUB_EVENTS.cartUpdate, {source: 'product-form'});
      this.error = false;
      const quickAddModal = this.closest('quick-add-modal');
      if (quickAddModal) {
        document.body.addEventListener('modalClosed', () => {
          setTimeout(() => { this.cart.renderContents(response) });
        }, { once: true });
        quickAddModal.hide(true);
      } else {
        this.cart.renderContents(response);
      }
    })
    .catch((e) => {
      console.error(e);
    })
    .finally(() => {
      this.submitButton.classList.remove('loading');
      if (this.cart && this.cart.classList.contains('is-empty')) this.cart.classList.remove('is-empty');
      if (!this.error) this.submitButton.removeAttribute('aria-disabled');
      this.querySelector('.loading-overlay__spinner').classList.add('hidden');
    });
}

    handleErrorMessage(errorMessage = false) {
      this.errorMessageWrapper = this.errorMessageWrapper || this.querySelector('.product-form__error-message-wrapper');
      if (!this.errorMessageWrapper) return;
      this.errorMessage = this.errorMessage || this.errorMessageWrapper.querySelector('.product-form__error-message');

      this.errorMessageWrapper.toggleAttribute('hidden', !errorMessage);

      if (errorMessage) {
        this.errorMessage.textContent = errorMessage;
      }
    }
  });
}

I added the variant radio pills as custom liquid on the product page:


  

   Baumwolle Weiß

   Baumwolle Grau

   Baumwolle Schwarz
2

Hey, @luce-by-giu

I’m not formally trained in code to provide you with an exact solution to accomplish this. However, I’m confident one of our Shopify experts would be able to accomplish this at a reasonable price.

Just wanted to share this as an option in case you are unable to find a coding solution in your thread.