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

Add an "Add to Cart" button to your Clerk.io Search and Recommendations content. 

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 </div>.

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
  and , so that the appropriate products and quantities are referenced once live on your webshop.

• Give your Clerk design a new <div> 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=&amp;id_product=&amp;" rel="nofollow" title="Add to Cart" data-id-product-attribute="0" data-id-product="" data-minimal_quantity=""> 

 <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.

Did this answer your question?