Can someone please tell me how to add a “add to cart” button under each product on a collection grid? (Theme Label). Can it be done using Metafields or…? Thanks in advance.
Which theme are you using?
Hi @tomvanschil
Go to your product list.liquid file
Add following code after then product info
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input min="1" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Add to cart" class="btn" />
</form>
.
Almost there!
I use Theme Label. When I copy your code at the bottom of the snippet “product-grid-item.liquid”, the ADD TO CART BUTTON appears at the RIGHT SIDE of the Product.
How to add it UNDER the Product?
Thank you!
Share Screen Shot
try to add below the ‘price’ find ‘regular-price’ and add their
Sorry, I don’t understand that solution 
Can you explain it again OR can you provide me with a CODE so that the “add to cart” button appears BELOW the product. Thank you.
share me product grid full Code
{% comment %}theme-check-disable MissingTemplate,DeprecateLazysizes,DeprecateBgsizes{% endcomment %}
{%- liquid
assign on_sale = false
if product.compare_at_price > product.price
assign on_sale = true
endif
assign sold_out = true
if product.available
assign sold_out = false
endif
assign featured_media = current_variant.featured_media | default: product.featured_media
assign hover_action = settings.products_hover_action
if product.metafields.label_theme.audio_preview != blank and settings.product_show_audio_preview
assign audio_preview = true
assign audio_url = product.metafields.label_theme.audio_preview.value.url
assign audio_preview_img_url = featured_media | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’
endif
if settings.product_show_first_video_on_hover
assign first_video = product.media | where: “media_type”, “video” | first
endif
if section_color == ‘’ or section_color == blank
assign section_color = ‘primary’
endif
-%}
{% liquid
assign object_contain_grid = false
unless settings.product_grid_image_size == 'natural'
assign object_contain_grid = true
assign ratio = settings.product_grid_image_size | plus: 0
endunless
%}
{%- if object_contain_grid -%}
{%- endif-%}
{% endif %}
{% endif %}
{%- if product.featured_image != blank -%}
{%- render 'image-object' with
image: product.featured_image,
contain: true
-%}
{%- endif -%}
{%- else -%}
{%- if product.featured_image != blank -%}
{%- render 'responsive-image' with
image: product.featured_image
-%}
{%- endif -%}
{%- endif -%}
{% if product.media.size > 1 and settings.products_hover_action == ‘show_second_image’ %}
{% if first_video != blank %}
{{ first_video | video_tag: controls: false, image_size: ‘300x300’, autoplay: true, muted: true, loop: true, playsinline: true, class: 'opacity-0 product-item-hover object-cover absolute top-0 right-0 bottom-0 left-0 w-full h-full z-10 ’ }}
{% else %}
{% assign hover_image = product.media[1].preview_image %}
{% if product.media.size > 1 and settings.products_hover_action == ‘slideshow’ and embellishments != false %}
{% if first_video != blank %}
{{ first_video | video_tag: controls: false, image_size: '300x300', autoplay: true, muted: true, loop: true, playsinline: true, class: 'object-cover absolute top-0 right-0 bottom-0 left-0 w-full h-full' }}
{%- endif-%}
{%- assign counter = 1 -%}
{% for media in product.media %}
{%- liquid
assign hover_image = product.media[1].preview_image
if first_video != blank and counter == 2
assign counter = counter | plus: 1
endif
-%}
{%- assign counter = counter | plus: 1 -%}
{% endfor%}
{% endif %}
{% if on_sale %}
{{ 'products.product.on_sale' | t }}
{% if audio_preview %}
<button
class=“z-40 absolute bottom-4 right-4 {% if product.media.size > 1 and settings.products_hover_action == “slideshow” %}bottom-16{% endif %} lg:bottom-auto lg:right-auto lg:top-1/2 lg:left-1/2 lg:transform lg:-translate-y-1/2 lg:-translate-x-1/2 rounded-full w-14 h-14 lg:w-18 lg:h-18 bg-{{ section_color }}-background text-{{ section_color }}-background-overlay flex items-center justify-center lg:opacity-0 hover:bg-{{ section_color }}-accent hover:text-{{ section_color }}-accent-overlay transition-opacity”
@Click =“playButtonToggle()”
:class=“{ ‘lg:opacity-100’: hover || is_playing }”
x-cloak
{%- if product.media.size > 1 and settings.products_hover_action == “slideshow” -%}
<button :class=“{ ‘lg:opacity-100’: hover }” @Click =“if (current_media === 1){ current_media = {{ product.media.size | plus: 0 }} } else { current_media–}” role=“button” class=“product-grid-btn transform -translate-x-full z-30 p-4 absolute -right-px bottom-0 lg:left-0 lg:right-auto lg:top-1/2 lg:-translate-y-1/2 lg:-translate-x-0 lg:bottom-auto bg-{{ section_color }}-background lg:opacity-0 {% if three_products_mobile %}hidden lg:block{% endif %}”>
{{ ‘sections.slideshow.previous_slide’ | t }}
{% render ‘icon-chevron-right’ %}
<button :class=“{ ‘lg:opacity-100’: hover }” @Click =“if (current_media === {{ product.media.size | plus: 0 }}){ current_media = 1 } else { current_media++}” role=“button” class=“product-grid-btn transform lg:-translate-y-1/2 z-30 p-4 absolute right-0 bottom-0 lg:top-1/2 lg:bottom-auto bg-{{ section_color }}-background lg:opacity-0 {% if three_products_mobile %}hidden lg:block{% endif %}”>
{{ ‘sections.slideshow.next_slide’ | t }}
{% render ‘icon-chevron-right’ %}
{%- endif -%}
{%- if settings.enable_color_swatches_collections -%}
{%- assign swatch_trigger = 'products.product.color_swatch_trigger' | t | downcase -%}
{%- for option in product.options_with_values -%}
{%- liquid
assign is_color = false
assign option_downcase = option.name | downcase
if option_downcase contains swatch_trigger
assign is_color = true
elsif swatch_trigger == 'color' and option_downcase contains 'colour'
assign is_color = true
endif
-%}
{%- if is_color -%}
{%- liquid
assign option_index = forloop.index0
assign values = ''
-%}
{%- for variant in product.variants -%}
{%- assign value = variant.options[option_index] %}
{%- unless values contains value -%}
{%- liquid
assign values = values | join: ','
assign values = values | append: ',' | append: value
assign values = values | split: ','
-%}
{%- if variant.image -%}
{%- endif -%}
{%- endunless -%}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{% if settings.product_grid_item_star_ratings != ‘none’ %}
{% render 'star-rating',
type: settings.product_grid_item_star_ratings,
product: product,
%}
{{ product.title }}
{% if settings.products_split_title and product.title contains '-' %}
{%- assign title = product.title | split: '-' -%}
{% if section.settings.show_vendor %}
{{ title | last | strip }}
{{ title | first | strip }}
{% else %}{{ product.title }}
{% endif %}{{ product.vendor }}
{% endif %}{% assign metafield = settings.product_additional_metafield %}
{% if product.metafields.label_theme[metafield] != blank and settings.show_product_grid_metafield_collection_grid %}
{{ product.metafields.label_theme[metafield].value }}
{% endif %}{% comment %} You can show a leading 'from' or 'up to' by checking 'product.price_varies' if your variants have different prices. {% endcomment %}
{% if on_sale %}
{% if product.price_varies %}
{% assign sale_price = product.price | money %}
{{ ‘products.general.from_text_html’ | t: price: sale_price }}
{% else %}
{% unless sold_out %}
{{ product.price | money }}
{% endunless %}
{% endif %}
{% else %}
{% if product.price_varies %}
{% assign price = product.price | money %}
{{ ‘products.general.from_text_html’ | t: price: price }}
{% else %}
{% unless sold_out %}
{{ product.price | money }}
{% endunless %}
{% endif %}
{% endif %}
{% if sold_out %}
{{ ‘products.product.sold_out’ | t }}
{% endif %}
{% if on_sale %}
{{ ‘products.general.regular_price’ | t }}
{{ product.compare_at_price | money }}
{% endif %}
{% assign current_variant = product.first_available_variant %}
{%- if current_variant.unit_price -%}
{{- current_variant.unit_price | money -}} / {%- if current_variant.unit_price_measurement.reference_value != 1 -%} {{- current_variant.unit_price_measurement.reference_value -}} {%- endif -%} {{- current_variant.unit_price_measurement.reference_unit -}}
{%- endif -%}{%- if settings.enable_color_swatches_collections -%}
{%- for option in product.options_with_values -%}
{%- liquid
assign is_color = false
assign swatch_trigger = ‘products.product.color_swatch_trigger’ | t | downcase
assign option_downcase = option.name | downcase
if option_downcase contains swatch_trigger
assign is_color = true
elsif swatch_trigger == ‘color’ and option_downcase contains ‘colour’
assign is_color = true
endif
-%}
{%- if is_color -%}
{%- assign option_index = forloop.index0 -%}
{%- assign values = '' -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- for variant in product.variants -%}
{%- assign value = variant.options[option_index] %}
{%- unless values contains value -%}
{%- liquid
assign values = values | join: ','
assign values = values | append: ',' | append: value
assign values = values | split: ','
assign color_image = value | handle | append: ‘.’ | append: ‘png’ | file_img_url: ‘50x’ | prepend: ‘https:’
assign color_swatch_fallback = value | split: ’ ’ | last | handle
assign color_count = color_count | plus: 1
-%}
<a
href=“{{ variant.url | within: collection }}”
class=“relative block p-px m-0.5 border-{{ section_color }}-border border min-w-4 cursor-pointer cursor-pointer”
x-on:mouseenter=“current_swatch_variant = ‘{{ variant.id }}’”
x-on:focus=“current_swatch_variant = ‘{{ variant.id }}’”
{{ value }}
{%- endunless -%}
{%- endfor -%}
kindly share your Store URL
Still there Zworthkey?
Hello - I hope you can help me. I have added similar code to my Product Colloection pages that add a “Add to Cart” button under each product/image. There are a couple, however, that would like to HIDE the button based on a TAG. I have made a few attempts but it does not work for me. Could you suggest a small bit of code that would accomplish this and advise as to where it should be placed in the theme code?
Many thanks,
Robert