Shopify Snippets

Tabby snippets let your customers know they can split their payments with Tabby in your store. Snippets appear on the product and cart pages and may help improve conversion.

KSA merchants: Use checkout.tabby.sa instead of checkout.tabby.ai in all snippet script URLs below. See Base URLs.

Please note that snippets alone do not activate Tabby as a payment method in your store and don’t affect payment processing. Before adding snippets, make sure Tabby is already integrated and visible on your checkout page.

Default snippet

”No-price” snippet

Adding Tabby Snippets on Product Pages

Here you may see a video on How to add Tabby snippet to product pages on Shopify:

In your Shopify admin, go to Online Store → Themes.
Click the Customize button on your current theme.
At the top of the screen, click Home page, then choose Products → Default product.
In the left-side menu, add a block, click Apps and choose Tabby Installments.

If your theme doesn’t allow adding a block, please navigate to Manual Snippet Installation

Drag the Tabby Installments block to a desirable position — ideally just below the price.
Click Save and check your storefront to make sure the snippet appear properly.

If the installments don’t display correctly, your theme may not be fully compatible with default Tabby snippets. In that case, we recommend using “No-price” snippets, which don’t show installment amounts. To activate “No-Price” snippets, please click on the Tabby Installments block and switch the Enable “No-price” Snippet toggle to the on position. Don’t forget to save the changes.

Adding Tabby Snippets on Cart Page

Here you may see a video on How to add Tabby snippet to cart page on Shopify:

In your Shopify admin, go to Online Store → Themes.
Click the Customize button on your current theme.
At the top of the screen, click Home page, then choose Products → Cart.
In the left-side menu, add a block, click Apps and choose Tabby Cart Page.

If your theme doesn’t allow adding a block, please navigate to Manual Snippet Installation

Drag the Tabby Cart Page block into a suitable spot.
Click Save and verify that the snippets appear correctly on the storefront.

If installments are incorrect, you can switch to a simplified “No-price” version of the snippet. To activate “No-price” snippets, please click on the Tabby Cart block and switch the Enable “No-price” Snippet toggle to the on position. Don’t forget to save the changes.

Manual Snippet Installation

Some Shopify themes may not support adding blocks on product pages. In such cases, the Tabby snippets need to be added manually. For this, you should create a file with the snippet code in your theme and render it on your product page.

Step 1. Create a file

In the Shopify Admin panel, click Online Store → Themes
On the Themes page, click the “…” → Edit code
In the navigation menu on your left, click the Snippets folder and click the symbol of adding a new file
Name it tabby-installments.liquid

Step 2. Add code

Copy one of the following codes and paste it into the file you’ve created. We offer two variants of snippets: default snippets with installments and “No-price” snippets. The “No-price” code should be used if the default snippets don’t work properly, which may be the case for some themes. Please try the “default” code first.

Default Snippet Code

{%- assign lang = localization.language.iso_code -%}
{%- assign currency = cart.currency.iso_code -%}
<div id="TabbyPromo"></div>
<script>
  (function () {
    const productData = {{ product | json }};
    const currency = '{{ currency }}';
    const lang = '{{ lang }}';
    const publicKey = 'YourAPIkey';
    function getSelectedVariantPrice() {
      const variantId = document.querySelector('[name="id"]')?.value;
      if (!variantId) return null;
      const variant = productData.variants.find(v => v.id == variantId);
      if (!variant) return null;
      return variant.price / 100.0;
    }
    function refreshTabby() {
      const price = getSelectedVariantPrice();
      if (!price) return;
      const promo = document.getElementById('TabbyPromo');
      if (promo) promo.innerHTML = '';
      const merchantCode = (currency === 'AED') ? 'default' :
                           (currency === 'SAR') ? 'ksa' :
                           (currency === 'KWD') ? 'KW' : undefined;
      const config = {
        selector: '#TabbyPromo',
        currency,
        price,
        lang,
        publicKey
      };
      if (merchantCode) config.merchantCode = merchantCode;
      new TabbyPromo(config);
    }
    const script = document.createElement('script');
    script.src = 'https://checkout.tabby.ai/tabby-promo.js';
    script.async = true;
    script.onload = () => {
      refreshTabby();
      const variantSelector = document.querySelector('form[action*="/cart/add"] select');
      if (variantSelector) {
        variantSelector.addEventListener('change', refreshTabby);
      }
      const variantInput = document.querySelector('input[name="id"]');
      if (variantInput) {
        const observer = new MutationObserver(() => {
          refreshTabby();
        });
        observer.observe(variantInput, { attributes: true, attributeFilter: ['value'] });
      }
    };
    document.body.appendChild(script);
  })();
</script>

No-price Snippet Code

{%- liquid
  assign locale = localization.language.iso_code
-%}
<div id="TabbyPromo"></div>
<script>
  (function() {
    const script = document.createElement('script');
    script.src = 'https://checkout.tabby.ai/tabby-promo.js';
    script.async = true;
    script.onload = () => {
      const locale = '{{ locale }}';

      new TabbyPromo({
        selector: '#TabbyPromo',
        locale,
        publicKey: 'yourApiKey', // specify your apiKey, it should be a string
        merchantCode: 'yourMerchantCode', // enum: "default" for AED, "ksa" for SAR, "KW" for KWD
      }); 
    };
    document.body.appendChild(script);
  })();
</script>
<style>
  #TabbyPromo div:empty, #TabbyDialogContainer div:empty {
    display: block;
  }
</style>

Check the variables in the code: For default snippet: Put your Public API Key in the line 9 replacing YourAPIkey text. For No-price snippet: Put your Public API Key in the line 16. In the line 17, put your merchant code based on your store currency, instead of the text yourMerchantCode. Please note that you can find your Public API key in the Tabby Dashboard or in the initial email from your Tabby manager.
Save the changes.

Step 3. Render the Snippet

First, find the file in your theme that is responsible for the page layout. The exact file name may vary depending on the theme, but it’s typically located in the Sections folder. For product page, the most common file names are product.liquid, main-product.liquid, price.liquid, etc. For cart page, it may be cart.liquid or one of the files included in templates/cart.json (e.g., main-cart-items.liquid, cart-footer.liquid)
Once you find appropriate file in your theme, place the following command near the price element:

{% render 'tabby-installments'%}

Click Save and check if the snippets appear correctly in the desired place on the storefront.

If you notice any issues with the content of the default snippet, go back to Step 2 and replace the code in the tabby-installments.liquid file with the “No-price” option. After saving the changes, the “No-price” snippets should appear on the storefront.

Additional scripts

This is an alternative solution for Tabby snippets that relies on the frontend price. It can be used when the main solution, which obtains the product price from the Shopify backend, cannot be applied due to theme-specific limitations.

With-price Snippet Code

Here is the video on how to implement this solution:

In Shopify Admin panel click “Online Store” -> “Themes”;
At the Themes page click ” … ” -> “Edit code”;
In the navigation menu on your left click the “Snippets” folder and click the symbol of adding a new file;
Put the naming “tabby-installments.liquid”;
Put the following code in the created file and click Save:
Do not forget to check the variables in the code (such as publicKey, merchantCode, and priceElement if needed)

{%- liquid
  assign sectionId = section.id
  assign lang = localization.language.iso_code
-%}
<div id="TabbyPromo"></div>
<script>
  (function() {
    const script = document.createElement('script');
    script.src = 'https://checkout.tabby.ai/tabby-promo.js';
    script.async = true;
    script.onload = () => {
      const SUPPORTED_CURRENCIES = {
        AED: 'AED',
        KWD: 'KWD',
        SAR: 'SAR',
      };

      // here you can describe currency aliases
      const CURRENCY_NAME_TO_CODE_MAP = {
        AED: SUPPORTED_CURRENCIES.AED,
        KWD: SUPPORTED_CURRENCIES.KWD,
        SAR: SUPPORTED_CURRENCIES.SAR,
        KD: SUPPORTED_CURRENCIES.KWD,
        SR: SUPPORTED_CURRENCIES.SAR,
        Dh: SUPPORTED_CURRENCIES.AED,
        Dhs: SUPPORTED_CURRENCIES.AED,
      };

      // here you can describe count of currency decimals in your store
      const CURRENCY_DIGITS_COUNT = {
        [SUPPORTED_CURRENCIES.AED]: 2,
        [SUPPORTED_CURRENCIES.SAR]: 2,
        [SUPPORTED_CURRENCIES.KWD]: 3,
      };

      const priceRegExp = /\b[0-9\.,']+\b/;
      const currencyRegExp = new RegExp(`\\b(${Object.keys(CURRENCY_NAME_TO_CODE_MAP).join('|')})\\b`);
      const tabbyElementId = '#TabbyPromo';
      const lang = '{{ lang }}';
      const sectionId = '{{ sectionId }}';
      // this works for the default theme, for custom themes sometimes you have to search for a price element manually
      const priceElement = window[`price-${sectionId}`];

      const initializeTabbyPromo = ({ element }) => {
        const [layoutPrice] = element.textContent?.match(priceRegExp) || [];
        const [layoutCurrency] = element.textContent?.match(currencyRegExp) || [];
        const price = layoutPrice.replace(/\D/g, '');
        const currency = CURRENCY_NAME_TO_CODE_MAP[layoutCurrency];

        if (price && currency) {
          document.querySelector('#TabbyPromo').style.display = 'block';

         new TabbyPromo({
            selector: tabbyElementId,
            currency,
            price: price / Number(1 + '0'.repeat(CURRENCY_DIGITS_COUNT[currency])),
            lang,
            publicKey: 'yourApiKey', // specify your apiKey it should be a string
            merchantCode: 'string', // enter the code of your Store base currency,
            //'ksa' for SAR, 'KW' for KWD, 'default' for AED and others
          });
        } else {
          console.warn('can not recognize currency|price promo will be closed');

          document.querySelector(tabbyElementId).style.display = 'none';
        }
      };

      initializeTabbyPromo({ element: priceElement });

      const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
          if (mutation.type === 'childList') {
            initializeTabbyPromo({ element: mutation.target });
          }
        });
      });

      observer.observe(priceElement, { subtree: true, childList: true });
    };
    document.body.appendChild(script);
  })();
</script>
<style>
  #TabbyPromo div:empty, #TabbyDialogContainer div:empty {
    display: block;
  }
</style>

Move back to the “Themes” page and now click “Customize” button;
Choose the Products page Theme and in the left navigation menu add “Custom Liquid” (or “HTML”) object and move it under Price or Quantity Selector;
In the content of the “Custom Liquid” put the following command and Save:

{% render 'tabby-installments'%}

Make sure the snippet appears in the required place at the store front.

If snippets don’t appear

Please note that this snippet code only work when product page prices are displayed in a supported currency (SAR, AED, or KWD). For stores displaying prices in other currencies, the “non-price” snippet should be used.
This snippet code might not work for customized Shopify themes. It happens because of differences in price elements. To address this, locate the price element in your theme and update it on line 50 of our code. You can use the document.querySelector method with a unique selector that targets the price element on your product page — this could be an id, tag, class, etc., depending on your theme.
If you’re unsure how to adjust the code, you’re welcome to use the non-price snippet code.

No-price Snippet Code

Use this code at the step 5.

{%- liquid
  assign locale = localization.language.iso_code
-%}
<div id="TabbyPromo"></div>
<script>
  (function() {
    const script = document.createElement('script');
    script.src = 'https://checkout.tabby.ai/tabby-promo.js';
    script.async = true;
    script.onload = () => {
      const locale = '{{ locale }}';

      new TabbyPromo({
        selector: '#TabbyPromo',
        locale,
        publicKey: 'yourApiKey', // specify your apiKey, it should be a string
        merchantCode: 'yourMerchantCode', // enum: "default" for AED, "ksa" for SAR, "KW" for KWD
      }); 
    };
    document.body.appendChild(script);
  })();
</script>
<style>
  #TabbyPromo div:empty, #TabbyDialogContainer div:empty {
    display: block;
  }
</style>

Introduction

E-commerce Platforms

Online Custom Integration

Offline Integrations

Testing Guidelines

Shopify Snippets

Default snippet

”No-price” snippet

Adding Tabby Snippets on Product Pages

Adding Tabby Snippets on Cart Page

Manual Snippet Installation

Step 1. Create a file

Step 2. Add code

Step 3. Render the Snippet

Additional scripts

With-price Snippet Code

No-price Snippet Code

Introduction

E-commerce Platforms

Online Custom Integration

Offline Integrations

Testing Guidelines

​Default snippet

​”No-price” snippet

​Adding Tabby Snippets on Product Pages

​Adding Tabby Snippets on Cart Page

​Manual Snippet Installation

​Step 1. Create a file

​Step 2. Add code

​Step 3. Render the Snippet

​Additional scripts

​With-price Snippet Code

​No-price Snippet Code

Default snippet

”No-price” snippet

Adding Tabby Snippets on Product Pages

Adding Tabby Snippets on Cart Page

Manual Snippet Installation

Step 1. Create a file

Step 2. Add code

Step 3. Render the Snippet

Additional scripts

With-price Snippet Code

No-price Snippet Code