Hi there! I am using the Crave theme and trying to figure out how to add the Quick Add / Add to Cart button when a customer uses our search bar. There is an option on the collections pages to add this button really easily, but for some reason there is no option listed for the search results section.
Any help would be greatly appreciated!
Hi @jacksonroy03 ,
Please send your site and if your site is password protected, please send me the password. I will check it.
I am transitioning our site to a new theme, so the quick add button is not available on our current public website. The new theme is called Crave and it shouldn’t be anything specific to my website, but I will show you the image difference between the product grid and the search results below.
If you see here, the product grid has a quick add button available, but the search results do not. Do you know how I can add the quick add button to the search results?
Hi @jacksonroy03 ,
Yes, Crave theme doesn’t support this, that’s why I need to check your site.
So, now you want to add an add to cart button for the product item?
Yes, I would like to add a quick add button or add to cart button for the product item when a user searches for a product via the search bar.
@LitExtension here is my product card code below with the quick add button. I want to add this to be available on the search results as well. Do you know how I could do this?
{% comment %}
Renders a product card
Accepts:
- card_product: {Object} Product Liquid object (optional)
- media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_rating: {Boolean} Show the product rating. Default: false
- extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
- lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
- show_quick_add: {Boolean} Show the quick add button.
- section_id: {String} The ID of the section that contains this card.
Usage:
{% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == 'portrait'
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == 'adapt'
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == nil
assign ratio = 1
endif
-%}
{% assign firstVariant = card_product.first_available_variant %}
{%- comment -%} Added by Adam B ( Shopify Theme Support) June 1 2022 {%- endcomment -%}
{%- if card_product.featured_media or settings.enable_default_image -%}
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{%- if card_product.featured_media -%}
{% else %}
{% endif %}
{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
{%- if card_product.media[1] != nil and show_secondary_image -%}
{%- endif -%}
{%- endif -%}
###
{{ card_product.title | escape }}
{%- if card_product.available == false -%}
{{ 'products.product.sold_out' | t }}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{ 'products.product.on_sale' | t }}
{%- endif -%}
###
{{ card_product.title | escape }}
{% if firstVariant.inventory_quantity >= 1 %}
QTY IN STOCK: {{firstVariant.inventory_quantity}}
{% endif %}
{% if card_product.metafields.ProductInfo.Rating != nil %}
Rating: {{card_product.metafields.ProductInfo.Rating }}
{% endif %}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ card_product.vendor }}
{%- endif -%}
{{ block.settings.description | escape }}
{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}
{{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}
({{ card_product.metafields.reviews.rating_count }})
{{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}
{%- endif -%}
{% render 'price', product: card_product, price_class: '' %}
{%- if show_quick_add -%}
{%- comment -%} Added variant count by Adam B ( Shopify Theme Support) May 27 2022 {%- endcomment -%}
{% assign variantCount = 0 %}
{% for variant in card_product.variants %}
{% assign variantCount = variantCount | plus: 1 %}
{% endfor %}
{%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
{%- if card_product.has_only_default_variant or variantCount < 2 -%}
{%- else -%}
{%- endif -%}
{%- endif -%}
{%- if card_product.available == false -%}
{{ 'products.product.sold_out' | t }}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{ 'products.product.on_sale' | t }}
{%- endif -%}
{%- else -%}
###
{{ 'onboarding.product_title' | t }}
###
{{ 'onboarding.product_title' | t }}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%}
{% render 'price' %}
{%- endif -%}
Hi @jacksonroy03 ,
Please send me the code of main-search.liquid file, I will help you to check and add it
Please see the main-search.liquid file below. I appreciate your help on this!
{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
{{ 'component-facets.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{%- liquid
assign sort_by = search.sort_by | default: search.default_sort_by
assign terms = search.terms | escape
assign search_url = '?q=' | append: terms | append: '&options%5Bprefix%5D=last&sort_by=' | append: sort_by
-%}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{%- if search.performed -%}
# {{ 'templates.search.title' | t }}
{%- else -%}
# {{ 'general.search.search' | t }}
{%- endif -%}
{%- if settings.predictive_search_enabled -%}
{%- endif -%}
{%- if search.performed -%}
{%- unless section.settings.enable_filtering or section.settings.enable_sorting -%}
{%- if search.results_count > 0 -%}
{{ 'templates.search.results_with_count_and_term' | t: terms: search.terms, count: search.results_count }}
{%- endif -%}
{%- endunless -%}
{%- if search.results_count == 0 and search.filters == empty -%}
{{ 'templates.search.no_results' | t: terms: search.terms }}
{%- endif -%}
{%- endif -%}
{%- if search.performed -%}
{%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' and search.filters != empty -%}
{%- endif -%}
{%- endif -%}
{% schema %}
{
"name": "t:sections.main-search.name",
"tag": "section",
"class": "section",
"settings": [
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 5,
"step": 1,
"default": 4,
"label": "t:sections.main-search.settings.columns_desktop.label"
},
{
"type": "header",
"content": "t:sections.main-search.settings.header__1.content"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.main-search.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.main-search.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.main-search.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.main-search.settings.image_ratio.label"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "t:sections.main-search.settings.show_secondary_image.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.main-search.settings.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "t:sections.main-search.settings.show_rating.label",
"info": "t:sections.main-search.settings.show_rating.info"
},
{
"type": "header",
"content": "t:sections.main-collection-product-grid.settings.header__1.content"
},
{
"type": "checkbox",
"id": "enable_filtering",
"default": true,
"label": "t:sections.main-collection-product-grid.settings.enable_filtering.label",
"info": "t:sections.main-collection-product-grid.settings.enable_filtering.info"
},
{
"type": "select",
"id": "filter_type",
"options": [
{
"value": "horizontal",
"label": "t:sections.main-collection-product-grid.settings.filter_type.options__1.label"
},
{
"value": "vertical",
"label": "t:sections.main-collection-product-grid.settings.filter_type.options__2.label"
},
{
"value": "drawer",
"label": "t:sections.main-collection-product-grid.settings.filter_type.options__3.label"
}
],
"default": "horizontal",
"label": "t:sections.main-collection-product-grid.settings.filter_type.label",
"info": "t:sections.main-collection-product-grid.settings.filter_type.info"
},
{
"type": "checkbox",
"id": "enable_sorting",
"default": true,
"label": "t:sections.main-collection-product-grid.settings.enable_sorting.label"
},
{
"type": "header",
"content": "t:sections.main-search.settings.header__2.content"
},
{
"type": "checkbox",
"id": "article_show_date",
"default": true,
"label": "t:sections.main-search.settings.article_show_date.label"
},
{
"type": "checkbox",
"id": "article_show_author",
"default": false,
"label": "t:sections.main-search.settings.article_show_author.label"
},
{
"type": "header",
"content": "t:sections.main-search.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"default": "2",
"label": "t:sections.main-search.settings.columns_mobile.label",
"options": [
{
"value": "1",
"label": "t:sections.main-search.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.main-search.settings.columns_mobile.options__2.label"
}
]
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
]
}
{% endschema %}
Thank you! I am seeing the quick add button displayed on the search results now! However, any idea how I would be able to place the button below the product title and information?
Here is how it is displaying in the search results:
And here is how I want it to display:
Hi @jacksonroy03 ,
Can you send me the preview site link via private message? I need to check the demo so I can guide you in detail
Hi @jacksonroy03 ,
Please go to main-search.liquid file and add code here:
Code:
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
Thank you @LitExtension
This worked for me and everything is functioning / displaying in the right places. Thank you for your help with this!
{%- if settings.sidebar_move == blank -%}
{% include 'breadcrumb' %}
{%- endif -%}
{%- if canonical_url contains 'collections/all' -%}
{%- assign by_collection = false -%}
{%- else -%}
{%- assign by_collection = true -%}
{%- endif -%}
{%- assign sidebar_class = 'col-lg-3' -%}
{%- if settings.sidebar_left_collection != blank -%}
{%- assign main_class = 'col-lg-9' -%}
{%- endif -%}
{%- if settings.sidebar_right_collection != blank -%}
{%- assign main_class = 'col-lg-9' -%}
{%- endif -%}
{%- if settings.sidebar_left_collection != blank and settings.sidebar_right_collection != blank -%}
{%- assign main_class = 'col-lg-6' -%}
{%- endif -%}
{%- if settings.sidebar_left_collection == blank and settings.sidebar_right_collection == blank -%}
{%- assign main_class = 'col-lg-12' -%}
{%- endif -%}
{% if search.performed %}
{% if search.results_count == 0 %}
### {{ 'general.search.no_results_html' | t: terms: search.terms }}
{% else %}
### {{ 'general.search.results_for_html' | t: terms: search.terms }}
{% endif %}
{% else %}
### {{ 'general.search.title' | t }}
{% endif %}
{% if paginate.pages > 1 %}
{% include 'pagination-page' %}
{% endif %}
{%- if search.performed -%}
{%- assign view_mode = settings.collection_view_mode -%}
{%- assign view_mode_class = view_mode -%}
{%- case settings.collection_view_mode -%}
{%- when 'divider' -%}
{%- assign view_mode_class = 'grid divider-line' -%}
{%- when 'list' -%}
{%- assign view_mode_class = 'grid' -%}
{%- endcase -%}
{%- assign layout_class = 'product-' | append:settings.product_layout -%}
{%- assign pt_layout = settings.product_layout -%}
{%- case settings.product_layout -%}
{%- when 'onhover' -%}
{%- assign layout_class = 'product-default show-links-hover' -%}
{%- when 'outimage_aq_onimage' -%}
{%- assign layout_class = 'product-outimage_aq_onimage' -%}
{%- when 'outimage_aq_onimage2' -%}
{%- assign layout_class = 'product-outimage_aq_onimage with-padding' -%}
{%- when 'quantity' -%}
{%- assign layout_class = 'product-wq_onimage' -%}
{%- endcase -%}
{%- if view_mode == 'list' -%}
{%- assign layout_class = 'product-default' -%}
{%- endif -%}
{%- case settings.collection_aspect_ratio -%}
{%- when '1' -%}
{%- assign image_width = settings.collection_ratio_width -%}
{%- assign image_height = '' -%}
{%- assign ar = 1 -%}
{%- else -%}
{%- assign image_width = settings.collection_ratio_width -%}
{%- assign image_height = settings.collection_ratio_height -%}
{%- if image_width < image_height -%}
{%- assign ar =image_width | divided_by: 1 -%}
{%- else -%}
{%- assign ar = image_width | divided_by: image_height -%}
{%- endif -%}
{%- endcase -%}
{%- capture image_size -%}{{ image_width }}x{{ image_height }}{%- endcapture -%}
{%- assign pt = 100 | divided_by: ar | append: '%' -%}
{%- assign columns = settings.collection_columns | plus: 0 -%}
{%- if columns >= 4 -%}
{%- capture class_grid %}item-1200-{{ columns }} item-992-4 item-768-3 item-640-2 item-320-1{%- endcapture -%}
{%- endif -%}
{%- if columns == 3 -%}
{%- capture class_grid %}item-1200-{{ columns }} item-640-2 item-320-1{%- endcapture -%}
{%- endif -%}
{%- if columns <= 2 -%}
{%- capture class_grid %}item-1200-{{ columns }}{%- endcapture -%}
{%- endif -%}
{%- if canonical_url contains 'collections' and by_collection -%}
{%- if search.terms != blank and search.performed == true -%}
{%- assign product_search_handle = '' -%}
{%- assign collection_search = canonical_url | split:'/collections/' | last | split:'?q=' | first -%}
{%- paginate search.results by search.results_count -%}
{%- for item in search.results -%}
{%- for collection in item.collections -%}
{%- if collection.handle == collection_search -%}
{%- assign product_search_handle = product_search_handle | append:item.handle | append:',' -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- endfor -%}
{%- assign arr_product_search_handle = product_search_handle | split:',' -%}
{%- if arr_product_search_handle.size == 0 -%}
{{ 'general.search.not_found' | t }}
{%- else -%}
{%- for item in search.results -%}
{%- assign product = item -%}
{%- for collection in product.collections -%}
{%- if collection.handle == collection_search -%}
{%- assign product_search_handle = product_search_handle | append:product.handle | append:',' -%}
{%- include 'pt-product-loop' -%}
{%- endif -%}
{%- endfor -%}
{%- endfor -%}
{%- endif -%}
{%- endpaginate -%}
{%- endif -%}
{%- else -%}
{%- assign limit = settings.collection_products_count -%}
{%- paginate search.results by limit -%}
{%- if search.terms != blank -%}
{%- if search.results_count == 0 or search.performed == false -%}
{{ 'general.search.not_found' | t }}
{%- else -%}
{%- for item in search.results -%}
{%- assign product = item -%}
{%- include 'pt-product-loop' -%}
{%- endfor -%}
{%- endif -%}
{%- endif -%}
{%- if paginate.pages > 1 -%}
{%- include 'pagination-page' -%}
{%- endif -%}
{%- endpaginate -%}
{%- endif -%}
{%- endif -%}
{% if settings.sidebar_left_collection != blank %}
{% section 'sidebar-left' %}
{% endif %}
{% if settings.sidebar_right_collection != blank %}
{% section 'sidebar-right' %}
{% endif %}
fgfg
Can you please see see my search page code where i need to put the code?
Hi @Volga ,
You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.
I am using the Dawn theme.
I tried this solution and it is showing the button on the search page but it shows a JavaScript error in the console .
I know this error is due to incorrect sequence of JavaScript loading, but can you please help me with this, for 2 days I am struggling to solve this error.
