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

1. product-card-template

2. similar-product-card

3. dkn-product-card-template

4. advance-filter__product-card

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

Don't remove classnames which start with "dkn-" because they are used by internal functions.

Category cards

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

Don't remove classnames "category-image" and "category-name".

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

Don't remove classnames which start with "product-".