Re: Add to Cart Button in Collection page of Debutify Theme

MozzafiatoStore · ‎04-13-2020

Hi everyone,

my theme has an option to change header color, in my site its set to black, but sometimes in the main page it turn transparent... also in the main page sometimes when i click on the images of the main product, it doesnt display them in big . my site is www.mozzafiatostore.com , so you can check what i mean

i also add my theme.liquid:

thanks for your help

Click to expand...

<!doctype html> <html class="no-js" lang="{{ shop.locale }}"> <head> {% capture sb %}{% include "Secomapp-Description" %}{% endcapture %}{% unless sb contains "Liquid error" %}{% include "Secomapp-Description" %}{% endunless %}  <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link rel="canonical" href="{{ canonical_url }}"> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> <meta name="theme-color" content="{{ settings.color_primary }}"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <meta name="author" content="Debutify">  {% if settings.favicon %} <link sizes="192x192" rel="shortcut icon" href="{{ settings.favicon | img_url: '192x192' }}" type="image/png"> {% endif %}  <title> {{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} – {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %} </title> {% if page_description %} {% endif %}  {% include 'social-meta-tags' %}  {{ 'theme.scss.css' | asset_url | stylesheet_tag }}  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">  <script> window.theme = window.theme || {}; theme.strings = { zoomClose: {{ "products.zoom.close" | t | json }}, zoomPrev: {{ "products.zoom.prev" | t | json }}, zoomNext: {{ "products.zoom.next" | t | json }}, moneyFormat: {{ shop.money_format | json }}, addressError: {{ 'home_page.map.address_error' | t | json }}, addressNoResults: {{ 'home_page.map.address_no_results' | t | json }}, addressQueryLimit: {{ 'home_page.map.address_query_limit_html' | t | json }}, authError: {{ 'home_page.map.auth_error_html' | t | json }}, cartCookie: {{ 'cart.general.cookies_required' | t | json }} }; theme.settings = { cartType: {{ settings.cart_type | json }}, gridType: {{ settings.collection_products_grid | json }} }; </script> {{ 'jquery-2.2.3.min.js' | asset_url | script_tag }} {% include 'currency-detection' %} <script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script> <script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>  {{ content_for_header }} <script>window.beans_cjs_id = '{{ customer.id }}'; window.beans_cjs_email = '{{ customer.email }}';</script> {{ 'modernizr.min.js' | asset_url | script_tag }} {% comment %} If you store has customer accounts disabled, you can remove the following JS file {% endcomment %} {% if template.directory == 'customers' %} {{ 'shopify_common.js' | shopify_asset_url | script_tag }} {% endif %} <meta name="google-site-verification" content="NWXfaLE1FvnY5ObvzsNG6q6H9WrE-GhCMn2WNcuqM3I" /> {% include 'loadify_loader' %} {% include 'qikify-navigator' %} {% include 'qikify-smartmenu-data' %} <script type="text/javascript" src="https://sdk.qikify.com/tmenu/app-v5.js?token=y9yo264N9PA5DlEwXvo3RBxx9Uk3uwiq&shop=mozzafiatostore.m..." defer="defer"></script> {% include "loyaltylion" %} {% include 'talkable-partial' %} <script>var scaaffCheck = false;</script> {{ 'sca_affiliate.js' | asset_url | script_tag }} </head> {% comment %} Add the page template as a class for easy page or template specific styling. {% endcomment %} <body id="{{ page_title | handle }}" class="{% if settings.show_announcement %}announcement-active{% endif %} {% if settings.hide_announcement_mobile %}announcement-mobile-hide{% endif %} {% if settings.sticky_header %}sticky-header{% endif %} {% if settings.hero_header %}transparent-header{% endif %} {% if customer %}customer-logged-in {% endif %} template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}"> <div id="SearchDrawer" class="drawer drawer--top"> <div class="drawer__inner"> {% include 'search-bar', input_type: 'input-group-full', search_location: 'drawer' %} </div> </div> {% section 'drawer-menu' %} <div id="CartDrawer" class="drawer drawer--right drawer--has-fixed-header drawer--has-fixed-footer"> <div class="drawer__fixed-header"> <div class="drawer__header"> <div class="drawer__title"> <a href="{{ routes.cart_url }}"> <span class="fas fa-shopping-{{ settings.cart_icon }}" aria-hidden="true"></span> {{ 'cart.general.title' | t }} </a> </div> <div class="drawer__close"> <button type="button" class="btn btn-square-small icon-fallback-text drawer__close-button js-drawer-close"> <span class="fas fa-times" aria-hidden="true"></span> <span class="fallback-text">{{ 'cart.general.close_cart' | t }}</span> </button> </div> </div> </div> <div class="drawer__inner"> <p class="ajaxcart-loading-icon fas fa-spinner fa-spin text-center"></p> <div class="cart-empty-container text-center"> <p class="cart--empty-message">{{ 'cart.general.empty' | t }}</p> <a href="{{ settings.browsing_link }}" class="btn {{ settings.browsing_button_style }} cart--continue-browsing">{{ 'cart.general.continue_browsing_html' | t }}</a> <p class="cookie-message">{{ 'cart.general.cookies_required' | t }}</p> </div> <div id="CartContainer" class="drawer__cart"></div> </div> </div> <div id="PageContainer" class="page-container"> {% include 'announcement' %} {% section 'header' %} {% unless template == 'collection' or template == 'article' %} {% include 'breadcrumbs' %} {% endunless %} <main class="main-content" role="main"> <div class="{% if template == 'index' or template == 'collection' or template == 'product' or template == 'article' %}wrapper-full {% elsif template == 'page.full-width' %}wrapper-fluid {% else %} wrapper{% endif %}"> {{ content_for_layout }} {% include 'station-tabs' %} </div> </main> {% section 'guarantee' %} {% section 'footer' %} {% if settings.show_top_button %} <a href="#" class="btn-top btn btn--square btn-top-{{ settings.top_button_position }} {% if settings.top_button_mobile %}small--hide{% endif %}"> <span class="fas fa-arrow-up"></span> </a> {% endif %} <div class="overlay-drawer"></div> </div> {% comment %} Template-specific js {% endcomment %} <script> {% if resetPassword %} $(function() { timber.resetPasswordSuccess(); }); {% endif %} </script> {% comment %} Ajaxify your cart with this plugin. Documentation: - http://shopify.com/timber#ajax-cart {% endcomment %} {% if settings.cart_type == 'drawer' %} {% include 'ajax-cart-template' %} {% endif %} {% if template.name == 'product' or template.name == 'index' %} <script> // Override default values of shop.strings for each template. // Alternate product templates can change values of // add to cart button, sold out, and unavailable states here. theme.productStrings = { addToCart: {{ 'products.product.add_to_cart' | t | json }}, soldOut: {{ 'products.product.sold_out' | t | json }}, unavailable: {{ 'products.product.unavailable' | t | json }} } </script> {% endif %} {% if template.name == 'collection' %} <script> /* Product Tag Filters - Good for any number of filters on any type of collection pages */ var collFilters = jQuery('.tag-filter'); collFilters.change(function() { var newTags = []; collFilters.each(function() { if (jQuery(this).val()) { newTags.push(jQuery(this).val()); } }); if (newTags.length) { var query = newTags.join('+'); window.location.href = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('/' + 'tag', '/' + query); } else { {% if collection.handle %} window.location.href = '/collections/{{ collection.handle }}'; {% elsif collection.products.first.type == collection.title %} window.location.href = '{{ collection.title | url_for_type }}'; {% elsif collection.products.first.vendor == collection.title %} window.location.href = '{{ collection.title | url_for_vendor }}'; {% endif %} } }); </script> {% endif %} {% if template.name == 'cart' and settings.cart_top_button %} <script> $('document').ready(function(){ $('#topCheckoutButton').click(function(event){ event.preventDefault(); $('.cart__checkout').click(); }); }); </script> {% endif %} {% include 'gtranslate', float: 'yes' %} {{ '//cdn.shopify.com/s/files/1/0194/1736/6592/t/1/assets/booster-page-speed-optimizer.js?23' | script_tag }} </body> </html>

<!doctype html> <html class="no-js" lang="{{ shop.locale }}"> <head> {% capture sb %}{% include "Secomapp-Description" %}{% endcapture %}{% unless sb contains "Liquid error" %}{% include "Secomapp-Description" %}{% endunless %}  <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link rel="canonical" href="{{ canonical_url }}"> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> <meta name="theme-color" content="{{ settings.color_primary }}"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <meta name="author" content="Debutify">  {% if settings.favicon %} <link sizes="192x192" rel="shortcut icon" href="{{ settings.favicon | img_url: '192x192' }}" type="image/png"> {% endif %}  <title> {{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} – {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %} </title> {% if page_description %} {% endif %}  {% include 'social-meta-tags' %}  {{ 'theme.scss.css' | asset_url | stylesheet_tag }}  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">  <script> window.theme = window.theme || {}; theme.strings = { zoomClose: {{ "products.zoom.close" | t | json }}, zoomPrev: {{ "products.zoom.prev" | t | json }}, zoomNext: {{ "products.zoom.next" | t | json }}, moneyFormat: {{ shop.money_format | json }}, addressError: {{ 'home_page.map.address_error' | t | json }}, addressNoResults: {{ 'home_page.map.address_no_results' | t | json }}, addressQueryLimit: {{ 'home_page.map.address_query_limit_html' | t | json }}, authError: {{ 'home_page.map.auth_error_html' | t | json }}, cartCookie: {{ 'cart.general.cookies_required' | t | json }} }; theme.settings = { cartType: {{ settings.cart_type | json }}, gridType: {{ settings.collection_products_grid | json }} }; </script> {{ 'jquery-2.2.3.min.js' | asset_url | script_tag }} {% include 'currency-detection' %} <script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script> <script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>  {{ content_for_header }} <script>window.beans_cjs_id = '{{ customer.id }}'; window.beans_cjs_email = '{{ customer.email }}';</script> {{ 'modernizr.min.js' | asset_url | script_tag }} {% comment %} If you store has customer accounts disabled, you can remove the following JS file {% endcomment %} {% if template.directory == 'customers' %} {{ 'shopify_common.js' | shopify_asset_url | script_tag }} {% endif %} <meta name="google-site-verification" content="NWXfaLE1FvnY5ObvzsNG6q6H9WrE-GhCMn2WNcuqM3I" /> {% include 'loadify_loader' %} {% include 'qikify-navigator' %} {% include 'qikify-smartmenu-data' %} <script type="text/javascript" src="https://sdk.qikify.com/tmenu/app-v5.js?token=y9yo264N9PA5DlEwXvo3RBxx9Uk3uwiq&shop=mozzafiatostore.myshopify.com" defer="defer"></script> {% include "loyaltylion" %} {% include 'talkable-partial' %} <script>var scaaffCheck = false;</script> {{ 'sca_affiliate.js' | asset_url | script_tag }} </head> {% comment %} Add the page template as a class for easy page or template specific styling. {% endcomment %} <body id="{{ page_title | handle }}" class="{% if settings.show_announcement %}announcement-active{% endif %} {% if settings.hide_announcement_mobile %}announcement-mobile-hide{% endif %} {% if settings.sticky_header %}sticky-header{% endif %} {% if settings.hero_header %}transparent-header{% endif %} {% if customer %}customer-logged-in {% endif %} template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}"> <div id="SearchDrawer" class="drawer drawer--top"> <div class="drawer__inner"> {% include 'search-bar', input_type: 'input-group-full', search_location: 'drawer' %} </div> </div> {% section 'drawer-menu' %} <div id="CartDrawer" class="drawer drawer--right drawer--has-fixed-header drawer--has-fixed-footer"> <div class="drawer__fixed-header"> <div class="drawer__header"> <div class="drawer__title"> <a href="{{ routes.cart_url }}"> <span class="fas fa-shopping-{{ settings.cart_icon }}" aria-hidden="true"></span> {{ 'cart.general.title' | t }} </a> </div> <div class="drawer__close"> <button type="button" class="btn btn-square-small icon-fallback-text drawer__close-button js-drawer-close"> <span class="fas fa-times" aria-hidden="true"></span> <span class="fallback-text">{{ 'cart.general.close_cart' | t }}</span> </button> </div> </div> </div> <div class="drawer__inner"> <p class="ajaxcart-loading-icon fas fa-spinner fa-spin text-center"></p> <div class="cart-empty-container text-center"> <p class="cart--empty-message">{{ 'cart.general.empty' | t }}</p> <a href="{{ settings.browsing_link }}" class="btn {{ settings.browsing_button_style }} cart--continue-browsing">{{ 'cart.general.continue_browsing_html' | t }}</a> <p class="cookie-message">{{ 'cart.general.cookies_required' | t }}</p> </div> <div id="CartContainer" class="drawer__cart"></div> </div> </div> <div id="PageContainer" class="page-container"> {% include 'announcement' %} {% section 'header' %} {% unless template == 'collection' or template == 'article' %} {% include 'breadcrumbs' %} {% endunless %} <main class="main-content" role="main"> <div class="{% if template == 'index' or template == 'collection' or template == 'product' or template == 'article' %}wrapper-full {% elsif template == 'page.full-width' %}wrapper-fluid {% else %} wrapper{% endif %}"> {{ content_for_layout }} {% include 'station-tabs' %} </div> </main> {% section 'guarantee' %} {% section 'footer' %} {% if settings.show_top_button %} <a href="#" class="btn-top btn btn--square btn-top-{{ settings.top_button_position }} {% if settings.top_button_mobile %}small--hide{% endif %}"> <span class="fas fa-arrow-up"></span> </a> {% endif %} <div class="overlay-drawer"></div> </div> {% comment %} Template-specific js {% endcomment %} <script> {% if resetPassword %} $(function() { timber.resetPasswordSuccess(); }); {% endif %} </script> {% comment %} Ajaxify your cart with this plugin. Documentation: - http://shopify.com/timber#ajax-cart {% endcomment %} {% if settings.cart_type == 'drawer' %} {% include 'ajax-cart-template' %} {% endif %} {% if template.name == 'product' or template.name == 'index' %} <script> // Override default values of shop.strings for each template. // Alternate product templates can change values of // add to cart button, sold out, and unavailable states here. theme.productStrings = { addToCart: {{ 'products.product.add_to_cart' | t | json }}, soldOut: {{ 'products.product.sold_out' | t | json }}, unavailable: {{ 'products.product.unavailable' | t | json }} } </script> {% endif %} {% if template.name == 'collection' %} <script> /* Product Tag Filters - Good for any number of filters on any type of collection pages */ var collFilters = jQuery('.tag-filter'); collFilters.change(function() { var newTags = []; collFilters.each(function() { if (jQuery(this).val()) { newTags.push(jQuery(this).val()); } }); if (newTags.length) { var query = newTags.join('+'); window.location.href = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('/' + 'tag', '/' + query); } else { {% if collection.handle %} window.location.href = '/collections/{{ collection.handle }}'; {% elsif collection.products.first.type == collection.title %} window.location.href = '{{ collection.title | url_for_type }}'; {% elsif collection.products.first.vendor == collection.title %} window.location.href = '{{ collection.title | url_for_vendor }}'; {% endif %} } }); </script> {% endif %} {% if template.name == 'cart' and settings.cart_top_button %} <script> $('document').ready(function(){ $('#topCheckoutButton').click(function(event){ event.preventDefault(); $('.cart__checkout').click(); }); }); </script> {% endif %} {% include 'gtranslate', float: 'yes' %} {{ '//cdn.shopify.com/s/files/1/0194/1736/6592/t/1/assets/booster-page-speed-optimizer.js?23' | script_tag }} </body> </html>

KetanKumar · ‎04-13-2020

Hello, @MozzafiatoStore

Thanks for post.

i have check sorry but i don't know the issue can you please provide a screen short of our video.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

BFYJ · ‎04-19-2021

How to Add to Cart Button in Collection page of Debutify Theme?

KetanKumar · ‎04-19-2021

@BFYJ

can you please try this

Just follow the steps for Debut theme for Add to cart button on collection pages.

From Shopify Admin select Online Store and click on Themes
Choose your main theme
Click the . . . on the top left-right (see below) and hit Edit code

Open Snippets -> product-card-grid.liquid File and paste below code at the end of the page.

<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>

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

BFYJ · ‎04-19-2021

Thank you for your Immediate Reply but My theme is not "debut" it's "debutify"

KetanKumar · ‎04-19-2021

yes i know but some code style both are theme just add code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

BFYJ · ‎04-19-2021

Yes it's working, Thank you! But there is Placement Issue ATC button is next to the product not below it, can you please help me in that part.

KetanKumar · ‎04-20-2021

@BFYJ

can you please share store url so i will check and update code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

BFYJ · ‎04-20-2021

www.beadsforyourjewelry.com

KetanKumar · ‎04-20-2021

@BFYJ

thanks bt you have something is missing code it cab be done some custom code can you please share pm details

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

BFYJ · ‎04-20-2021

Sir, I have sent you message

KetanKumar · ‎04-20-2021

@BFYJ

thanka i will check and reply message

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

KetanKumar · ‎04-20-2021

@BFYJ

i have done this please check also someone same require please add this code

the flow above step just add this file

product-grid-item.liquid

{% assign has_color_swatches = false %}

{%- if content_for_header contains 'debutify' and settings.dbtfy_color_swatches -%}
  {%- if settings.dbtfy_color_swatches_grid != blank -%}
    {%- if product.available and product.variants.size > 1 -%}
      {% assign has_color_swatches = true %}
    {%- endif -%}
  {%- endif -%}
{%- endif -%}

{%- if emptyState -%}
  {%- assign product_link = '/admin/products' -%}
  {%- assign vendor = 'home_page.onboarding.product_vendor' | t -%}
  {%- assign title = 'home_page.onboarding.product_title' | t -%}
  {%- assign compare_at_price = 2999 -%}
  {%- assign price = 1999 -%}
{%- else -%}
  {%- assign variant = product.first_available_variant -%}
  {%- assign product_link = product.url | within: collection -%}
  {%- assign vendor = product.vendor -%}
  {%- assign title = product.title -%}

  {% if has_color_swatches %}
    {%- assign compare_at_price = variant.compare_at_price -%}
    {%- assign price = variant.price -%}
  {% else %}
    {%- assign compare_at_price = product.compare_at_price -%}
    {%- assign price = product.price -%}
  {% endif %}
{%- endif -%}

{%- if compare_at_price > price -%}
  {%- assign on_sale = true -%}
{%- else -%}
  {%- assign on_sale = false -%}
{%- endif -%}

{%- if product.available or emptyState -%}
  {%- assign sold_out = false -%}
{%- else -%}
  {%- assign sold_out = true -%}
{%- endif -%}

{%- if settings.grid_product_hover and product.images.size > 1 -%}
  {%- assign image_hover = true -%}
{%- else -%}
  {%- assign image_hover = false -%}
{%- endif -%}

{%- assign variant = product.selected_or_first_available_variant -%}

<div class="grid__item grid-product flex {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}" data-product-card data-product-handle="{{ product.handle }}" data-product-id="{{ product.id }}">
  <div class="card grid-product__wrapper {% if image_hover %} has-hover-image{% endif %}">
    <div class="grid-product__image-wrapper">
      <a href="{{ product_link }}?variant={{ product.first_available_variant.id }}" class="grid-product__image-link">
        {%- if product.images != blank -%}
          <div id="ProductImageWrapper-{{ product.featured_image.id }}" class="product--wrapper card-image grid-product--wrapper media-wrapper" style="padding-top:{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100 }}%;">
            <img class="product--image media lazyload ProductImage-{{ product.featured_image.id }}"
            {% render 'lazysizes', img: product.featured_image, img_type: 'responsive' %}
            alt="{{ product.featured_image.alt }}"
            data-image>
          </div>

          {%- if image_hover -%}
            <div class="product--wrapper card-image grid-product--wrapper media-wrapper product-hover-image" style="padding-top:{{ 1 | divided_by: product.images[1].aspect_ratio | times: 100 }}%;">
              <img class="product--image media lazyload"
              {% render 'lazysizes', img: product.images[1], img_type: 'responsive', add_on_crop: settings.dbtfy_product_image_crop %}
              alt="{{ product.images[1].alt }}">
            </div>
          {%- endif -%}
        {%- elsif product.images.size < 1 or emptyState -%}
          {{ 'product-' | append: current | placeholder_svg_tag: 'card-image placeholder-svg' }}
        {%- endif -%}
      </a>

      {%- unless settings.tag_placement == 'none' -%}
        {%- if sold_out -%}
          <span class="badge grid-product__badge grid-product__badge-{{ settings.tag_placement }} disabled">
            <span class="{{settings.icon}}">watch_later</span>
            <span class="product-badge-text tooltip-position-bottom">
              {{ 'products.product.sold_out_html' | t }}
            </span>
          </span>
        {%- elsif on_sale -%}
          {%- capture saved_amount -%}
            {%- if settings.sale_type == 'amount' -%}
             <span class="money">{{ compare_at_price | minus: price | money }}</span>
            {%- elsif settings.sale_type == 'percentage' -%}
              {{ compare_at_price | minus: price | times: 100 | divided_by: compare_at_price }}%
            {%- endif -%}
          {%- endcapture -%}
          <span class="badge grid-product__badge grid-product__badge-{{ settings.tag_placement }}">
            <span class="{{settings.icon}}">local_offer</span>
            <span class="product-badge-text tooltip-position-bottom">
              {{ 'products.general.save_html' | t: saved_amount: saved_amount }}
            </span>
          </span>
        {%- endif -%}
      {%- endunless -%}

      {%- unless emptyState -%}
        {%- render "dbtfy-quick-view" with product as product -%}
        {%- render "dbtfy-wish-list" with product as product -%}
      {%- endunless -%}
    </div>

    {%- unless emptyState -%}
      {%- render "dbtfy-collection-addtocart" with product as product, sold_out: sold_out -%}
    {%- endunless -%}

    <a href="{{ product_link }}?variant={{ product.first_available_variant.id }}" class="card-body flex flex-column justify-center grid-product__meta spacer-auto-xs text-center">
      {%- if has_color_swatches -%}
        {%- render "dbtfy-color-swatches" with product as product, type: 'product_grid' -%}
      {%- endif -%}

      <p class="grid-product__title h6{% if settings.grid_product_truncate %} text-ellipsis{% endif %}">{{ title }}</p>

      {%- if settings.review_badge_product_grid -%}
        {%- unless emptyState -%}
          {%- render 'review-badge' with product as product, position: 'product_grid' -%}
        {%- endunless -%}
      {%- endif -%}

      <p class="grid-product__price-wrap">
        <span class="grid-product__price text-money">

          <span class="price-regular{% if on_sale %} on-sale text-secondary{% endif %}"
                {% if on_sale %}
                aria-label="{{ 'products.general.sale_price' | t }}"
                {% else %}
                aria-label="{{ 'products.general.regular_price' | t }}"
                {% endif %}>
            {%- if product.price_varies and emptyState == false -%}
            <span class="money">{{ product.price_min | money }}+</span>
            {%- else -%}
            <span class="money">{{ price | money }}</span>
            {%- endif -%}
          </span>

          <span class="price-compare text-strike text-muted {% unless on_sale %}hide{% endunless %}"
                aria-label="{{ 'products.general.regular_price' | t }}">
            {%- if on_sale -%}
              <span class="money">{{ compare_at_price | money }}</span>
            {%- else -%}
            <span class="money"></span>
            {%- endif -%}
          </span>
        </span>

        {%- if variant.available and variant.unit_price_measurement -%}
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}

        {%- capture unit_price_base_unit -%}
        <span>
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
          {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        </span>
        {%- endcapture -%}
        <span class="product-unit-price">
          <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
          <span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
        </span>
        {%- endif -%}
      </p>
    </a>

    {%- if settings.grid_product_vendor -%}
    <div class="card-footer text-center">
      <p class="vendor grid-product__vendor text-small text-italic">{{ vendor }}</p>
    </div>
    {%- endif -%}
    
    <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>
    
  </div>
</div>

.grid-product__wrapper form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.grid-product__wrapper form input.btn {
    margin: 15px 0px;
}

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

BFYJ · ‎04-20-2021

Perfect!!! Its working. Thank you so Much

KetanKumar · ‎04-20-2021

@BFYJ

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

BFYJ · ‎11-04-2022

Hi KetanKumar, In the above code how to remove Quantity Picker?

Mudasar · ‎09-09-2023

i have use the above code but its duplicating the product any solution please

Mudasar kamboh

Mudasar · ‎09-09-2023

Hey ketan kumar i have added the same code in my code file but i am facing an issue that i want add to cart button below the product price but its showing on side you can check on image

Mudasar kamboh

KetanKumar · ‎09-09-2023

@Mudasar

oh sorry for that issue can you please share store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Mudasar · ‎09-09-2023

Thank you ketan kumar i solved it by myself now its working fine

Mudasar kamboh

Mudasar · ‎09-15-2023

Hey Ketan Kumar

Hope you are doing well

i want to add sticky add to cart like this in my sense theme.

can you please provide me the code

My store Link:https://mudasir-practice-store.myshopify.com/products/blue-brine

password= cart

Mudasar kamboh

thezihni · ‎05-26-2023

Hello sir, i got bug when i use debutify theme i send you a screen shot maybe you can help me

my website: gourmetware.net

Re: Add to Cart Button in Collection page of Debutify Theme

Why does my Debutify theme header color and product image display change unexpectedly?

Community Blog Articles