Ajax cart recommendations in the Supply theme

CSS Templates

We recently had a customer using the Supply theme in Shopify, who needed a hand getting Ajax cart recommendations working.

We edited snippets/ajax-cart.template.liquid and added the parts below in bold to the drawerTemplate


  <script id="drawerTemplate" type="text/template">
  {% raw %}
    <div id="ajaxifyDrawer" class="ajaxify-drawer">
      <div id="ajaxifyCart" class="ajaxifyCart--content {{wrapperClass}}" 
      style="margin-bottom: -225px; padding-bottom: 249px;">
      </div>
      {% endraw %}      
      {% include 'betterrecs', purpose: 'ajax_cart' %}
      {% raw %}
    </div>
    <div class="ajaxifyDrawer-caret"><span></span></div>
  {% endraw %}
  </script>

Note the negative margin and large padding. These are to make space in the ajax cart for the recommendations.

Find us on Shopify