Identifying and Adding Add-To-Cart Buttons to your Products

Add an “Add to Cart” button to your Search and Recommendations content.

To implement an add-to-cart button within your Recommendations, first identify the add-to-cart button in your existing native products within your webstore.

Inspect the add-to-cart button to identify the code associated with it. The code will start with a < div> with a class, “button-container” in this example. Copy until the closing.

This will be important to reference in your Recommendations Design in the backend.


Copy and paste this code into your Design. Within that code:

  • You’ll need to identify the Product Quantity and Product ID within the code, including the cart link, the product ID value, and data quality value placements.

    • In this example, the Quantity appears after /cart?add= in the link, and the Product ID is after &id_product=.

    • The Product ID is also referenced at data-id-product, and the Product Quantity at data-minimal_quantity in the example above.

  • These values will be replaced with your liquid placeholders in the Design (such as

    {{ }} and {{ product.qty }}, so that the appropriate products and quantities are referenced once live on your webshop.

  • Give your Clerk design a new

    class name, like " clerk-button-container" to differentiate it from your native store add-to-cart buttons.

In this example, the Design code would then be:

<div class="clerk-button-container">

 <a class="button ajax_add_to_cart_button btn btn-default" style="position: relative;" href="{{ product.qty }}&amp;id_product={{ }}&amp;" rel="nofollow" title="Add to Cart" data-id-product-attribute="0" data-id-product="{{ }}" data-minimal_quantity="{{ product.qty }}">

 <span style="color: orange !important"><i class="icon-shopping-cart" aria-hidden="true"></i></span></a>


Paste your code into the HTML of your Design:


You can adjust your Design using CSS below the HTML.