The Clerk.io Developer Hub

Welcome to the Clerk.io developer hub. You'll find comprehensive guides and documentation to help you start working with Clerk.io as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Shopify

How to set Clerk.io up on a Shopify store.

When you add a new store in Clerk.io our setup guide will guide you through everything. The steps below are just for external reference ;-)

Log in to my.clerk.io here

1. Inserting The Website-Tracking Code

  1. Login to the Clerk admin at my.clerk.io and go to Store Settings, by clicking the settings icon in the top right corner of your Store.
  2. Locate the Website Tracking Code, and copy it.
  3. Login to the Shopify backend, and go to Online Store->Themes->Customize Theme.
  4. At the top of this page, click Theme options->Edit HTML/CSS.
  5. Open the theme.liquid file. Insert the tracking script at the bottom of this file, just above the </body> tag to include it in all pages
  6. Keep this page open as a separate tab. You will need it again later.

2. Setting Up Sales-Tracking

  1. In the Shopify backend, go to Settings->Checkout.
  2. Find the Additional Scripts box on the page.
  3. Start by copying in the website-tracking code here as well. Its a separate page, so it needs to be included again.
  4. Insert the following tracking code above the website-tracking code
<span
      class="clerk"
      data-api="log/sale"
      data-sale="{{ order_number }}"
      data-customer="{{ customer.id }}"
      data-email="{{ customer.email }}"
      data-products='[{% for line_item in line_items %}{% if forloop.index0 > 0
      %}, {% endif %} {"id": {{ line_item.product.id }},"quantity": {{line_item.quantity}},"price": {{line_item.price | divided_by: 100.00}} }{% endfor %}]'>
</span>

3. Setting Up Data Synchronisation

  1. In the Shopify backend, go to Apps->Private Apps .
  2. Click the Create private app button and name the app Clerk.io
  3. Make sure to give the app Read and Write access to:
    • Scripts
    • Script tags in your store's theme template files
  4. Go to Data Sync in my.clerk.io, and choose Shopify in the Sync Method dropdown.
  5. Write in your Hostname. This usually has the syntax shopname.myshopify.com
  6. Copy the API key, Password and Shared Secret keys to their corresponding fields in my.clerk.io.
  7. Set the Shopify Image size type. With shopify you can resize and crop images like this 210x210.
  8. Click Update Settings and afterwards click Start Sync.

4. Installing the Search Engine

  1. Go to Templates at my.clerk.io.
  2. Create a new template called "Search" and choose Website as the type.
  3. Choose Responsive Search Page as the Prepared Design.
  4. Create another template called Live-Search and choose Website as the type. Optionally, choose a starting template as well.
  5. Go to Content and create 1 Content block called Search and 1 called Live-Search.
  6. Configure the Search Content to use the Search type and the Live-Search Content to use Live-Search.
  7. Open the Shopify Theme collection of .liquid files that you used in the first step of the integration.
  8. Open the search.liquid file.
  9. Copy the embedcode into the section just below the <div id="search"> tag and click Save.
<span
      id="clerk-search"
      class="clerk"
      data-template="@search"
      data-limit="40"
      data-offset="0"
      data-target="#clerk-search-results"
      data-after-render="_clerk_after_load_event"
      data-query="{{search.terms}}"> 
</span>

<ul id="clerk-search-results"></ul>

<div id="clerk-search-no-results" style="display: none;"></div>

<button id="clerk-search-load-more-button">Load More Results</button>

<script type="text/javascript">
  jQuery('#clerk-search-load-more-button').on('click', function() {
    var e = jQuery('#clerk-search');
    e.data('offset', e.data('offset') + e.data('limit'));
    Clerk.renderBlocks('#clerk-search');
  });
  function _clerk_after_load_event(data) {
    if(data.response.result.length == 0) {
      jQuery('#clerk-search-load-more-button').hide();
      if(jQuery('#clerk-search-results').is(':empty')) {
        jQuery('#clerk-search-no-results').show();
      }
    }
  }
</script>
  1. Remember to comment out your existing search-code.
  2. Open the index.liquid file.
  3. Find the search-field input tag in the file. This needs to be supplied with the ID "search" to bind the live-search:
    <input id="search" type="text" value="{{ search.terms }}" name="q" class="search_box" placeholder="search"/>
  4. Assuming you named your Live-Search template as described in step 1, copy in the following embedcode just above the Webshop-Tracking code that you inserted earlier.
<span class="clerk" data-template="@live-search" data-bind-live-search="#search"></span>

5. Creating and Embedding Recommendations

  1. Create unique Content blocks for each slider/recommendations box.
  2. Choose the relevant Type for each recommendation in its own Content block.
  3. If you havent done it yet, create a Template that you can use in all the recommendations, so they have the same styling.
  4. On each Content block, choose Shopify in the dropdown (Shopify Basket, if you are embedding a banner on the basket page), and click Copy Embed Code To Clipboard
  5. Insert the embed-code in the relevant .liquid file, where you want the banner to be shown.
    Common page-files are:
    • Frontpage: index.liquid
    • Category page: collection.liquid
    • Product-page: product.liquid
    • Cart: cart.liquid
  6. Style the banners to your liking, by going to [Templates[(https://docs.clerk.io/docs/templates), and choosing a Product Code and Container Code styling.
  7. In most cases, the design of the shop can be copied directly, by simply copy-pasting a products HTML and replacing specific product data with Template Variables.

Shopify

How to set Clerk.io up on a Shopify store.