I want when variant selected the price should be updated I am using motion theme

[mehroo]

can someone help me in this code when I want that when user click on variants its price also update on mobile quick view but price is not updating can someone provide me correct solution , I will be very thankful, I need urgent help

{% style %}
.index-section.active {
  background-color: rgba(0, 0, 0, 0.5);
}

.index-section .hotspot-content__block.is-active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 768px) {
  .hotspot__button--mobile {
    display: none;
  }
}

@media (max-width: 767px) {
  .hotspot__button--desktop {
    display: none;
  }
}

.variant-button {
  display: inline-block;
  padding: 10px 15px;
  margin: 5px;
  background-color: white;
  border: 1px solid #0804047d;
  border-radius: 3px;
  cursor: pointer;
}

.index-section .hotspot-content__block .variant-button {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 5px 10px;
  background-color: white;
  border: 1px solid #0804047d;
  border-radius: 3px;
  cursor: pointer;
}

.index-section .hotspot-content__block .variant-button.selected {
  background-color: {{ section.settings.variant_selected_color }};
  color: {{ section.settings.variant_selected_text_color }};
  border-color: {{ section.settings.variant_selected_border_color }};
}

.variant-button:hover {
  background-color: #e5e5e5;
  border-color: #ccc;
}

.variant-button.selected {
  background-color: {{ section.settings.variant_selected_color }};
  color: {{ section.settings.variant_selected_text_color }};
  border-color: {{ section.settings.variant_selected_border_color }};
}

.index-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.index-section.active {
  background-color: rgba(0, 0, 0, 0.5);
}

.hotspots {
  position: relative;
  width: 100%;
}

.index-section .hotspots__image-desktop,
.index-section .hotspots__image-mobile {
  display: none;
  width: 100%;
}

.index-section .hotspots__image-desktop img,
.index-section .hotspots__image-mobile img {
  width: 100%;
  height: auto;
  display: block;
}

.index-section .hotspots__buttons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.index-section .hotspot__button {
  position: absolute;
  background-color: {{ section.settings.hotspot_color }};
  animation: pulse 2s infinite;
  cursor: pointer;
}

.index-section .hotspot__button:hover {
  {% if bgBrightness < 125 %}
    background-color: {{ section.settings.hotspot_color | color_darken: 10 }};
  {% else %}
    background-color: {{ section.settings.hotspot_color | color_lighten: 10 }};
  {% endif %}
}

.index-section .hotspot-content__block {
  display: none;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px;
  border-radius: 5px;
  max-width: 300px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
  transform: translateX(-50%);
}

.index-section .hotspot-content__block.is-active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.index-section .hotspot-content__block img {
  max-width: 50px;
  margin-right: 10px;
}

@media (max-width: 768px) {
  .index-section .hotspots__image-desktop {
    display: none;
  }
  .index-section .hotspots__image-mobile {
    display: block;
  }
  .index-section .hotspot-content__block {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
    padding: 20px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1001;
    max-width: 100%;
    box-sizing: border-box;
    backdrop-filter: blur(5px); /* Add this line for blur effect */
  }
  .index-section .hotspot-content__block.is-active {
    transform: translateX(0);
  }
  .index-section .hotspot-content__block .hotspot-product-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 0 20px;
  }
  .index-section .hotspot-content__block .hotspot-product-info img {
    width: 100%;
    max-width: 300px;
  }
  .index-section .hotspot-content__block .hotspot-product-info p {
    margin: 10px 0;
    text-align: left;
  }
  .index-section .hotspot-content__block .hotspot-product-info .btn {
    margin-top: 10px;
  }
  .index-section .hotspot-content__block .hotspot-product-info .product-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .index-section .hotspot-content__block .hotspot-product-info .product-price {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
  }
  .index-section .hotspot-content__block .product-media-slider {
    display: flex;
    overflow-x: auto;
    margin-bottom: 10px;
    width: 100%; /* Adjust width */
    border-bottom: 1px solid #ccc; /* Add line under product media */
    padding-bottom: 10px; /* Add padding for better spacing */
  }
  .index-section .hotspot-content__block .product-media-slider img {
    max-width: 70%; /* Adjust size */
    margin-right: 10px;
  }
  .index-section .hotspot-content__block .product-variants {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    height: auto; /* Adjust height */
  }
  .index-section .hotspot-content__block .quantity-selector {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }
  .index-section .hotspot-content__block .quantity-selector input {
    width: 60px;
    text-align: center;
    margin: 0 10px;
    border: 1px solid #000; /* Black border */
    background-color: #fff; /* White background */
  }
  .index-section .hotspot-content__block .form-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px;
  }
  .index-section .hotspot-content__block .form-inline .quantity-selector {
    margin-bottom: 10px;
    width: 100%;
  }
  .index-section .hotspot-content__block .form-inline .add-to-cart {
    width: 100%;
    margin-bottom: 10px;
  }
  .index-section .hotspot-content__block .form-inline .view-details {
    text-align: center;
    width: 100%;
    text-decoration: underline;
    color: #000;
    cursor: pointer;
  }
  .close-button {
    position: fixed; /* Make the close button sticky */
    top: 10px;
    right: 10px;
    font-size: 24px;
    border: none;
    background: none;
    cursor: pointer;
    z-index: 1002;
  }
}

@media (min-width: 769px) {
  .index-section .hotspots__image-desktop {
    display: block;
  }
  .index-section .hotspots__image-mobile {
    display: none;
  }
  .hotspot-content__block.is-active {
    display: flex;
    flex-direction: row; /* Change direction to row */
    align-items: flex-start; /* Adjust alignment */
    padding: 20px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
    backdrop-filter: blur(5px); /* Add this line for blur effect */
    width: 80%; /* Make content block wider */
  }
  .hotspot-content__block.is-active .hotspot-product-info {
    display: flex;
    flex-direction: row; /* Ensure the product info is in row direction */
    align-items: center;
    width: 70%; /* Adjust width */
  }
  .hotspot-content__block.is-active img {
    max-width: 65%;
    margin-right: 17px;
  }
  .hotspot-content__block.is-active .product-title {
    font-size: 20px;
    font-weight: bold;
    width: 251px;
  }
  .hotspot-content__block.is-active .product-price {
    font-size: 18px;
    color: #333;
  }
  .hotspot-content__block.is-active .product-link {
    margin-top: 10px;
  }
}

.index-section .hotspot-content__block-mobile-overlay {
  display: none; /* Hide by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75); /* Darker black transparent background */
  z-index: 1000; /* Ensure it sits above other elements */
}

.index-section .hotspot-content__block.is-active + .hotspot-content__block-mobile-overlay {
  display: block; /* Show when the quick view product is active */
}

@media (max-width: 768px) {
  .index-section .hotspot-content__block {
    z-index: 1001; /* Ensure quick view content is above the overlay */
  }
}
{% endstyle %}
{% javascript %}
document.addEventListener("DOMContentLoaded", function() {
  var desktopButtons = document.querySelectorAll('.index-section .hotspot__button--desktop');
  var mobileButtons = document.querySelectorAll('.index-section .hotspot__button--mobile');
  var contentBlocks = document.querySelectorAll('.index-section .hotspot-content__block');
  var variantButtons = document.querySelectorAll('.variant-button');
  var variantIdInputs = document.querySelectorAll('.variant-id-input');
  var closeButton = document.createElement('button');
  closeButton.innerHTML = "&times;";
  closeButton.classList.add('close-button');

  function closeAllPopups() {
    contentBlocks.forEach(function(block) {
      block.classList.remove('is-active');
    });
    document.querySelector('.index-section').classList.remove('active');
    document.querySelector('.hotspot-content__block-mobile-overlay').style.display = 'none';
    closeButton.style.display = "none";
  }

  desktopButtons.forEach(function(button) {
    button.addEventListener('click', function(event) {
      event.stopPropagation();
      var blockId = button.getAttribute('data-button');
      var targetBlock = document.querySelector('[data-hotspot-block="' + blockId + '"]');
      closeAllPopups();
      targetBlock.classList.add('is-active');
      document.querySelector('.index-section').classList.add('active');
      closeButton.style.display = "block";
    });
  });

  mobileButtons.forEach(function(button) {
    button.addEventListener('click', function(event) {
      event.stopPropagation();
      var blockId = button.getAttribute('data-button');
      var targetBlock = document.querySelector('[data-hotspot-block="' + blockId + '"]');
      closeAllPopups();
      targetBlock.classList.add('is-active');
      document.querySelector('.index-section').classList.add('active');
      document.querySelector('.hotspot-content__block-mobile-overlay').style.display = 'block';
      closeButton.style.display = "block";
    });
  });

  document.addEventListener('click', function() {
    closeAllPopups();
  });

  contentBlocks.forEach(function(block) {
    block.addEventListener('click', function(event) {
      event.stopPropagation();
    });
    block.appendChild(closeButton);
  });

  variantButtons.forEach(function(button) {
    button.addEventListener('click', function() {
      var variantId = button.getAttribute('data-variant-id');
      variantIdInputs.forEach(function(input) {
        input.value = variantId;
      });
      variantButtons.forEach(function(btn) {
        btn.classList.remove('selected');
      });
      button.classList.add('selected');

      var productInfo = button.closest('.hotspot-product-info');
      if (productInfo) {
        var jsonData = productInfo.getAttribute('data-product-json');
        if (jsonData && jsonData.trim() !== "") {
          try {
            var product = JSON.parse(jsonData);
            var selectedVariant = product.variants.find(variant => variant.id == parseInt(variantId));
            if (selectedVariant) {
              var priceElement = productInfo.querySelector('.product-price');
              if (priceElement) {
                priceElement.innerText = Shopify.formatMoney(selectedVariant.price, "{{ shop.money_format }}");
              } else {
                console.error("Price element not found.");
              }
            } else {
              console.error("Variant not found for ID:", variantId);
            }
          } catch (e) {
            console.error("Error parsing JSON:", e);
          }
        } else {
          console.error("Invalid or empty JSON data");
        }
      } else {
        console.error("Product info element not found.");
      }
    });
  });

  document.querySelectorAll('.quantity-decrease').forEach(function(button) {
    button.addEventListener('click', function() {
      var input = this.nextElementSibling;
      if (input.value > 1) {
        input.value = parseInt(input.value) - 1;
      }
    });
  });

  document.querySelectorAll('.quantity-increase').forEach(function(button) {
    button.addEventListener('click', function() {
      var input = this.previousElementSibling;
      input.value = parseInt(input.value) + 1;
    });
  });

  closeButton.addEventListener('click', function() {
    closeAllPopups();
  });

  document.body.appendChild(closeButton);
});
  document.addEventListener("DOMContentLoaded", function() {
  var variantButtons = document.querySelectorAll('.variant-button');

  variantButtons.forEach(function(button) {
    button.addEventListener('click', function() {
      var variantId = this.getAttribute('data-variant-id');
      var productInfo = this.closest('.hotspot-product-info');
      var productJson = JSON.parse(productInfo.getAttribute('data-product-json'));
      var selectedVariant = productJson.variants.find(variant => variant.id == parseInt(variantId));

      if (selectedVariant) {
        var priceElement = productInfo.querySelector('[data-product-price]');
        priceElement.innerHTML = Shopify.formatMoney(selectedVariant.price, "{{ shop.money_format }}");

        var variantIdInput = productInfo.querySelector('.variant-id-input');
        variantIdInput.value = variantId;
      }

      variantButtons.forEach(function(btn) {
        btn.classList.remove('selected');
      });
      button.classList.add('selected');
    });
  });
});

{% endjavascript %}
<div class="index-section {{ section.id }} {{ bgBrightness }}">
  {% if section.settings.title != blank %}
    <div class="page-width">
      <h2 class="hotspots__title {{ section.settings.heading_size }} text-{{ section.settings.heading_position }}">{{ section.settings.title }}</h2>
    </div>
  {% endif %}
  <hot-spots class="hotspots-wrapper">
    <div class="hotspots">
      <div class="hotspots__image hotspots__image-desktop">
        {% if section.settings.image_desktop != blank %}
          <img src="{{ section.settings.image_desktop | img_url: '2400x2400' }}" alt="Shop the look">
        {% else %}
          {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
        {% endif %}
      </div>
      <div class="hotspots__image hotspots__image-mobile">
        {% if section.settings.image_mobile != blank %}
          <img src="{{ section.settings.image_mobile | img_url: '2400x2400' }}" alt="Shop the look">
        {% else %}
          {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
        {% endif %}
      </div>

      <div class="hotspots__buttons">
        {% for block in section.blocks %}
          <button class="hotspot__button hotspot__button--desktop" data-button="{{ block.id }}-desktop" style="left: {{ block.settings.horizontal_desktop }}%; top: {{ block.settings.vertical_desktop }}%; width: {{ block.settings.icon_size }}px; height: {{ block.settings.icon_size }}px;">
            {% if block.settings.custom_icon %}
              <img src="{{ block.settings.custom_icon | img_url: '100x100' }}" alt="Custom Icon" style="width: 100%; height: 100%;" />
            {% else %}
              {% assign buttonStyle = section.settings.hotspot_style %}
              {% if buttonStyle == 'dot' %}
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-dot" viewBox="0 0 12 12">
                  <circle cx="6" cy="6" r="6" fill="currentColor" />
                </svg>
              {% elsif buttonStyle == 'plus' %}
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-plus" viewBox="0 0 20 20">
                  <path fill="#444" d="M17.409 8.929h-6.695V2.258c0-.566-.506-1.029-1.071-1.029s-1.071.463-1.071 1.029v6.671H1.967C1.401 8.929.938 9.435.938 10s.463 1.071 1.029 1.071h6.605V17.7c0 .566.506 1.029 1.071 1.029s1.071-.463 1.071-1.029v-6.629h6.695c.566 0 1.029-.506 1.029-1.071s-.463-1.071-1.029-1.071z" />
                </svg>
              {% elsif buttonStyle == 'bag' %}
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-bag" viewBox="0 0 64 64">
                  <path d="M25 26c0-15.79 3.57-20 8-20s8 4.21 8 20" />
                  <path d="M14.74 18h36.51l3.59 36.73h-43.7z" />
                </svg>
              {% elsif buttonStyle == 'tag' %}
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-tag" viewBox="0 0 64 64">
                  <path d="m46.69 10.34-10.55.07-25.8 25.8 17.45 17.45 25.8-25.8.07-10.55-6.97-6.97z" />
                  <circle cx="43.95" cy="20.05" r="3.53" />
                  <path d="M14.4 32.15 31.85 49.6" />
                </svg>
              {% endif %}
            {% endif %}
          </button>
          <button class="hotspot__button hotspot__button--mobile" data-button="{{ block.id }}-mobile" style="left: {{ block.settings.horizontal_mobile }}%; top: {{ block.settings.vertical_mobile }}%; width: {{ block.settings.icon_size }}px; height: {{ block.settings.icon_size }}px;">
            {% if block.settings.custom_icon %}
              <img src="{{ block.settings.custom_icon | img_url: '100x100' }}" alt="Custom Icon" style="width: 100%; height: 100%;" />
            {% else %}
              {% assign buttonStyle = section.settings.hotspot_style %}
              {% if buttonStyle == 'dot' %}
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-dot" viewBox="0 0 12 12">
                  <circle cx="6" cy="6" r="6" fill="currentColor" />
                </svg>
              {% elsif buttonStyle == 'plus' %}
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-plus" viewBox="0 0 20 20">
                  <path fill="#444" d="M17.409 8.929h-6.695V2.258c0-.566-.506-1.029-1.071-1.029s-1.071.463-1.071 1.029v6.671H1.967C1.401 8.929.938 9.435.938 10s.463 1.071 1.029 1.071h6.605V17.7c0 .566.506 1.029 1.071 1.029s1.071-.463 1.071-1.029v-6.629h6.695c.566 0 1.029-.506 1.029-1.071s-.463-1.071-1.029-1.071z" />
                </svg>
              {% elsif buttonStyle == 'bag' %}
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-bag" viewBox="0 0 64 64">
                  <path d="M25 26c0-15.79 3.57-20 8-20s8 4.21 8 20" />
                  <path d="M14.74 18h36.51l3.59 36.73h-43.7z" />
                </svg>
              {% elsif buttonStyle == 'tag' %}
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-tag" viewBox="0 0 64 64">
                  <path d="m46.69 10.34-10.55.07-25.8 25.8 17.45 17.45 25.8-25.8.07-10.55-6.97-6.97z" />
                  <circle cx="43.95" cy="20.05" r="3.53" />
                  <path d="M14.4 32.15 31.85 49.6" />
                </svg>
              {% endif %}
            {% endif %}
          </button>
        {% endfor %}
      </div>

      <div class="hotspots__content" data-block-container>
        {% for block in section.blocks %}
          <div class="hotspot-content__block hotspot-content__block--{{ block.id }}" data-hotspot-block="{{ block.id }}-desktop" style="left: {{ block.settings.horizontal_desktop }}%; top: {{ block.settings.vertical_desktop | plus: 5 }}%;">
            {% case block.type %}
              {% when 'product' %}
                {%- assign product = block.settings.featured_product -%}
                {% if block.settings.featured_product != blank %}
                  <div class="hotspot-product-info" data-product-json='{{ product | json }}'>
                    <img src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.title }}">
                    <div>
                      <h3 class="product-title">{{ product.title }}</h3>
                      <p class="product-price">{{ product.price | money }}</p>
                      <a href="{{ product.url }}" class="product-link">View Product Details</a>
                    </div>
                  </div>
                {% else %}
                  {% render 'onboarding-product-grid-item', i: forloop.index %}
                {% endif %}
              {% when 'paragraph' %}
                {% if block.settings.subheading != blank %}
                  <p class="subheading">{{ block.settings.subheading }}</p>
                {% endif %}
                {% if block.settings.heading != blank %}
                  <h3>{{ block.settings.heading }}</h3>
                {% endif %}

                {% if block.settings.content != blank %}
                  {{ block.settings.content }}
                {% endif %}

                {% if block.settings.button_text != blank %}
                  <a href="{{ block.settings.button_link }}" class="btn">{{ block.settings.button_text }}</a>
                {% endif %}
            {% endcase %}
          </div>

          <div class="hotspot-content__block hotspot-content__block--{{ block.id }}" data-hotspot-block="{{ block.id }}-mobile">
            {% case block.type %}
             {% when 'product' %}
  {%- assign product = block.settings.featured_product -%}
  {% if block.settings.featured_product != blank %}
    <div class="hotspot-product-info" data-product-json="{{ product | json | escape }}">
      <h3 class="product-title">{{ product.title }}</h3>
      <p class="product-price" data-product-price>{{ product.price | money }}</p>
      <div class="product-media-slider">
        {% for media in product.media %}
          <img src="{{ media | img_url: '400x400' }}" alt="{{ product.title }}">
        {% endfor %}
      </div>
      <div class="product-variants">
        {% for variant in product.variants %}
          <button class="variant-button" data-variant-id="{{ variant.id }}">
            {{ variant.title }}
          </button>
        {% endfor %}
      </div>
      <div class="product-description">
        {{ product.description }}
      </div>
      <form action="/cart/add" method="post" enctype="multipart/form-data" class="form-inline add-to-cart-form">
        <div class="quantity-selector">
          <button type="button" class="quantity-decrease">−</button>
          <input type="number" name="quantity" value="1" min="1" step="1" class="quantity-selector__input">
          <button type="button" class="quantity-increase">+</button>
        </div>
        <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" class="variant-id-input">
        <button type="submit" name="add" data-add-to-cart="" class="btn btn--full add-to-cart">
          <span data-add-to-cart-text="" data-default-text="Add to cart">
            Add to cart
          </span>
        </button>
      </form>
      <a href="{{ product.url }}" class="view-details">View Full Details</a>
    </div>
  {% else %}
    {% render 'onboarding-product-grid-item', i: forloop.index %}
  {% endif %}


              {% when 'paragraph' %}
                {% if block.settings.subheading != blank %}
                  <p class="subheading">{{ block.settings.subheading }}</p>
                {% endif %}
                {% if block.settings.heading != blank %}
                  <h3>{{ block.settings.heading }}</h3>
                {% endif %}

                {% if block.settings.content != blank %}
                  {{ block.settings.content }}
                {% endif %}

                {% if block.settings.button_text != blank %}
                  <a href="{{ block.settings.button_link }}" class="btn">{{ block.settings.button_text }}</a>
                {% endif %}
            {% endcase %}
          </div>
        {% endfor %}
      </div>
    </div>
  </hot-spots>
  <div class="hotspot-content__block-mobile-overlay"></div>
</div>
{% schema %}
{
    "name": "Hotspots",
    "class": "hotspots-section",
    "max_blocks": 8,
    "settings": [
        {
            "type": "text",
            "id": "title",
            "label": "Title",
            "default": "Shop the look"
        },
        {
            "type": "select",
            "id": "heading_size",
            "label": "Heading Size",
            "default": "h2",
            "options": [
                {
                    "value": "h3",
                    "label": "Small"
                },
                {
                    "value": "h2",
                    "label": "Medium"
                },
                {
                    "value": "h1",
                    "label": "Large"
                }
            ]
        },
        {
            "type": "select",
            "id": "heading_position",
            "label": "Heading Position",
            "default": "left",
            "options": [
                {
                    "value": "left",
                    "label": "Left"
                },
                {
                    "value": "center",
                    "label": "Center"
                },
                {
                    "value": "right",
                    "label": "Right"
                }
            ]
        },
        {
            "type": "image_picker",
            "id": "image_desktop",
            "label": "Desktop Image",
            "info": "Select the image for desktop view"
        },
        {
            "type": "image_picker",
            "id": "image_mobile",
            "label": "Mobile Image",
            "info": "Select the image for mobile view"
        },
        {
            "type": "color",
            "id": "hotspot_color",
            "label": "Hotspot Color",
            "default": "#000000"
        },
        {
            "type": "color",
            "id": "button_color",
            "label": "Button Color",
            "default": "#007bff"
        },
        {
            "type": "color",
            "id": "variant_selected_color",
            "label": "Variant Selected Color",
            "default": "#000000"
        },
        {
            "type": "color",
            "id": "variant_selected_text_color",
            "label": "Variant Selected Text Color",
            "default": "#ffffff"
        },
        {
            "type": "color",
            "id": "variant_selected_border_color",
            "label": "Variant Selected Border Color",
            "default": "#000000"
        }
    ],
    "blocks": [
        {
            "type": "product",
            "name": "Product",
            "settings": [
                {
                    "type": "product",
                    "id": "featured_product",
                    "label": "Featured Product"
                },
                {
                    "type": "range",
                    "id": "vertical_desktop",
                    "label": "Desktop Vertical Position",
                    "default": 50,
                    "min": 10,
                    "max": 90,
                    "step": 1,
                    "unit": "%"
                },
                {
                    "type": "range",
                    "id": "horizontal_desktop",
                    "label": "Desktop Horizontal Position",
                    "default": 50,
                    "min": 10,
                    "max": 90,
                    "step": 1,
                    "unit": "%"
                },
                {
                    "type": "range",
                    "id": "vertical_mobile",
                    "label": "Mobile Vertical Position",
                    "default": 50,
                    "min": 10,
                    "max": 90,
                    "step": 1,
                    "unit": "%"
                },
                {
                    "type": "range",
                    "id": "horizontal_mobile",
                    "label": "Mobile Horizontal Position",
                    "default": 50,
                    "min": 10,
                    "max": 90,
                    "step": 1,
                    "unit": "%"
                },
                {
                    "type": "image_picker",
                    "id": "custom_icon",
                    "label": "Custom Icon"
                },
                {
                    "type": "range",
                    "id": "icon_size",
                    "label": "Icon Size",
                    "default": 24,
                    "min": 10,
                    "max": 100,
                    "step": 1,
                    "unit": "px"
                }
            ]
        },
        {
            "type": "paragraph",
            "name": "Paragraph",
            "settings": [
                {
                    "type": "text",
                    "id": "subheading",
                    "label": "Subheading"
                },
                {
                    "type": "text",
                    "id": "heading",
                    "label": "Heading"
                },
                {
                    "type": "richtext",
                    "id": "content",
                    "label": "Content"
                },
                {
                    "type": "text",
                    "id": "button_text",
                    "label": "Button Text"
                },
                {
                    "type": "url",
                    "id": "button_link",
                    "label": "Button Link"
                },
                {
                    "type": "range",
                    "id": "vertical_desktop",
                    "label": "Desktop Vertical Position",
                    "default": 50,
                    "min": 10,
                    "max": 90,
                    "step": 1,
                    "unit": "%"
                },
                {
                    "type": "range",
                    "id": "horizontal_desktop",
                    "label": "Desktop Horizontal Position",
                    "default": 50,
                    "min": 10,
                    "max": 90,
                    "step": 1,
                    "unit": "%"
                },
                {
                    "type": "range",
                    "id": "vertical_mobile",
                    "label": "Mobile Vertical Position",
                    "default": 50,
                    "min": 10,
                    "max": 90,
                    "step": 1,
                    "unit": "%"
                },
                {
                    "type": "range",
                    "id": "horizontal_mobile",
                    "label": "Mobile Horizontal Position",
                    "default": 50,
                    "min": 10,
                    "max": 90,
                    "step": 1,
                    "unit": "%"
                },
                {
                    "type": "image_picker",
                    "id": "custom_icon",
                    "label": "Custom Icon"
                },
                {
                    "type": "range",
                    "id": "icon_size",
                    "label": "Icon Size",
                    "default": 24,
                    "min": 10,
                    "max": 100,
                    "step": 1,
                    "unit": "px"
                }
            ]
        }
    ],
    "presets": [
        {
            "name": "Shopable Image",
            "blocks": [
                {
                    "type": "product",
                    "settings": {
                        "vertical_desktop": 25,
                        "horizontal_desktop": 25,
                        "vertical_mobile": 40,
                        "horizontal_mobile": 40
                    }
                },
                {
                    "type": "product",
                    "settings": {
                        "vertical_desktop": 75,
                        "horizontal_desktop": 65,
                        "vertical_mobile": 80,
                        "horizontal_mobile": 60
                    }
                }
            ]
        }
    ]
}
{% endschema %}

[BSSCommerce-B2B]

Hi @mehroo 
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.