Hi,
I want to add a Add to Cart Button just below the product image on collection page or home page. below-mentioned is the code for product card/collection
{% comment %}
Accepts:
- product: {Object} Product (required)
- show_variant_options: {Boolean} Show variant swatches at the bottom (optional)
- hide_title: {String} Hide product title (optional)
- image_ratio: {String} Product media ratio (optional)
- pcard_alignment: {String} Product alignment (optional)
- show_vendor: {Boolean} Show product vendor (optional)
- show_cart_button: {Boolean} Show Add to cart button (optional)
- show_quickview_button: {Boolean} Show Quickview button (optional)
- show_wishlist_button: {Boolean} Show Wishlist button (optional)
- show_compare_button: {Boolean} Show Compare button (optional)
- column_wrapper: {Boolean} Wrap product card (optional)
Usage:
{% render 'product-card-1', product: product %}
{% endcomment %}
{% liquid
if show_variant_options == nil
assign show_variant_options = settings.show_swatch_option
endif
assign show_title = true
if hide_title == true
assign show_title = false
endif
if image_ratio == nil or image_ratio == blank
assign image_ratio = settings.pcard_image_ratio | default: '1/1'
endif
if image_ratio == 'original'
assign image_ratio = product.featured_image.aspect_ratio | default: '1/1'
endif
if show_vendor == nil
assign show_vendor = settings.show_vendor
endif
assign sold_out = false
if product.available == false
assign sold_out = true
endif
assign discount = ''
assign compare_at_price = product.compare_at_price
assign price = product.price
assign on_sale = false
if compare_at_price > price
assign on_sale = true
assign discount = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price
endif
assign show_on_sale_badge = false
if settings.on_sale_badge != 'hide' and on_sale
assign show_on_sale_badge = true
endif
assign quick_add_text = 'products.product.quick_add' | t
unless product.has_only_default_variant
capture quick_add_text
render 'new-locale', key: 'products.product.select_options'
endcapture
endunless
assign sold_number = product.metafields.foxkit.sold_number
if product.available
assign variant_id = product.first_available_variant.id
else
assign variant_id = product.selected_or_first_available_variant.id
endif
assign selected_variant_id = ''
if section.settings.change_product_variant_on_fitlering
assign variant_id = product.selected_or_first_available_variant.id
assign selected_variant_id = product.selected_variant.id
endif
if pcard_alignment == nil
assign pcard_alignment = settings.pcard_alignment
endif
assign pcard_default_image = settings.pcard_default_image
if image_ratio == nil or image_ratio == blank
assign image_ratio = settings.pcard_image_ratio | default: '1/1'
endif
if show_cart_button == nil
assign show_cart_button = settings.show_cart_button
endif
if show_quickview_button == nil
assign show_quickview_button = settings.show_quickview_button
endif
if show_wishlist_button == nil
assign show_wishlist_button = settings.show_wishlist_button
endif
if show_compare_button == nil
assign show_compare_button = settings.show_compare_button
endif
assign preview_image = product.media[0].preview_image
if section.settings.change_product_variant_on_fitlering == true and product.selected_variant.image != nil
assign preview_image = product.selected_variant.image
endif
if image_ratio == 'original'
assign image_ratio = product.media[0].aspect_ratio | default: '1/1'
endif
assign second_image = ''
if settings.show_second_img and product.images.size > 1 and product.images[1] != blank
assign second_image = product.images[1]
endif
assign product_card_classes = 'm-product-card m-product-card--style-1'
if sold_out
assign product_card_classes = product_card_classes | append: ' m-product-card--soldout'
endif
if on_sale
assign product_card_classes = product_card_classes | append: ' m-product-card--onsale'
endif
if settings.show_second_img and second_image != blank
assign product_card_classes = product_card_classes | append: ' m-product-card--show-second-img'
endif
%}
{%- if column_wrapper -%}<div class="m:column">{%- endif -%}
<div
class="{{ product_card_classes }}{% if animated %} m-scroll-trigger animate--{{ animation_effect }}{% endif %}"
data-view="card"
{% if sold_number != blank %}
data-sold-number="{{ sold_number }}"
{% endif %}
data-product-id="{{ product.id }}"
{% if animated %}
data-cascade
style="--animation-order: {{ index }};"
{% endif %}
>
<div class="m-product-card__media">
<a class="m-product-card__link m:block m:w-full" href="{{ product.url }}">
{% if preview_image != blank %}
<div class="m-product-card__main-image">
{%- liquid
assign asp_rat = image_ratio | default: preview_image.aspect_ratio
if asp_rat == 'original'
assign asp_rat = preview_image.aspect_ratio
endif
assign alt = alt | default: preview_image.alt | escape
-%}
{%- capture sizes -%}(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2){%- endcapture -%}
<responsive-image class="m-image" style="--aspect-ratio: {{ asp_rat }}">
{{ preview_image | image_url: width: 1100 | image_tag: loading: 'lazy', class: 'm:w-full m:h-full', alt: alt, sizes: sizes, widths: '165, 360, 535, 750, 940, 1100' }}
</responsive-image>
</div>
{%- if second_image != blank -%}
<div class="m-product-card__hover-image">
{%- liquid
assign asp_rat = image_ratio | default: second_image.aspect_ratio
if asp_rat == 'original'
assign asp_rat = second_image.aspect_ratio
endif
assign alt = alt | default: second_image.alt | escape
-%}
{%- capture sizes -%}(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2){%- endcapture -%}
<responsive-image class="m-image" style="--aspect-ratio: {{ asp_rat }}">
{{ second_image | image_url: width: 1100 | image_tag: loading: 'lazy', class: 'm:w-full m:h-full', alt: alt, sizes: sizes, widths: '165, 360, 535, 750, 940, 1100' }}
</responsive-image>
</div>
{%- endif -%}
{% else %}
{% if pcard_default_image != blank %}
{%- liquid
assign asp_rat = image_ratio | default: pcard_default_image.aspect_ratio
if asp_rat == 'original'
assign asp_rat = pcard_default_image.aspect_ratio
endif
assign alt = alt | default: pcard_default_image.alt | escape
-%}
{%- capture sizes -%}(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2){%- endcapture -%}
<responsive-image class="m-image" style="--aspect-ratio: {{ asp_rat }}">
{{ pcard_default_image | image_url: width: 1100 | image_tag: loading: 'lazy', class: 'm:w-full m:h-full', alt: alt, sizes: sizes, widths: '165, 360, 535, 750, 940, 1100' }}
</responsive-image>
{% else %}
<div style="--aspect-ratio: {{ image_ratio }}">
{{ 'product-1' | placeholder_svg_tag: 'm-placeholder-svg' }}
</div>
{% endif %}
{% endif %}
</a>
<div class="m-product-card__tags">
{% if settings.show_badge_sale %}
{% for tag in product.tags %}
{% if tag contains 'tag__' %}
{%- liquid
assign tag_content = tag | split: '__' | last
assign type = tag_content | split: '_' | first
assign tag_name = tag_content | split: '_' | last
-%}
<span class="m-product-card__tag-name m-product-tag m-product-tag--{{ type }}">{{ tag_name }}</span>
{% endif %}
{% endfor %}
{% endif %}
<span class="m-product-card__tag-name m-product-tag m-product-tag--preorder" data-foxkit-preorder-badge="{{ product.id }}"></span>
{% if show_on_sale_badge %}
{%- liquid
if settings.on_sale_badge == 'show_percentage'
assign sale_class = 'm-product-tag--discounted'
else
assign sale_class = 'm-product-tag--sale'
endif
-%}
<span class="m-product-card__tag-name m-product-tag {{ sale_class }}">
{%- if settings.on_sale_badge == 'show_text' -%}
{{ 'products.product.on_sale' | t }}
{%- elsif settings.on_sale_badge == 'show_percentage' -%}
{{ discount | append: '%' | prepend: '-' }}
{%- endif -%}
</span>
{% endif %}
</div>
{%- if settings.show_badge_soldout -%}
<span class="m-product-tag m-product-tag--soldout"{% unless sold_out %} style="display: none;"{% endunless %}>{{ 'products.product.sold_out' | t }}</span>
{%- endif -%}
{%- if show_quickview_button or show_wishlist_button or show_compare_button -%}
<div class="m-product-card__action m-product-card__action--top m:hidden md:m:flex">
{% liquid
assign tooltips = 'compare,quickview'
assign tooltip_items = tooltips | split: ','
%}
{%- if show_wishlist_button -%}
{% assign wishlist_app = settings.wishlist_app %}
{% if wishlist_app == 'growave' %}
<div class="m-tooltip m-wishlist-button m-button--icon m-tooltip--style-1 m-tooltip--left">
<span class="m-tooltip-icon m:block">
{% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
{% unless the_snippet_fave_icon contains 'Liquid error' %}
{{ the_snippet_fave_icon }}
{% else %}
{% render 'mm-ssw-widget-faveicon' with product.id %}
{% endunless %}
</span>
<div class="m-tooltip__content " data-revert-text="">
{{ 'products.product.add_to_wishlist' | t }}
</div>
</div>
{% else %}
{% liquid
render 'tooltip', type: 'wishlist', product: product, class_name: 'm-tooltip--left'
%}
{% endif %}
{%- endif -%}
{%- for tooltip in tooltip_items -%}
{%- assign settings_key = 'show_' | append: tooltip | append: '_button' | replace: 'add-to-cart', 'cart' -%}
{%- if [settings_key] -%}
{% render 'tooltip', type: tooltip, section: section, product: product, class_name: 'm-tooltip--left' %}
{%- endif -%}
{%- endfor -%}
</div>
{%- endif -%}
{% liquid
assign metafields_time = product.metafields.global['minimog_countdown']
if settings.show_countdown and metafields_time != blank
render 'countdown-timer', time: metafields_time, separator: false, short_label: true, extra_classes: 'm-product-card__countdown m:hidden'
endif
%}
{%- if sold_out == false -%}
<div class="m-product-card__action">
{% render 'product-card-quick-add-btn', product: product, quick_add_text: quick_add_text, section: section, button_style: 'white' %}
</div>
{% endif %}
</div>
<div class="m-product-card__content m:text-{{ pcard_alignment }}">
<div class="m-product-card__info">
{%- if show_vendor -%}
<span class="m-product-card__vendor">{{ product.vendor }}</span>
{%- endif -%}
{% if show_title == true %}
<h3 class="m-product-card__title">
<a href="{{ product.url }}" class="m-product-card__name{% if settings.uppercase_prd_name %} m:uppercase{% endif %}">
{{ product.title }}
</a>
</h3> <!-- Start of Judge.me code -->
<div style='{{ jm_style }}' class='jdgm-widget jdgm-preview-badge' data-id='{{ product.id }}' data-auto-install='false'>
{{ product.metafields.judgeme.badge }}
</div>
<!-- End of Judge.me code -->
{% endif %}
{% if settings.show_review_badge %}
<div class="m-product-card__reviews m:text-color-body">
{% render 'product-reviews-app__badge', product: product %}
</div>
{% endif %}
<div class="m-product-card__price">
{% render 'product-prices', product: product, is_product_card: true %}
</div>
{% if product.has_only_default_variant == false and show_variant_options %}
{% render 'product-card-option', product: product, show_variant_options: show_variant_options, pcard_alignment: pcard_alignment %}
{% endif %}
</div>
<div class="m-product-card__content-footer">
<div class="m-product-card__description">
{{ product.description | strip_html | truncatewords: 15, '...' }}
</div>
<div class="m-product-card__action">
{% render 'product-card-quick-add-btn', product: product, quick_add_text: quick_add_text, section: section %}
<div class="m-product-card__action-icons">
{% liquid
assign tooltips = 'compare,quickview,'
assign tooltip_items = tooltips | split: ','
if show_cart_button
render 'tooltip', type: 'add-to-cart', section: section, product: product, class_name: 'm-tooltip--top m-product-card__atc-button'
endif
%}
{%- if show_wishlist_button -%}
{% assign wishlist_app = settings.wishlist_app %}
{% if wishlist_app == 'growave' %}
<div class="m-tooltip m-wishlist-button m-button--icon m-tooltip--style-1 m-tooltip--top">
<span class="m-tooltip-icon m:block">
{% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
{% unless the_snippet_fave_icon contains 'Liquid error' %}
{{ the_snippet_fave_icon }}
{% else %}
{% render 'mm-ssw-widget-faveicon' with product.id %}
{% endunless %}
</span>
<div class="m-tooltip__content " data-revert-text="">
{{ 'products.product.add_to_wishlist' | t }}
</div>
</div>
{% else %}
{% liquid
render 'tooltip', type: 'wishlist', product: product, class_name: 'm-tooltip--top'
%}
{% endif %}
{%- endif -%}
{%- for tooltip in tooltip_items -%}
{%- assign settings_key = 'show_' | append: tooltip | append: '_button' | replace: 'add-to-cart', 'cart' -%}
{%- if [settings_key] -%}
{% render 'tooltip', type: tooltip, section: section, product: product, class_name: 'm-tooltip--top' %}
{%- endif -%}
{%- endfor -%}
</div>
</div>
</div>
</div>
<input hidden name="id" required value="{{ variant_id }}" data-selected-variant="{{ selected_variant_id }}">
</div>
{%- if column_wrapper -%}</div>{%- endif -%}
