# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mydukaan.io/customising-dukaan-templates.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.