Where we store a customer vehicle and how to view it

Saving the Customer’s Vehicle

Saving a customer’s selected vehicle ensures that the store can recognize and remember their choice across different sessions and interactions.

This is especially important for automotive stores where product compatibility depends on the vehicle make, model, and year.

By storing the vehicle information, you can:

• Support checkout validation – confirm that items in the cart match the saved vehicle, preventing ordering mistakes.
• Enable personalized marketing – use the stored vehicle data for recommendations, promotions, and follow-up emails.

Vehicle saving provides convenience for the customer and accuracy for the store.

---

Standard Options (work out of the box)

These options are supported natively and cover the majority of use cases:

• Klaviyo - saves the selected vehicle and garage to the customer profile, See more.
• Customer metafields – saves the selected vehicle and garage at the customer level.
• Order Notes – the selected vehicle is written into the order note as a plain text summary. This allows staff to quickly see which vehicle the customer had chosen at checkout.
• Order Items – the vehicle is also saved as line item properties (key/value pairs) on the products in the order.

Caution

By default Order Notes and Order Items works only for items added from the Product Detail Page (PDP). If the product is added from a quick-add button, cart drawer, search results, or collection page, the vehicle will not be attached unless you explicitly extend those flows to pass the vehicle data.

The stored data for Order Notes and Order Items always comes from Verify Widget (the exact vehicle the customer selected at add-to-cart time).

---

Optional Saving Options

How to add a vehicle to an order email

• Go to Settings → Notifications → Staff notifications in the Shopify admin.

• Click New order.

• Click Edit code.

• Add the following code to the code editor at the bottom. For example, place it after the Shipping address block.

  {%- if attributes.Vehicle -%}
  <table class="row">
    <tr>
      <td class="customer-info__item customer-info__item--last">
        <strong>Vehicle</strong>
        <br />
        <p>{{ attributes.Vehicle }}</p>
      </td>
    </tr>
  </table>
  {%- endif -%}

  

• Click Save.

• Now the vehicle is added to the order email.

How to add a vehicle to each product in an order email

Caution

Please note: To enable this feature, additional configuration is required. How to add a vehicle to every product in an order

• Go to Settings → Notifications → Staff notifications in the Shopify admin.

• Click New order.

• Click Edit code.

• Add the following code to the code editor in the line items processing block.

{% if line.properties.Vehicle %}
<div class="order-list__item-variant">Vehicle: {{ line.properties.Vehicle }}</div>
{% endif %}

• Click Save.
• Now customer’s vehicle appear in the order details email for each product.

How to add a vehicle to every product in an order

• Import addVehicleToCartProduct to the config.js.

import { addVehicleToCartProduct } from '../_common/shopifyCartProductVehicle.js';

• Call the addVehicleToCartProduct function on an ‘Add to Cart’ event within the InitFunc function.

  const InitFunc = () => {
    window.document.body.addEventListener('on:cart:add', (e) =>
      addVehicleToCartProduct({ variantId: e.detail?.variantId, cart: e.detail?.cart }),
    );
  };

• If the store theme does not trigger an Add to Cart event, you need to dispatch it after adding to cart from the theme code.

  window.document.body.dispatchEvent(
    new CustomEvent('on:cart:add', {
      detail: {
        // variantId: 'id of the variant that was just added to the cart',
        // cart: 'the new cart object after the variant was added (optional)',
      },
    }),
  );

• Now vehicle saved in every product in an order.

How to add a verify widget to cart page

• Add following code into cart liquid template:

{%- if cart != empty -%}
<div id="cm-cart-ymm"></div>
{%- endif -%}

• Create cartPageVerifyFitment.js and add following code:

  Caution

  The code is always a bit different because of customized icons and the presence of a requirement to handle aggressive fit.

const isCartPage = window.document.body.classList.contains('template-cart');
const cartUrls = window.Convermax.Shopify?.getCartUrls();

async function getCart() {
  return fetch(`${cartUrls.root}.js`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  }).then((response) => {
    if (!response.ok) {
      throw new Error(`Failed to get cart: ${response.status}`);
    }
    return response.json();
  });
}

async function changeCartItem(key, quantity, properties) {
  return fetch(`${cartUrls.change}.js`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },

    body: JSON.stringify({
      id: key,
      quantity,
      properties,
    }),
  }).then((response) => {
    if (!response.ok) {
      throw new Error(`Failed to change cart: ${response.status}`);
    }
    return response.json();
  });
}

const getCartProductIds = () => {
  const productIds = [];
  window.document
    .querySelectorAll('.cart-items .cart-item')
    ?.forEach((item) => productIds.push(item.getAttribute('product-id')));

  return productIds;
};

const getVerifyFitmentLabelHtml = (fits, productType) => {
  return `
    <div class="cm_vehicle-widget cm_vehicle-widget__verify-fitment cm_vehicle-widget__verify-fitment__cart">
      <div class="cm_vehicle-widget_label cm_verify-fitment cm_verify-fitment__${fits}">
        <div class="cm_verify-fitment_title">
          ${
    fits === 'aggressive'
      ? `Vehicle modifications may be required to fit your vehicle`
      : `This ${productType} ${fits === 'yes' ? 'fits' : 'does not fit'} your vehicle`
  }
        </div>
      </div>
    </div>
  `;
};

const hideCartVerifyFitmentLabels = () => {
  const productIds = getCartProductIds();

  if (productIds?.length > 0) {
    productIds.forEach((productId) => {
      window.document.getElementById(`cm_verify-fitment-label-container-${productId}`).style.display = 'none';
    });
  }
};

async function updateCartVerifyFitmentLabels(vehicle) {
  const vehicleString = `${Object.values(vehicle).join(' ')}`;

  if (vehicleString) {
    const cart = await getCart();
    if (cart?.items?.length > 0) {
      for (const item of cart.items) {
        try {
          const fits = await window.Convermax.verifyFitmentAsync(item.product_id.toString(), vehicle);

          if (fits === 'yes' || fits === 'no' || fits === 'aggressive') {
            const containerElem = window.document.getElementById(
              `cm_verify-fitment-label-container-${item.product_id}`,
            );

            if (containerElem) {
              const productType = containerElem.getAttribute('product-type');
              const verifyFitmentLabel = getVerifyFitmentLabelHtml(fits, productType);
              containerElem.innerHTML = verifyFitmentLabel;
              containerElem.style.display = 'block';
              item.properties['Verify Message'] = `${
                fits === 'aggressive'
                  ? `Vehicle modifications may be required to fit your ${vehicleString}`
                  : `This ${productType} ${fits === 'yes' ? 'fits' : 'does not fit'} your ${vehicleString}`
              }`;
            }
          }
        } catch {
          item.properties['Verify Message'] = 'Failed verify vehicle';
          hideCartVerifyFitmentLabels();
        }

        item.properties.Vehicle = vehicleString;
        await changeCartItem(item.key, item.quantity, item.properties);
      }
    }
  }
}

export async function onVehicleDiscarded() {
  if (isCartPage) {
    hideCartVerifyFitmentLabels();

    const cart = await getCart();

    if (cart?.items?.length > 0) {
      for (const item of cart.items) {
        item.properties.Vehicle = 'Vehicle is not selected';
        item.properties['Verify Message'] = 'Failed verify vehicle';

        await changeCartItem(item.key, item.properties);
      }
    }
  }
}

export const onVehicleSelected = (vehicle) => {
  if (isCartPage && Object.keys(vehicle).length > 0) {
    updateCartVerifyFitmentLabels(vehicle);
  }
};

export const AfterInit = () => {
  const vehicle = window.Convermax.getVehicle();

  if (isCartPage && Object.keys(vehicle).length > 0) {
    updateCartVerifyFitmentLabels(vehicle);
  }
};

• Add this following code into config.js

import {
  onVehicleSelected as cartVerifyOnVehicleSelected,
  onVehicleDiscarded as cartVerifyOnVehicleDiscarded,
  AfterInit as cartVerifyAfterInit,
} from './cartPageVerifyFitment.js';

const onVehicleSelected = (vehicle) => {
  cartVerifyOnVehicleSelected(vehicle);
};

const onVehicleDiscarded = () => {
  cartVerifyOnVehicleDiscarded();
};

const AfterInit = () => {
  cartVerifyAfterInit();
};

export default {
  includes: ['shopify-generic'],
  ...shopifyGenericDefaults,
  AfterInit,
  ...
  fitmentSearch: {
    ...shopifyGenericDefaults.fitmentSearch,
    onVehicleSelected,
    onVehicleDiscarded,
  },
  ...
  Widgets: [
  ...shopifyGenericDefaults.Widgets,
      {
      name: 'HeaderVehicleWidget_cart',
      type: 'VehicleWidget',
      location: '#cm-cart-ymm',
      template: 'fitmentSearch/cartVehicleWidget',
      isAlwaysActive: false,
      doNotRedirectOnVehicleSelect: true,
      initCollapsed: true,
    },
  ],

• Create fitmentSearch/cartVehicleWidget.rt and add following code

<div class="cm_vehicle-widget cm_vehicle-widget__cart">
  <div class="cm_vehicle-widget_title{this.isVehicleSelected ? ' selected' : ''}">
    <span class="cm_vehicle-widget_title-label">Your Vehicle</span>
    <span rt-if="this.isVehicleSelected" class="cm_vehicle-widget_title-vehicle">{{vehicleString}}</span>
  </div>
  <div class="cm_vehicle-widget_subtitle" onClick="{{toggleCollapsed}}">
    <rt-virtual rt-if="!this.isVehicleSelected">
      <rt-virtual rt-if="this.collapsed">Click here to select</rt-virtual>
      <rt-virtual rt-if="!this.collapsed">Select</rt-virtual> your vehicle to check product compatibility
    </rt-virtual>
    <rt-virtual rt-if="this.isVehicleSelected">Click here to change</rt-virtual>
  </div>
  <div class="cm_collapsible-elem">
    <div class="cm_vehicle-widget_dropdowns">
      <div class="cm_vehicle-widget_body">
        <cmRepeater:selects
          class="cm_vehicle-widget_select-container SELECTS_CONTAINER_CLASS"
          template="Select"
        />
        <div
          class="cm_vehicle-widget_confirm"
          onClick="{{ selectVehicle }}"
          disabled="{!this.allowToSetVehicle}"
        >
          Confirm
        </div>
      </div>
    </div>
  </div>
</div>

• Ensure that the verify widget is displayed on the shopping cart page and is functioning correctly