Add Ajax "Quick Add to Cart" to Collection page of Debut theme?

Technical Q&A
1
  • Debut’s a great theme but it’s missing a few things; like Quick Add to Cart buttons on collection pages
  • Is it possible to add Quick Add to Cart buttons/functionality to Debut theme that keeps visitors on the collection page while adding the product to cart and triggering a pop-up (in the same manner as adding to cart works from the product page — Product adds to cart > Notification gets triggered > All while remaining on the same page (which I guess is ajax powered I guess)?
  • If so how can I make this happen?
  • Thanks!
1 Like
2

Ça marche bien. Je le mets toujours dans mes applications sur Shopify pour le thème Debut. Effectivement le thème Debut n’a pas l’option d’afficher directement le add cart sous les produits. Mais avec cette application c’est facile et très simple.

3

Hello @NonStopShop ,

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.
​
4
  • Thanks for the reply @EvinceDev
  • That’s the easy part — adding the button — but I’m trying to make it work the same as the product page (which is via ajax I believe)
  • Obviously it’s a far superior customer experience when customers can add-to-cart while remaining on the Collections page (so they can keep shopping)
  • If anyone can help guide the ajax integration that would be sweet
5

Hey @NonStopShop , did you ever discover solution for this? I am in the same boat atm :slightly_smiling_face:

6

Could you please try this way https://cartjs.org/pages/guide I am sure that will help you.

7

Hey there Hope you are doing well

1- Create a snippet and name it addtocart and paste the following code:

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

{%- assign current_variant = variant.id -%}

{% if section_onboarding %}

{% else %}
{% capture "form_classes" -%}
product-form product-form-{{ section.id }}
{%- if section.settings.enable_payment_button and product.has_only_default_variant%} product-form--payment-button-no-variants{% endif %}
{%- if current_variant.available == false %} product-form--variant-sold-out {%- endif -%}
{%- endcapture %}
{% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
{% unless section_onboarding %}
{% unless product.has_only_default_variant %}

{% endunless %}

{% endunless %}

{{ 'general.accessibility.error' | t }} 
{% include 'icon-error' %}
{{ 'products.product.quantity_minimum_message' | t }}

{% endform %}
{% endif %}

{%- comment -%}
Live region for announcing updated price and availability to screen readers
{%- endcomment -%}

{%- comment -%}
Live region for announcing that the product form has been submitted and the
product is in the process being added to the cart
{%- endcomment -%}

{{ 'products.product.loader_label' | t }}

{% unless product == empty %}

{% endunless %}

2- In Your collection template include the snippet where it says product-card-grid

{% include ‘addtocart’ %}

Thankyou

1 Like
8

Works perfectly! Thanks a lot for posting this :slightly_smiling_face:

9

I tried this on my site, but I got a liquid error message like this in place of the “Add to cart” section:

translation missing: en.general.accessibility.error Liquid error (snippets/addtocart line 48): Could not find asset snippets/icon-error.liquid translation missing: en.products.product.quantity_minimum_message

Did I miss a step?

10

it work, but how can i reduce the space between “add to card” and product