/** Shopify CDN: Minification failed

Line 798:6 Unexpected "9"
Line 857:1 Expected identifier but found "%"
Line 863:0 Unexpected "{"
Line 863:1 Expected identifier but found "%"
Line 865:0 Unexpected "{"
Line 865:1 Expected identifier but found "%"
Line 867:0 Unexpected "{"
Line 867:1 Expected identifier but found "%"
Line 868:2 Unexpected "{"
Line 868:3 Expected identifier but found "%"
... and 235 more hidden warnings

**/
/* MDK Company Store */

/* Desktop category grid */
.mdk-category-track {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}

.mdk-category-card {
  width: 100% !important;
  height: 260px !important;
  overflow: hidden !important;
}

.mdk-category-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Category arrows */
.mdk-category-carousel {
  position: relative !important;
}

.mdk-category-arrow {
  display: none !important;
}

/* Mobile */
@media screen and (max-width: 749px) {
  .mdk-category-carousel {
    width: 340px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .mdk-category-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .mdk-category-track::-webkit-scrollbar {
    display: none !important;
  }

  .mdk-category-track .mdk-category-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 340px !important;
    height: 340px !important;
    margin: 0 !important;
    scroll-snap-align: center !important;
  }

  .mdk-category-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 42px !important;
    height: 42px !important;
    border: none !important;
    border-radius: 999px !important;
    background: #df9898 !important;
    color: white !important;
    font-size: 30px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 50 !important;
  }

  .mdk-category-arrow-left {
    left: 8px !important;
  }

  .mdk-category-arrow-right {
    right: 8px !important;
  }

  .company-store-card.mdk-product-card-v3 {
    max-width: 340px !important;
    margin: 0 auto !important;
  }

  .company-store-card.mdk-product-card-v3 .company-store-card-media-wrap {
    height: 340px !important;
  }

  .company-store-card.mdk-product-card-v3 .company-store-card-media-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }
}
/* Quick Add spacing */
.company-store-quick-add-form .mdk-customizer-label {
  margin-bottom: 8px;
}

.company-store-quick-add-form .mdk-customizer-input {
  margin-bottom: 20px;
}

.company-store-quick-add-form .company-store-card-button {
  margin-top: 8px;
}
.mdk-inline-customizer {
  display: none !important;
}

.mdk-inline-customizer.is-open {
  display: block !important;
}

.mdk-toggle-customizer.is-hidden {
  display: none !important;
}
.mdk-toggle-customizer.mdk-button-hidden {
  display: none !important;
}
/* Keep the original Company Store customizer hidden inside product cards */
.company-store-card > .mdk-card-actions .mdk-inline-customizer,
.company-store-card .mdk-inline-customizer {
  display: none !important;
}

/* Show only the cloned customizer inside the popup */
#MDKCustomizerOverlay
.mdk-customizer-popup-content
.mdk-inline-customizer {
  display: grid !important;
}
/* =========================================================
   MDK COMPANY STORE GROWTH ENGINE
========================================================= */

.mdk-growth-engine {
  display: grid;
  gap: 16px;
  margin: 16px;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  background: #ffffff;
}

.mdk-growth-engine__header small {
  display: block;
  color: #df9898;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mdk-growth-progress {
  position: relative;
  width: 100%;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #eeeeee;
}

.mdk-growth-progress__fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #df9898;
  transition: width 0.3s ease;
}

.mdk-growth-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mdk-growth-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  background: #fafafa;
  text-align: center;
}

.mdk-growth-status span {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.mdk-growth-status.is-complete {
  border-color: rgba(223, 152, 152, 0.6);
  background: rgba(223, 152, 152, 0.14);
}

.mdk-growth-status.is-complete span {
  color: #222222;
}

.mdk-growth-status--optional {
  border-style: dashed;
}

.mdk-growth-quantity {
  display: grid;
  gap: 12px;
  padding-top: 4px;
}

.mdk-growth-quantity__heading {
  display: grid;
  gap: 3px;
}

.mdk-growth-quantity__heading strong {
  font-size: 15px;
}

.mdk-growth-quantity__heading small {
  color: #747474;
  font-size: 12px;
}

.mdk-growth-quantity__buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mdk-growth-quantity__buttons button {
  min-height: 48px;
  border: 1px solid #df9898;
  border-radius: 999px;
  background: #ffffff;
  color: #222222;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.mdk-growth-quantity__buttons button:hover {
  background: #df9898;
  color: #ffffff;
  transform: translateY(-1px);
}

.mdk-growth-message {
  min-height: 18px;
  margin: 0;
  color: #555555;
  font-size: 12px;
  text-align: center;
}

.mdk-growth-message:empty {
  display: none;
}

.mdk-growth-essentials-button {
  width: 100%;
  min-height: 52px;
  padding: 12px 18px;
  border: 0;
  border-radius: 12px;
  background: #df9898;
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

.mdk-growth-essentials-button:hover {
  filter: brightness(0.96);
}

.mdk-growth-essentials-button.is-complete,
.mdk-growth-essentials-button:disabled {
  opacity: 0.65;
  cursor: default;
}

/* Mobile drawer */
@media screen and (max-width: 749px) {
  .mdk-growth-engine {
    gap: 14px;
    margin: 12px;
    padding: 16px;
    border-radius: 16px;
  }

  .mdk-growth-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .mdk-growth-status {
    min-height: 44px;
    padding: 9px 8px;
  }

  .mdk-growth-status span {
    font-size: 12px;
  }

  .mdk-growth-quantity__buttons {
    gap: 8px;
  }

  .mdk-growth-quantity__buttons button {
    min-height: 46px;
  }

  .mdk-growth-essentials-button {
    min-height: 50px;
  }
}

/* Very narrow phones */
@media screen and (max-width: 390px) {
  .mdk-growth-status-grid {
    grid-template-columns: 1fr;
  }
}
.mdk-growth-essentials-button {
  border: 1px solid #df9898 !important;
  background: #ffffff !important;
  color: #222222 !important;
}

.mdk-growth-essentials-button:hover {
  background: rgba(223, 152, 152, 0.14) !important;
}

.mdk-growth-essentials-button.is-complete,
.mdk-growth-essentials-button:disabled {
  border-color: #dddddd !important;
  background: #f5f5f5 !important;
  color: #777777 !important;
}

/* =========================================
   DASHBOARD COLLAPSIBLE SECTIONS
========================================= */

.mdk-dashboard-fold {
  overflow: hidden;
}

.mdk-dashboard-fold-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  cursor: pointer;
  list-style: none;
}

.mdk-dashboard-fold-summary::-webkit-details-marker {
  display: none;
}

.mdk-dashboard-fold-summary::marker {
  display: none;
  content: "";
}

.mdk-dashboard-fold-summary h2 {
  margin: 2px 0 0;
}

.mdk-dashboard-fold-summary p {
  margin: 6px 0 0;
}

.mdk-dashboard-fold-arrow {
  flex: 0 0 auto;
  font-size: 24px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.mdk-dashboard-fold[open] .mdk-dashboard-fold-arrow {
  transform: rotate(180deg);
}

.mdk-dashboard-fold-content {
  padding: 0 24px 24px;
}

.mdk-dashboard-fold:not([open]) {
  min-height: 0;
}

/* Prevent the old section heading spacing from adding height */
.mdk-dashboard-fold .mdk-box-heading {
  margin: 0;
}

/* Mobile */
@media screen and (max-width: 749px) {
  .mdk-dashboard-fold-summary {
    padding: 18px;
    gap: 12px;
  }

  .mdk-dashboard-fold-content {
    padding: 0 18px 18px;
  }

  .mdk-dashboard-fold-summary h2 {
    font-size: 20px;
  }

  .mdk-dashboard-fold-arrow {
    font-size: 20px;
  }
}

/* MDK COLLAPSIBLE DASHBOARD */

.mdk-dashboard-fold-summary::-webkit-details-marker {
  display: none;
}

.mdk-dashboard-fold-summary::marker {
  content: "";
}

.mdk-dashboard-fold {
  overflow: hidden;
}

.mdk-dashboard-fold-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}

.mdk-dashboard-fold-summary:hover {
  background: #f7f7f7;
}

.mdk-dashboard-fold-summary:active {
  background: #efefef;
}

.mdk-dashboard-fold-summary h2 {
  margin: 5px 0 0;
  font-size: 18px;
  line-height: 1.35;
}

.mdk-fold-hint {
  display: block;
  margin-top: 7px;
  color: #777;
  font-size: 12px;
  font-weight: 600;
}

.mdk-dashboard-fold-arrow {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.mdk-dashboard-fold[open] .mdk-dashboard-fold-arrow {
  transform: rotate(225deg);
}

.mdk-dashboard-fold[open] .mdk-dashboard-fold-summary {
  border-bottom: 1px solid #ececec;
}

.mdk-dashboard-fold[open] .mdk-fold-hint {
  font-size: 0;
}

.mdk-dashboard-fold[open] .mdk-fold-hint::after {
  content: "Click to close";
  font-size: 12px;
}

.mdk-dashboard-fold-content {
  padding: 22px;
}

@media screen and (max-width: 749px) {
  .mdk-dashboard-fold-summary {
    padding: 18px;
  }

  .mdk-dashboard-fold-summary h2 {
    font-size: 16px;
  }

  .mdk-dashboard-fold-content {
    padding: 18px;
  }
}

.mdk-fold-hint {
  display: block;
  margin-top: 5px;
  color: #777;
  font-size: 12px;
  font-weight: 500;
}

.mdk-dashboard-fold-summary {
  cursor: pointer;
}

.mdk-dashboard-fold-summary:hover {
  background: #f8f8f8;
}/* COMPACT ACTION CENTER */

.mdk-action-center--compact {
  padding: 22px;
}

.mdk-action-center-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.mdk-action-center-header h2 {
  margin: 4px 0 0;
}

.mdk-action-center-status {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border: 1px solid #ececec;
  border-radius: 12px;
  background: #fafafa;
}

.mdk-action-status-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-weight: 700;
}

.mdk-action-center-status strong {
  display: block;
  margin-bottom: 4px;
}

.mdk-action-center-status p {
  margin: 0;
  color: #666;
}

@media screen and (max-width: 749px) {
  .mdk-action-center-header {
    align-items: stretch;
    flex-direction: column;
  }

  .mdk-action-center-header .mdk-btn {
    width: 100%;
  }
}


/* =========================================================
   MDK REQUEST CENTER — MOBILE FIX
========================================================= */

@media screen and (max-width: 749px) {
  .mdk-request-modal {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .mdk-request-modal-dialog {
    width: 100% !important;
    max-width: none !important;
    max-height: 94dvh !important;
    margin: 0 !important;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: 20px 20px 0 0 !important;
    box-sizing: border-box !important;
  }

  .mdk-request-modal-header {
    position: relative !important;
    display: block !important;
    margin-bottom: 18px !important;
    padding-right: 48px !important;
  }

  .mdk-request-modal-header h2 {
    margin: 3px 0 6px !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
  }

  .mdk-request-modal-header p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .mdk-request-modal-close {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    font-size: 26px !important;
    line-height: 1 !important;
  }

  .mdk-request-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .mdk-request-field {
    width: 100% !important;
    min-width: 0 !important;
  }

  .mdk-request-field input,
  .mdk-request-field select,
  .mdk-request-field textarea {
    width: 100% !important;
    min-height: 48px !important;
    padding: 13px 14px !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  .mdk-request-field textarea {
    min-height: 130px !important;
  }

  .mdk-request-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 18px !important;
  }

  .mdk-request-actions .mdk-btn,
  .mdk-request-form > .mdk-btn {
    width: 100% !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 13px 16px !important;
  }

  body:has(.mdk-request-modal:not([hidden])) {
    overflow: hidden;
  }
}

/* =========================================================
   MDK CUSTOMIZER — CENTERED MOBILE POPUP
========================================================= */

@media screen and (max-width: 749px) {
  .mdk-customizer-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
  }

  .mdk-customizer-popup {
    width: 100% !important;
    max-width: 460px !important;
    max-height: calc(100dvh - 36px) !important;
    margin: 0 !important;
    padding: 20px !important;
    overflow-y: auto !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }
}

ChatGPT Plus

































Today 9:59 AM
image(268).png
image(269).png
lets talk company store clean up. He was able to type his name but didnt select a font so hew wasnt charged. So we need it to say add name or or if the name is yyped it is chraging. on mobile the customizatrion is popes up from the bottom. i lie thatbut maybe lets put it inthe center

Today 12:02 PM

Pasted code(10).css
File

Pasted code (2)(5).js
JavaScript


Pasted code(11).css
File
what do i change here? 

You’re right. The JavaScript change only handled the charge. It did not change the actual customizer layout.

The text, dropdown options, and which fields are visible are being controlled by the Company Store product-card Liquid/snippet, not this CSS or JavaScript.

We need to change the form itself so it works like this:

Add a name (+$6 per item)
[ checkbox ]

Name
[ Enter name ]

Font
[ Select a font ]

Preview
Then:

Name, font, and preview stay hidden until “Add a name” is checked.

The first font option says Select a font.

“Select a font” has no value and cannot be submitted as a real font.

Removing the name clears the font and hides the personalization fields.

The $6 charge is based on the checkbox and valid name, not the font.

The code controlling this is probably inside:

company-store-product-card.liquid
or wherever this appears:

properties[Custom Name]
properties[Font]
mdk-name-preview-input
mdk-font-select
mdk-font-preview
Upload or paste that Liquid/snippet file next. That is the file we need to replace before changing more JavaScript.


{% assign clean_title = product.title
  | replace: ' (Business)', ''
  | replace: '(Business)', ''
  | replace: '-', ' '
%}

{% assign is_hat_1 = false %}

{% assign hat_1_product = page.metafields.custom.hat_1_product.value %}

{% if hat_1_product != blank and hat_1_product.id == product.id %}
  {% assign is_hat_1 = true %}
{% endif %}

{% assign black_mockup = blank %}
{% assign khaki_mockup = blank %}
{% assign navy_mockup = blank %}
{% assign charcoal_mockup = blank %}
{% assign white_mockup = blank %}

{% if is_hat_1 %}
  {% assign black_mockup = page.metafields.custom.hat_1_black_image.value %}
  {% assign khaki_mockup = page.metafields.custom.hat_1_khaki_image.value %}
  {% assign navy_mockup = page.metafields.custom.hat_1_navy_image.value %}
  {% assign charcoal_mockup = page.metafields.custom.hat_1_gray_image.value %}
  {% assign white_mockup = page.metafields.custom.hat_1_white_image.value %}
{% endif %}

<div
  class="company-store-card mdk-product-card-v3"
  data-mdk-product-card
  data-product-id="{{ product.id }}"
  data-mdk-company-color-images="{% if is_hat_1 %}true{% else %}false{% endif %}"
>

  <div class="company-store-card-media-wrap">
    <a href="{{ product.url }}?return_to={{ store_url | url_encode }}&return_label={{ back_label | url_encode }}&company={{ company_name | url_encode }}&store={{ store_url | url_encode }}&store_name={{ company_name | url_encode }}">

      {% if image != blank %}
        <img
          class="mdk-product-card-image"
          src="{{ image | image_url: width: 900 }}"
          alt="{{ clean_title | escape }}"
          loading="lazy"
        >

      {% elsif black_mockup != blank %}
        <img
          class="mdk-product-card-image"
          src="{{ black_mockup | image_url: width: 900 }}"
          alt="{{ clean_title | escape }}"
          loading="lazy"
        >

      {% elsif product.featured_image %}
        <img
          class="mdk-product-card-image"
          src="{{ product.featured_image | image_url: width: 900 }}"
          alt="{{ clean_title | escape }}"
          loading="lazy"
        >
      {% endif %}

    </a>
  </div>

  <div class="mdk-product-card-body">

    <h3 class="company-store-card-title">
      {{ display_name | default: clean_title }}
    </h3>

    <div class="company-store-card-price">
      {% if product.price_varies %}
        From {{ product.price_min | money }}
      {% else %}
        {{ product.price | money }}
      {% endif %}
    </div>

    <div class="mdk-card-meta-row">
      {% if product.available %}
        <span class="company-store-stock company-store-stock--in">
          ● In Stock
        </span>
      {% else %}
        <span class="company-store-stock company-store-stock--out">
          ● Sold Out
        </span>
      {% endif %}
    </div>

    <div class="mdk-card-actions">
      {% render 'company-store-buttons',
        product: product,
        company_name: company_name,
        store_url: store_url,
        back_label: back_label,
        image: image,
        store_type: store_type,
        is_hat_1: is_hat_1,
        black_mockup: black_mockup,
        khaki_mockup: khaki_mockup,
        navy_mockup: navy_mockup,
        charcoal_mockup: charcoal_mockup,
        white_mockup: white_mockup
      %}
    </div>

  </div>

  <script type="application/json" data-mdk-variant-images>
    {
      {% for variant in product.variants %}

        {% assign variant_title_lower = variant.title | downcase %}
        {% assign variant_mockup = blank %}

        {% if is_hat_1 %}

          {% if variant_title_lower contains 'gray'
  or variant_title_lower contains 'grey'
  or variant_title_lower contains 'charcoal'
%}
  {% assign variant_mockup = charcoal_mockup %}

{% elsif variant_title_lower contains 'khaki' %}
  {% assign variant_mockup = khaki_mockup %}

{% elsif variant_title_lower contains 'navy' %}
  {% assign variant_mockup = navy_mockup %}

{% elsif variant_title_lower contains 'black' %}
  {% assign variant_mockup = black_mockup %}

{% elsif variant_title_lower contains 'white' %}
  {% assign variant_mockup = white_mockup %}
{% endif %}

        {% endif %}

        "{{ variant.id }}": {
          "image":
            {% if variant_mockup != blank %}
              {{ variant_mockup | image_url: width: 900 | json }}
            {% elsif variant.featured_image %}
              {{ variant.featured_image | image_url: width: 900 | json }}
            {% else %}
              null
            {% endif %},
          "price": {{ variant.price | json }},
          "available": {{ variant.available | json }}
        }{% unless forloop.last %},{% endunless %}

      {% endfor %}
    }
  </script>

</div>

This file is only the product card wrapper. The actual name and font fields are inside this rendered snippet:

{% render 'company-store-buttons',
So do not change this file.

Open:

snippets/company-store-buttons.liquid
Then find the section containing any of these:

properties[Custom Name]
properties[Font]
mdk-name-preview-input
mdk-font-select
That is the file controlling:

The default font option

The name field

The font dropdown

The preview

The Add to Cart button

Whether those fields are hidden

Paste that snippet next, and I’ll give you the exact replacement block.


{% assign is_bulk_store = false %}

{% if store_type == 'bulk' %}
  {% assign is_bulk_store = true %}
{% endif %}

{% if product.available %}

  {% if product.tags contains 'quick-add' %}

    <form class="company-store-quick-add-form mdk-true-quick-add">

      {% assign available_variant_count = 0 %}

      {% for variant in product.variants %}
        {% if variant.available %}
          {% assign available_variant_count = available_variant_count | plus: 1 %}
        {% endif %}
      {% endfor %}

      {% if available_variant_count > 1 %}

        {% assign quick_option_label = product.options.first | default: 'Option' %}

        <label class="mdk-customizer-label">
          {{ quick_option_label }}
        </label>

        <select
          name="id"
          class="mdk-customizer-input mdk-variant-selector"
        >
          {% for variant in product.variants %}
            {% if variant.available %}
              <option
                value="{{ variant.id }}"
                {% unless is_hat_1 %}
  {% if variant.featured_image %}
    data-image-url="{{ variant.featured_image | image_url: width: 900 }}"
  {% endif %}
{% endunless %}
              >
                {{ variant.title }}
              </option>
            {% endif %}
          {% endfor %}
        </select>

      {% else %}

        {% assign selected_variant = product.selected_or_first_available_variant %}

        <input
          type="hidden"
          name="id"
          value="{{ selected_variant.id }}"
        >

      {% endif %}

      {% if is_bulk_store %}
        <input type="hidden" name="quantity" value="24">
        <input type="hidden" name="properties[Order Type]" value="Bulk Production">
        <input type="hidden" name="properties[Minimum Quantity]" value="24">
      {% else %}
        <input type="hidden" name="quantity" value="1">
      {% endif %}

      <input
        type="hidden"
        name="properties[_Company]"
        value="{{ company_name }}"
      >

      <input
        type="hidden"
        name="properties[_Store]"
        value="{{ store_url }}"
      >

      <input
        type="hidden"
        name="properties[_Store Name]"
        value="{{ company_name }}"
      >

      <input
        type="hidden"
        name="properties[_Mockup Image]"
        value="{{ image | image_url: width: 300 }}"
        data-mdk-mockup-image
      >

      <button
        type="submit"
        class="button company-store-card-button"
      >
        Add to Cart
      </button>

    </form>

  {% else %}

    <button
      type="button"
      class="button company-store-card-button mdk-popup-customizer-trigger"
    >
      Kustomize
    </button>

    <form class="company-store-customizer-form mdk-inline-customizer">

      {% assign option_label = product.options.first | default: 'Option' %}

      {% if product.tags contains 'option-color' %}
        {% assign option_label = 'Color' %}
      {% elsif product.tags contains 'option-style' %}
        {% assign option_label = 'Style' %}
      {% elsif product.tags contains 'option-finish' %}
        {% assign option_label = 'Finish' %}
      {% endif %}

      {% if product.variants.size > 1 %}

        <label class="mdk-customizer-label">
          {{ option_label }}
        </label>

        <select
          name="id"
          class="mdk-customizer-input mdk-variant-selector"
        >
          {% for variant in product.variants %}
            {% if variant.available %}
              <option
                value="{{ variant.id }}"
                {% unless is_hat_1 %}
  {% if variant.featured_image %}
    data-image-url="{{ variant.featured_image | image_url: width: 900 }}"
  {% endif %}
{% endunless %}
              >
                {{ variant.title }}
              </option>
            {% endif %}
          {% endfor %}
        </select>

      {% else %}

        <input
          type="hidden"
          name="id"
          value="{{ product.selected_or_first_available_variant.id }}"
        >

      {% endif %}

      <label class="mdk-customizer-label">
        Name
      </label>

      <input
        type="text"
        name="properties[Custom Name]"
        class="mdk-customizer-input mdk-name-preview-input"
        placeholder="Enter name"
      >

      <label class="mdk-customizer-label">
        Font
      </label>

      <select
        name="properties[Font]"
        class="mdk-customizer-input mdk-font-select"
      >
        <option value="Default" data-font="inherit">
          Default
        </option>

        <option value="Algerian" data-font="Algerian">
          Algerian
        </option>

        <option value="Amarillo" data-font="Amarillo">
          Amarillo
        </option>

        <option value="Designer" data-font="Designer">
          Designer
        </option>

        <option value="Lemon Milk" data-font="Lemon Milk">
          Lemon Milk
        </option>

        <option value="University" data-font="University">
          University
        </option>

        <option value="Dirty Lane" data-font="DirtyLane">
          Dirty Lane
        </option>

        <option value="Texas Tango" data-font="Texas Tango">
          Texas Tango
        </option>

        <option value="Muthiara" data-font="Muthiara">
          Muthiara
        </option>

        <option value="Old English" data-font="Old English">
          Old English
        </option>
      </select>

      <div
        class="mdk-font-preview"
        aria-live="polite"
      >
        Preview
      </div>

      <label class="mdk-customizer-label">
        Quantity
      </label>

      <input
        type="number"
        name="quantity"
        value="1"
        min="1"
        class="mdk-customizer-input"
      >

      <input
        type="hidden"
        name="properties[_Company]"
        value="{{ company_name }}"
      >

      <input
        type="hidden"
        name="properties[_Store]"
        value="{{ store_url }}"
      >

      <input
        type="hidden"
        name="properties[_Store Name]"
        value="{{ company_name }}"
      >

      <input
        type="hidden"
        name="properties[_Mockup Image]"
        value="{{ image | image_url: width: 300 }}"
        data-mdk-mockup-image
      >

      <input
        type="hidden"
        name="properties[Quick Customized]"
        value="Yes"
      >

      <button
        type="submit"
        class="button company-store-card-button mdk-customizer-add"
      >
        Add to Cart
      </button>

    </form>

  {% endif %}

{% else %}

  <button
    class="button company-store-card-button"
    disabled
  >
    Sold Out
  </button>

{% endif %}

Yes—this is the file controlling it.

1. Replace the current Name, Font, and Preview section
Find everything from:

<label class="mdk-customizer-label">
  Name
</label>
through:

<div
  class="mdk-font-preview"
  aria-live="polite"
>
  Preview
</div>
Replace that whole section with:

<div class="mdk-personalization-option">

  <label class="mdk-add-name-toggle">
    <input
      type="checkbox"
      class="mdk-add-name-checkbox"
    >

    <span>
      <strong>Add a Name</strong>
      <small>+$6 per item</small>
    </span>
  </label>

  <div class="mdk-personalization-fields" hidden>

    <label class="mdk-customizer-label">
      Name
    </label>

    <input
      type="text"
      name="properties[Custom Name]"
      class="mdk-customizer-input mdk-name-preview-input"
      placeholder="Enter name"
      maxlength="30"
      disabled
    >

    <label class="mdk-customizer-label">
      Font
    </label>

    <select
      name="properties[Font]"
      class="mdk-customizer-input mdk-font-select"
      disabled
    >
      <option value="" data-font="inherit" selected>
        Select a font
      </option>

      <option value="Default" data-font="inherit">
        Default
      </option>

      <option value="Algerian" data-font="Algerian">
        Algerian
      </option>

      <option value="Amarillo" data-font="Amarillo">
        Amarillo
      </option>

      <option value="Designer" data-font="Designer">
        Designer
      </option>

      <option value="Lemon Milk" data-font="Lemon Milk">
        Lemon Milk
      </option>

      <option value="University" data-font="University">
        University
      </option>

      <option value="Dirty Lane" data-font="DirtyLane">
        Dirty Lane
      </option>

      <option value="Texas Tango" data-font="Texas Tango">
        Texas Tango
      </option>

      <option value="Muthiara" data-font="Muthiara">
        Muthiara
      </option>

      <option value="Old English" data-font="Old English">
        Old English
      </option>
    </select>

    <div
      class="mdk-font-preview"
      aria-live="polite"
    >
      Preview
    </div>

  </div>

</div>
Save this snippet.

2. Add this CSS at the bottom of the Company Store CSS
/* =========================================================
   MDK NAME PERSONALIZATION
========================================================= */

.mdk-personalization-option {
  display: grid;
  gap: 14px;
}

.mdk-add-name-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid #dddddd;
  border-radius: 12px;
  background: #fafafa;
  cursor: pointer;
  box-sizing: border-box;
}

.mdk-add-name-toggle input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #df9898;
}

.mdk-add-name-toggle span {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mdk-add-name-toggle strong {
  font-size: 15px;
}

.mdk-add-name-toggle small {
  color: #666666;
  font-size: 13px;
  font-weight: 700;
}

.mdk-add-name-toggle:has(input:checked) {
  border-color: #df9898;
  background: rgba(223, 152, 152, 0.1);
}

.mdk-personalization-fields {
  display: grid;
  gap: 12px;
}

.mdk-personalization-fields[hidden] {
  display: none !important;
}
3. Add this JavaScript near the bottom of the Company Store JavaScript
Put it before this section:

/* ==========================================
   MDK Fulfillment Attributes
========================================== */
Add:

/* ==========================================
   MDK Name Personalization Toggle
========================================== */

document.body.addEventListener('change', function (event) {
  const checkbox =
    event.target.closest('.mdk-add-name-checkbox');

  if (!checkbox) return;

  const form =
    checkbox.closest('.mdk-inline-customizer');

  if (!form) return;

  const fields =
    form.querySelector('.mdk-personalization-fields');

  const nameInput =
    form.querySelector(
      '[name="properties[Custom Name]"]'
    );

  const fontSelect =
    form.querySelector(
      '[name="properties[Font]"]'
    );

  const preview =
    form.querySelector('.mdk-font-preview');

  if (checkbox.checked) {
    if (fields) {
      fields.hidden = false;
    }

    if (nameInput) {
      nameInput.disabled = false;

      setTimeout(function () {
        nameInput.focus();
      }, 50);
    }

    if (fontSelect) {
      fontSelect.disabled = false;
    }

    return;
  }

  if (fields) {
    fields.hidden = true;
  }

  if (nameInput) {
    nameInput.value = '';
    nameInput.disabled = true;
  }

  if (fontSelect) {
    fontSelect.value = '';
    fontSelect.disabled = true;
  }

  if (preview) {
    preview.textContent = 'Preview';
    preview.style.fontFamily = 'inherit';
  }
});
This will now make the popup work correctly:

It initially shows Add a Name — +$6 per item.

Name, font, and preview are hidden.

Checking it reveals everything.

Font starts at Select a font.

Unchecking it clears the name and font completely.

A hidden or removed name will no longer leave “Default” attached to the item.

/* =========================================================
   MDK PORTAL — DASHBOARD SUPPORT CTA
========================================================= */

.mdk-portal-footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;

  width: 100%;
  box-sizing: border-box;

  margin-top: 16px;
  padding: 26px 28px;

  border-radius: 14px;
  background: #1e1e1e;
  color: #fff;
}

.mdk-portal-footer-content {
  flex: 1;
  min-width: 0;
}

.mdk-portal-footer-eyebrow {
  display: block;
  margin-bottom: 5px;

  color: #df9898;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mdk-portal-footer-cta h2 {
  margin: 0 0 7px;
  color: #fff;
  font-size: 22px;
  line-height: 1.2;
}

.mdk-portal-footer-cta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  line-height: 1.5;
}

.mdk-portal-footer-details {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: 18px;
}

.mdk-portal-footer-details a {
  display: flex;
  flex-direction: column;
  color: #fff;
  text-decoration: none;
}

.mdk-portal-footer-details span {
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mdk-portal-footer-details strong {
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.mdk-portal-footer-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.mdk-portal-footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 142px;
  min-height: 40px;
  padding: 10px 16px;

  border: 0;
  border-radius: 9px;
  background: #df9898;
  color: #111;

  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.mdk-portal-footer-btn:hover {
  background: #d88787;
  color: #111;
  opacity: 1;
}

@media screen and (max-width: 800px) {
  .mdk-portal-footer-cta {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
    padding: 22px;
  }

  .mdk-portal-footer-actions {
    width: 100%;
  }

  .mdk-portal-footer-btn {
    flex: 1;
  }
}

@media screen and (max-width: 520px) {
  .mdk-portal-footer-details,
  .mdk-portal-footer-actions {
    flex-direction: column;
    width: 100%;
  }

  .mdk-portal-footer-btn {
    width: 100%;
  }
}