Identifying and Adding Add-To-Cart Buttons to your Clerk.io Products

To implement an add-to-cart button within your Clerk.io 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 Clerk.io 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

  {{ product.id }} 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="https://www.examplelinktocart.com/cart?add={{ product.qty }}&amp;id_product={{ product.id }}&amp;" rel="nofollow" title="Add to Cart" data-id-product-attribute="0" data-id-product="{{ product.id }}" data-minimal_quantity="{{ product.qty }}">

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

</div>

Paste your code into the HTML of your Design:

You can adjust your Design using CSS below the HTML.