search

Adding the HTML

hashtag
✍️ 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.

<!-- layout.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    {% 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 }}
  </head>
  {% include './../../dukaan/common/spinner-loader.html' %}
  <body class="flex d-column">
    {% include './../../dukaan/common/hellobar.html' %}
    <main class="flex flex-1 d-column">
      {% block content %}
      {% endblock content %}
    </main>
    {% 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 %}
  </body>
</html>

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.

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

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.

chevron-rightFor reference - The contents of layout.html file after the above changeshashtag
PreviousBasic code editingNextAdding the CSS

Last updated