So I am trying to get display price and compare price of selected variant . I tried creating js function and calling value but nothing working here The price is not changing with change in variant selected. {%- liquid if collection.all_products_count > 0 and blocks_count > 0 if filter_type == 'vertical' render 'facets-vertical', results: collection, filter_type: filter_type, enable_filtering: enable_filtering, enable_filtering_color_swatches: enable_filtering_color_swatches, enable_sorting: enable_sorting, enable_viewing: enable_viewing, enable_sticky_facet: enable_sticky_facet, blocks: section.blocks, filter_max_items: filter_max_items, color_swatches_add_label: color_swatches_add_label else render 'facets-vertical', results: collection, enable_filtering: false, enable_sorting: false, enable_viewing: false, enable_sticky_facet: enable_sticky_facet, blocks: section.blocks, filter_max_items: filter_max_items, color_swatches_add_label: color_swatches_add_label endif endif -%} <div class="product-grid-container{% unless filter_type == 'vertical' or blocks_count > 0 %} page-width{% endunless %}"> {%- liquid if enable_filtering or enable_sorting or enable_viewing if collection.all_products_count > 0 if filter_type == 'vertical' render 'facets-vertical-top', results: collection, filter_type: filter_type, enable_filtering: enable_filtering, enable_filtering_color_swatches: enable_filtering_color_swatches, enable_sorting: enable_sorting, enable_viewing: enable_viewing, enable_sticky_facet: enable_sticky_facet, default_layout: default_layout, color_swatches_add_label: color_swatches_add_label elsif blocks_count > 0 render 'facets', results: collection, filter_type: filter_type, enable_filtering: enable_filtering, enable_filtering_color_swatches: enable_filtering_color_swatches, enable_sorting: enable_sorting, enable_viewing: enable_viewing, enable_sticky_facet: enable_sticky_facet, default_layout: default_layout, filter_max_items: filter_max_items, color_swatches_add_label: color_swatches_add_label endif endif endif -%} {%- paginate collection.products by products_per_page -%} <div id="ProductGridContainer"> {%- if collection.products.size == 0 -%} <div class="collection collection--empty" id="product-grid" data-id="{{ section.id }}"> <div class="loading-overlay"></div> <div class="title-wrapper center"> <p class="title title--primary h2"> {%- liquid if collection.filters.size > 0 echo 'sections.collection_template.empty' | t echo '<br/>' echo 'sections.collection_template.use_fewer_filters_html' | t: link: collection.url, class: "link link--underline" else echo 'sections.collection_template.no_products' | t endif -%} </p> </div> </div> {%- else -%} <div class="collection"> <div class="loading-overlay"></div> {%- liquid assign grid_class = 'grid grid--2-col' if section.settings.columns_mobile == '1' assign grid_class = grid_class | append: ' grid--1-col-mobile' endif if products_per_row == 3 assign grid_class = grid_class | append: ' grid--3-col-tablet grid--3-col-desktop' elsif products_per_row == 4 assign grid_class = grid_class | append: ' grid--3-col-tablet grid--4-col-desktop' endif -%} <ul id="product-grid" data-id="{{ section.id }}" class="product-grid {{ grid_class }}" role="list"> {%- for product in collection.products -%} {% if product.type != 'FREEGIFT_HIDDEN' %} {%- liquid assign lazy_load = true if forloop.first assign lazy_load = false endif -%} <li class="grid__item"> {% render 'card-product', card_product: product, card_collection: collection, media_size: section.settings.image_ratio, show_secondary_image: section.settings.show_secondary_image, show_quick_buy: section.settings.show_quick_buy, show_vendor: section.settings.show_vendor, show_rating: section.settings.show_rating, enable_quick_view: section.settings.enable_quick_view, enable_color_swatches: section.settings.enable_color_swatches, enable_countdown: section.settings.enable_countdown, enable_image_fill: section.settings.enable_image_fill, lazy_load: lazy_load %} {% if request.page_type == 'collection' %} {% if product.variants.size > 1 %} <div class="product-variant-dropdown"> <form action="/cart/add" method="post"> <select name="id" class="product-variant-select"> {% for variant in product.variants %} {% if variant.available == true and variant.compare_at_price > 0 %} <option value="{{ variant.id }}">{{ variant.title }} - Rs. {{ variant.compare_at_price | divided_by: 100 | round: 2 }}</option> {% elsif variant.available == false %} <option value="{{ variant.id }}" disabled="disabled">{{ variant.title }} - Sold Out</option> {% else %} <!-- Handle other cases if needed --> {% endif %} {% endfor %} </select> {% unless product.available %} <input type="submit" value="Sold Out" class="product-variant-submit-button" disabled="disabled" /> {% else %} <input type="submit" value="Add to Cart" class="product-variant-submit-button" /> {% endunless %} </form> </div> {% endif %} {% endif %} {% if product.has_only_default_variant %} {% if product.available %} <form method="post" action="/cart/add"> <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> {% unless product.available %} <input type="submit" value="Sold Out" class="product-variant-submit-button" disabled="disabled" /> {% else %} <input type="submit" value="Add to Cart" class="product-variant-submit-button" /> {% endunless %} </form> {% endif %} {% endif %} </li> {% endif %} {%- endfor -%} </ul> {%- if paginate.pages > 1 -%} {% render 'pagination', paginate: paginate, pagination: section.settings.pagination %} {%- endif -%} </div> {%- endif -%} </div> {%- endpaginate -%} </div> </div> Run code snippetExpand snippet Reference image what i want : help me out its how to do this platform is shopify