# Customising Dukaan Templates

### 🤔 How to customise custom HTML Tag content

Say, you want to customise `<add-to-bag-button>` tag content, then you need to edit the content present inside the HTML tag `<template>` having its corresponding Template id.

Similarly for other HTML tags, the tag name would be the template id.

### Add to bag button

1. `<add-to-bag-button>`

   This button is used in Product Details page & Variants Modal

   Template id - `add-to-bag-button-without-variant`
2. `<add-to-bag-button-with-variants>`

   This button is used in Product Card

   Template id - `add-to-bag-button-with-variant`
3. `<buy-now-button-load-point>`

   This button is used in Product Details page & Variants Modal

   Template id - `buy-now-button-template`

If you want to customise the styles of Out of stock button please add/modify template having the id - `out-of-stock-button`

### Product cards

Depending on your theme you can find your product card template. The template ids used in different themes are&#x20;

1. `product-card-template`&#x20;
2. `similar-product-card`&#x20;
3. `dkn-product-card-template`&#x20;
4. `advance-filter__product-card`

Now you can customise the structure and styles according to your usecase.

{% hint style="info" %}
Don't remove classnames which start with "dkn-" because they are used by internal functions.
{% endhint %}

### Category cards

To customise the category card look for the template having the id `categories-card-template.`

{% hint style="info" %}
Don't remove classnames "category-image" and "category-name".
{% endhint %}

### Variant Pills

The template ids for customising variant pills are :

`"dkn-size-variant-item-template"`- To customise text type variants.

`"dkn-color-variant-item-template"`- To customise color type variants.

### Variant Modal

To customise the structure of variant modals look for the template id `product-variant-selection-modal`

{% hint style="info" %}
Don't remove classnames which start with "product-".
{% endhint %}