Adding an Add to Cart Button to Collection Pages in Shopify Debut Theme Ajax

This can be achieved with a small coding tweak. Shopify Debut theme comes with Ajax facility already. This means, when you add an item to the cart, the page does not refresh or take you to the cart page as many other Shopify themes do. Instead, the item gets added into the cart at the backend while you remain on the same page and you get a notification.

How to edit Shopify Debut theme code

  • Click the online store on the left sidebar of Shopify admin panel
  • Click on Themes
  • Click on Debut theme actions
  • Click on Edit Code

Now you will reach to the theme code section of Shopify. On the left sidebar of the coding section find a file named product-card-grid.liquid. It can be found under the Snippets section.

How to add an add-to-cart button to Shopify Debut theme collection pages?

Ajax code for adding an add-to-cart button to Shopify Debut theme

Add the following lines of code at the bottom of the page. This has been extracted and customised from the product page of the same theme to match with other theme settings. All you have to do is to copy these lines of codes and paste it at the bottom of the product-card-grid.liquid page.

<div
  id="ProductSection-{{ section.id }}"
  data-section-id="{{ section.id }}"
  data-section-type="product"
  data-enable-history-state="true"
  data-ajax-enabled="{{ settings.enable_ajax }}"
>
  {%- assign current_variant = product.selected_or_first_available_variant -%}
  {% form 'product', product, class:form_classes, novalidate: 'novalidate',
 data-product-form: '' %} 

  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input min="1" type="hidden" id="quantity" name="quantity" value="1"/>
  <button type="submit" name="add"               
          aria-label="{{ 'products.product.add_to_cart' | t }}"
          class="btn product-form__cart-submit
{% if section.settings.enable_payment_button %} 
btn--secondary-accent{% endif %}"
          {% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}
          data-add-to-cart>
    <span data-add-to-cart-text>
      {{ 'products.product.add_to_cart' | t }}
    </span>
    <span class="hide" data-loader>
      {% include 'icon-spinner' %}
    </span>
  </button>
  {% endform %}

</div>


{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
  <script type="application/json" id="ModelJson-{{ section.id }}">
    {{ product.media | where: 'media_type', 'model' | json }}
  </script>
{% endunless %}

This will add one qty of the default variant of the products that you have just added. You can customise this code to make it look like how you would want.

Customisation

You can also customise it to display the product variants or display the qty box. You have to tweak the CSS classes to change the looks of the button and spacing.

Leave a Comment