> For the complete documentation index, see [llms.txt](https://docs.mydukaan.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mydukaan.io/basic-code-editing/adding-the-html.md).
# Adding the HTML
### ✍️ Objective - To display categories in homepage
Open the layout.html file
This is how a bare minimum layout.html file would look like, it has some code which is required for a theme to function properly, avoid removing any of this code.
```html
{% include './../../dukaan/common/theme-fonts.html' %}
{{ 'splide.min.css' | css | static }}
{{ 'layout.css' | css | static }}
{{ 'styles.css' | css | static }}
{% include './../../dukaan/common/seo_tags/commonSeoTags.html' %}
{% include './../../dukaan/common/theme-colors.html' %}
{% block head %}
{% endblock head %}
{{ 'head' | DukaanBlocks }}
{% include './../../dukaan/common/spinner-loader.html' %}
{% include './../../dukaan/common/hellobar.html' %}
{% block content %}
{% endblock content %}
{% include '../../dukaan/common/bxgy-sticky-footer.html' %}
{% include '../../dukaan/common/store-open-sticky.html' %}
{% block postfooter %}
{% endblock postfooter %}
{{ 'footer' | DukaanBlocks }}
{% include './product-variant-templates.html' %}
{{ 'variant-utils.js' | js | static }}
{{ 'dukaan-utils.js' | js | static }}
{{ 'layout.js' | js | static }}
{{ 'dukaan-coupons.js' | js | static({ defer: true }) }}
{{ 'dukaan-offers.js' | js | static({ defer: true }) }}
{{ 'axios.min.js' | js | static({ defer: true }) }}
{{ 'splide.min.js' | js | static }}
{{ 'common-components.css' | css | static }}
{% include './../../dukaan/common/auth.html' %}
{% include '../../dukaan/common/multilanguage.html' %}
{% include './../../dukaan/common/common-scripts.html' %}
{% include '../../dukaan/common/snackbar.html' %}
{% block script %}
{% endblock script %}
```
If we check now, our site would be completely blank. Now, we will try to display a dummy category.
We will display a category image and category name, go ahead and paste this code inside the body tag.
```html
```
This code snippet creates a simple HTML structure to display a category card within a container. The category card includes an image and the category name, for now we have hardcoded a dummy image and category name, both wrapped within a hyperlink element for navigation purposes.
\
If you save & preview the changes, you'd see something like this
Let's try to add some more dummy categories, the updated code would be
```html
```
This is how our site looks now
Now that we can display dummy data with HTML its time to flare up the tags by spicing it up with some CSS in the next chapter.
For reference - The contents of layout.html file after the above changes
```html
{% include './../../dukaan/common/theme-fonts.html' %}
{{ 'splide.min.css' | css | static }}
{{ 'layout.css' | css | static }}
{{ 'styles.css' | css | static }}
{% include './../../dukaan/common/seo_tags/commonSeoTags.html' %}
{% include './../../dukaan/common/theme-colors.html' %}
{% block head %}
{% endblock head %}
{{ 'head' | DukaanBlocks }}
{% include './../../dukaan/common/spinner-loader.html' %}
{% include './../../dukaan/common/hellobar.html' %}
{% block content %}
{% endblock content %}
{% include '../../dukaan/common/bxgy-sticky-footer.html' %}
{% include '../../dukaan/common/store-open-sticky.html' %}
{% block postfooter %}
{% endblock postfooter %}
{{ 'footer' | DukaanBlocks }}
{% include './product-variant-templates.html' %}
{{ 'variant-utils.js' | js | static }}
{{ 'dukaan-utils.js' | js | static }}
{{ 'layout.js' | js | static }}
{{ 'dukaan-coupons.js' | js | static({ defer: true }) }}
{{ 'dukaan-offers.js' | js | static({ defer: true }) }}
{{ 'axios.min.js' | js | static({ defer: true }) }}
{{ 'splide.min.js' | js | static }}
{{ 'common-components.css' | css | static }}
{% include './../../dukaan/common/auth.html' %}
{% include '../../dukaan/common/multilanguage.html' %}
{% include './../../dukaan/common/common-scripts.html' %}
{% include '../../dukaan/common/snackbar.html' %}
{% block script %}
{% endblock script %}
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://docs.mydukaan.io/basic-code-editing/adding-the-html.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.
