I'm using Shopify Dawn theme. In predictive search results, I want to add Quantity selector & Add to cart button beside the product listing. For the first product result, tag is not showing, due to which I'm not able to add to cart the product. For rest product items, it works perfectly. Store URL - https://demostore-theme.myshopify.com Password - 123 Search with keyword - "de" 1st result - https://prnt.sc/vwKRqVRDTYS3 Console error - https://prnt.sc/M_8u_9O7Mm0e For rest result - https://prnt.sc/DSWORL0h9FEY (works perfectly) I have edited this code in predictive-search.liquid {%- for product in predictive_search.resources.products -%} <li id="predictive-search-option-product-{{ forloop.index }}" class="predictive-search__list-item" role="option" aria-selected="false" > <a href="{{ product.url }}" class="predictive-search__item predictive-search__item--link-with-thumbnail link link--text" tabindex="-1" > {%- if product.featured_media != blank -%} <img class="predictive-search__image" src="{{ product.featured_media | image_url: width: 150 }}" alt="{{ product.featured_media.alt }}" width="50" height="{{ 50 | divided_by: product.featured_media.preview_image.aspect_ratio }}" > {%- endif -%} <div class="predictive-search__item-content{% unless settings.predictive_search_show_vendor or settings.predictive_search_show_price %} predictive-search__item-content--centered{% endunless %}"> {%- if settings.predictive_search_show_vendor -%} <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span> <div class="predictive-search__item-vendor caption-with-letter-spacing"> {{ product.vendor }} </div> {%- endif -%} <p class="predictive-search__item-heading h5">{{ product.title | escape }}</p> {%- if settings.predictive_search_show_price -%} {% render 'price', product: product, use_variant: true, show_badges: false %} {%- endif -%} </div> </a> <!-- Customization for Add to Cart --> <div class="quick-add no-js-hidden"> {%- liquid assign section_id = section.id assign product_form_id = 'quick-add-' | append: section_id | append: product.id assign qty_rules = false if product.selected_or_first_available_variant.quantity_rule.min > 1 or product.selected_or_first_available_variant.quantity_rule.max != null or product.selected_or_first_available_variant.quantity_rule.increment > 1 assign qty_rules = true endif -%} {%- if product.variants.size > 1 or qty_rules -%} <modal-opener data-modal="#QuickAdd-{{ product.id }}"> <button id="{{ product_form_id }}-submit" type="submit" name="add" class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add animate-arrow{% endif %}" aria-haspopup="dialog" aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ product.id }}" data-product-url="{{ product.url }}" > {{ 'products.product.choose_options' | t }} {%- if horizontal_quick_add -%} <span class="icon-wrap">{% render 'icon-arrow' %}</span> {%- endif -%} {%- render 'loading-spinner' -%} </button> </modal-opener> <quick-add-modal id="QuickAdd-{{ product.id }}" class="quick-add-modal"> <div role="dialog" aria-label="{{ 'products.product.choose_product_options' | t: product_name: product.title | escape }}" aria-modal="true" class="quick-add-modal__content global-settings-popup" tabindex="-1" > <button id="ModalClose-{{ product.id }}" type="button" class="quick-add-modal__toggle" aria-label="{{ 'accessibility.close' | t }}" > {% render 'icon-close' %} </button> <div id="QuickAddInfo-{{ product.id }}" class="quick-add-modal__content-info"></div> </div> </quick-add-modal> {%- else -%} <product-form data-section-id="{{ section.id }}"> {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} <!-- Qty Selection --> <div id="Quantity-Form-{{ section.id }}" class="product-form__input product-form__quantity{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} product-form__quantity-top{% endif %}" {{ block.shopify_attributes }} > {% comment %} TODO: enable theme-check once `item_count_for_variant` is accepted as valid filter {% endcomment %} {% # theme-check-disable %} {%- assign cart_qty = cart | item_count_for_variant: product.selected_or_first_available_variant.id -%} {% # theme-check-enable %} <div class="price-per-item__container"> <quantity-input class="quantity" data-url="{{ product.url }}" data-section="{{ section.id }}"> <button class="quantity__button no-js-hidden" name="minus" type="button"> <span class="visually-hidden"> {{- 'products.product.quantity.decrease' | t: product: product.title | escape -}} </span> {% render 'icon-minus' %} </button> <input class="quantity__input" type="number" name="quantity" id="Quantity-{{ section.id }}" data-cart-quantity="{{ cart_qty }}" data-min="{{ product.selected_or_first_available_variant.quantity_rule.min }}" min="{{ product.selected_or_first_available_variant.quantity_rule.min }}" {% if product.selected_or_first_available_variant.quantity_rule.max != null %} data-max="{{ product.selected_or_first_available_variant.quantity_rule.max }}" max="{{ product.selected_or_first_available_variant.quantity_rule.max }}" {% endif %} step="{{ product.selected_or_first_available_variant.quantity_rule.increment }}" value="{{ product.selected_or_first_available_variant.quantity_rule.min }}" form="{{ product_form_id }}" > <button class="quantity__button no-js-hidden" name="plus" type="button"> <span class="visually-hidden"> {{- 'products.product.quantity.increase' | t: product: product.title | escape -}} </span> {% render 'icon-plus' %} </button> </quantity-input> {%- liquid assign volume_pricing_array = product.selected_or_first_available_variant.quantity_price_breaks | sort: 'quantity' | reverse assign current_qty_for_volume_pricing = cart_qty | plus: product.selected_or_first_available_variant.quantity_rule.min if cart_qty > 0 assign current_qty_for_volume_pricing = cart_qty | plus: product.selected_or_first_available_variant.quantity_rule.increment endif -%} {%- if product.quantity_price_breaks_configured? -%} <price-per-item class="no-js-hidden" id="Price-Per-Item-{{ section.id }}" data-section-id="{{ section.id }}" data-variant-id="{{ product.selected_or_first_available_variant.id }}" > {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%} {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%} <div class="price-per-item"> {%- if variant_price_compare -%} <dl class="price-per-item--current"> <dt class="visually-hidden"> {{ 'products.product.price.regular_price' | t }} </dt> <dd> <s class="variant-item__old-price"> {{ variant_price_compare | money_with_currency }} </s> </dd> </dl> {%- endif -%} {%- if current_qty_for_volume_pricing < volume_pricing_array.last.minimum_quantity -%} {%- assign variant_price = product.selected_or_first_available_variant.price | money_with_currency -%} <span class="price-per-item--current"> {{- 'products.product.volume_pricing.price_at_each' | t: price: variant_price -}} </span> {%- else -%} {%- for price_break in volume_pricing_array -%} {%- if current_qty_for_volume_pricing >= price_break.minimum_quantity -%} {%- assign price_break_price = price_break.price | money_with_currency -%} <span class="price-per-item--current"> {{- 'products.product.volume_pricing.price_at_each' | t: price: price_break_price -}} </span> {%- break -%} {%- endif -%} {%- endfor -%} {%- endif -%} </div> {%- else -%} {%- assign variant_price = product.selected_or_first_available_variant.price | money_with_currency -%} {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%} <div class="price-per-item"> {%- if variant_price_compare -%} <dl class="price-per-item--current"> <dt class="visually-hidden"> {{ 'products.product.price.regular_price' | t }} </dt> <dd> <s class="variant-item__old-price"> {{ variant_price_compare | money_with_currency }} </s> </dd> <dt class="visually-hidden"> {{ 'products.product.price.sale_price' | t }} </dt> <dd> <span class="price-per-item--current"> {{- 'products.product.volume_pricing.price_at_each' | t: price: variant_price -}} </span> </dd> </dl> {%- else -%} <span class="price-per-item--current"> {{- 'products.product.volume_pricing.price_at_each' | t: price: variant_price -}} </span> {%- endif -%} </div> {%- endif -%} </price-per-item> {%- endif -%} </div> <div class="quantity__rules caption no-js-hidden" id="Quantity-Rules-{{ section.id }}"> {%- if product.selected_or_first_available_variant.quantity_rule.increment > 1 -%} <span class="divider"> {{- 'products.product.quantity.multiples_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.increment -}} </span> {%- endif -%} {%- if product.selected_or_first_available_variant.quantity_rule.min > 1 -%} <span class="divider"> {{- 'products.product.quantity.minimum_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.min -}} </span> {%- endif -%} {%- if page_titleroduct.selected_or_first_available_variant.quantity_rule.max != null -%} <span class="divider"> {{- 'products.product.quantity.maximum_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.max -}} </span> {%- endif -%} </div> {%- if product.quantity_price_breaks_configured? -%} <volume-pricing class="parent-display no-js-hidden" id="Volume-{{ section.id }}"> {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%} <span class="caption-large">{{ 'products.product.volume_pricing.title' | t }}</span> <ul class="list-unstyled no-js-hidden"> <li> <span>{{ product.selected_or_first_available_variant.quantity_rule.min }}+</span> {%- assign price = product.selected_or_first_available_variant.price | money_with_currency -%} <span data-text="{{ 'products.product.volume_pricing.price_at_each' | t: price: variant_price }}"> {{- 'sections.quick_order_list.each' | t: money: price -}} </span> </li> {%- for price_break in product.selected_or_first_available_variant.quantity_price_breaks -%} {%- assign price_break_price = price_break.price | money_with_currency -%} <li class="{%- if forloop.index >= 3 -%}show-more-item hidden{%- endif -%}"> <span> {{- price_break.minimum_quantity -}} <span aria-hidden="true">+</span></span > <span data-text="{{ 'products.product.volume_pricing.price_at_each' | t: price: price_break_price }}"> {{- 'sections.quick_order_list.each' | t: money: price_break_price -}} </span> </li> {%- endfor -%} </ul> {%- if product.selected_or_first_available_variant.quantity_price_breaks.size >= 3 -%} <show-more-button> <button class="button-show-more link underlined-link" id="Show-More-{{ section.id }}" type="button" > <span class="label-show-more label-text" ><span aria-hidden="true">+ </span>{{ 'products.facets.show_more' | t }} </span> </button> </show-more-button> {%- endif -%} {%- endif -%} </volume-pricing> {%- endif -%} </div> <!-- Qty Selection End --> <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" class="product-variant-id" {% if product.selected_or_first_available_variant.available == false %} disabled {% endif %} > <button id="{{ product_form_id }}-submit" type="submit" name="add" class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add{% endif %}" aria-haspopup="dialog" aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ product.id }}" aria-live="polite" data-sold-out-message="true" {% if product.selected_or_first_available_variant.available == false %} disabled {% endif %} > <span> {%- if product.selected_or_first_available_variant.available -%} {{ 'products.product.add_to_cart' | t }} {%- else -%} {{ 'products.product.sold_out' | t }} {%- endif -%} </span> <span class="sold-out-message hidden"> {{ 'products.product.sold_out' | t }} </span> {%- if horizontal_quick_add -%} <span class="icon-wrap">{% render 'icon-plus' %}</span> {%- endif -%} {%- render 'loading-spinner' -%} </button> {%- endform -%} </product-form> {%- endif -%} </div> <!-- Customization for Add to Cart END --> </li> {%- endfor -%} The Add to Cart button should work properly for all the search result products (especilly the first product result).