> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.easystore.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Connect with Atome


### In this article :

1. [Introduction](#2-1-introduction)
2. [Connect Atome account](#1-2-connect-atome-account)
3. [Add Atome price display on collection page](#1-3-add-atome-price-display-on-collection-page)
4. [Add Atome price display on product page](#1-4-add-atome-price-display-on-product-page)
5. [Add Atome price display on collection & product page (Wave, LUCKY, Candy, X-FORCE themes)](#1-5-add-atome-price-display-on-collection-product-page-wave-lucky-candy-x-force-themes)
6. [Display Atome price for other currencies](#1-6-display-atome-price-for-other-currencies)

# 1. Introduction

Atome is pronounced as "A-Toe-Me" and stands for "Available to Me" is a buy now pay later payment gateway that provides installment payment to your customers without any interest fees. You will receive the full amount upon customer purchase, whereas your customers can pay the amount in the span of 3 months' time. 

Registered an account with Atome [here](https://portal.atome.my/form-submit?accessToken=0ce2ab2dc962460a821633a8f3609367). The Atome team will reach out to you as soon as the form is filled. Sign the agreement and you will get the **API Key** and **Password** to proceed with the integration. 

**📌 Important Note :**
* Customers need to install the **Atome** app and register for an Atome account in order to make payment.
* Customers can download the Atome app through [this link here](https://www.atome.my/get-the-app) as Atome requires confirmation from the customers through the app.
* Support **MYR, SGD, TWD & HKD** currencies only
* Regarding the transaction fee, kindly consult support@atome.my as the rates vary.

# 2. Connect Atome account

2.1 Go to [EasyStore Admin](https://admin.easystore.co/home) > Settings > Payments > Add payment method > select **Atome**.

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1quq3al.png =600x371)

2.2 Fill up **Payment Details** section:

* **Display name**
* **Description**
* **ApiKey** & **Password** ( provided by Atome )
* select **Atome is now enabled**

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1e3bgna.png =800x450)

2.3 Scroll to bottom and click **Add sub payment method**.

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_c1izrb.png =800x207)

2.4 **Tick** the payment method following currency that supported by your Atome account > **Save**.

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_u7dm47.png =800x414)

2.5 If you'd like to charge customer for **transaction fee** if they pay with Atome, you can click the edit icon to add > Save and done.

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_h13kso.png =800x417)

# 3. Add Atome price display on collection page

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_j6cvk2.png =800x306)

Go to Channels > Online Store > [Themes](https://admin.easystore.co/channels/storefront/themes) > Edit source > **snippet/product-card.liquid** > search for **include 'price'** around row 66 > paste the following codes below it as per screenshot > Save.

```html
{% if shop.selected_currency == "MYR" %} <div style="font-size:18px; text-align:left; color:black;"> {{ product.price | divided_by: 3 | money: shop.money_format }} with 3 installments via <img border="0" class="no-watermark" src="https://gateway.apaylater.com/plugins/common/assets/svg/logo.svg" width="80"></div> {% endif %}
```

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_eh8wgc.png =900x411)

# 4. Add Atome price display on product page

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1dc18fe.png =800x254)

Now go to **section/main-product.liquid**, there are 2 steps you need to perform in this file.

1. Search for **include 'price'** around row 79 > paste the following codes below it as per screenshot > Save.

```
{% if shop.selected_currency == "MYR" %} <div id="atome-price-display" style="font-size:18px; text-align:left; color:black;"> {{ product.price | divided_by: 3 | money: shop.money_format }} with 3 installments via <img border="0" class="no-watermark" src="https://gateway.apaylater.com/plugins/common/assets/svg/logo.svg" width="80"></div> {% endif %}
```

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_16h7gcn.png =900x411)

2. At the same file **main-product.liquid** > search for **is_variants_initial = true** > paste the following codes below it as per screenshot > Save.

```
{% if shop.selected_currency == "MYR" %} document.querySelector("#atome-price-display .money").innerHTML = EasyStore.Currencies.formatMoney((variant.price / 3)); {% endif %}
```

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/screenshot-2024-01-11-at-10473_lg1ony.png =900x466)

# 5. Add Atome price display on collection & product page (Wave, LUCKY, Candy, X-FORCE themes)

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1spbt50.png =800x314)

5.1 Find `/assets/timber.js` file > search for keyword `Regardless of stock` to get to around line 195 > copy and paste the code below the area as shown.

```
//START Atome Snippet /assets/timber.js
$("#atome-price-display .money").html(EasyStore.formatMoney((variant.price / 3)));
//END Atome Snippet /assets/timber.js
```

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1ap1vcy.png =800x478)

5.2 Find `/template/product.liquid` file > search for keyword `ComparePricePercent` to get to around line 81 > copy and paste the code below the area as shown

```
<!-- START Atome Snippet /template/product.liquid 
   {% if shop.selected_currency == "MYR" %}
       <div id="atome-price-display" style="font-size:18px; text-align:left; color:black;">{{ product.price | divided_by: 3 | money: shop.money_format }} with 3 installments via <img border="0" class="no-watermark" src="<https://gateway.apaylater.com/plugins/common/assets/svg/logo.svg>" width="80"></div>
   {% endif %}
<!-- END Atome Snippet /template/product.liquid -->
```

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1cqy6e6.png =800x410)

5.3 Find `/snippets/product-grid-item.liquid` file > search for keyword `product_middle` to get to around line 72 > copy and paste the code below the area as shown, after the second `{% endif %}`

```
<!--START Atome Snippet /snippets/product-grid-item.liquid
   {% if shop.selected_currency == "MYR" %} 
	   <div style="font-size:18px; text-align:center; color:black;"> {{ product.price | divided_by: 3 | money: shop.money_format }} with 3 installments via <img border="0" class="no-watermark" src="<https://gateway.apaylater.com/plugins/common/assets/svg/logo.svg>" width="80"></div>
	 {% endif %}
<!--END Atome Snippet /snippets/product-grid-item.liquid-->
```

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_z65spz.png =800x416)

# 6. Display Atome price for other currencies

In step 3 & 5 above, you can change the currency to display Atome price:

5.1 If you'd like to display Atome price for a different currency, you can change the **MYR** in the codes to the currency you want.

5.2 If you'd like to display Atome price for all currencies you have set up in store, you can:

1. Remove **{% if shop.selected_currency == "MYR" %}** at the beginning of the codes, and
2. Remove **{% endif %}** at the end of the codes