Dukaan Themes
  • Introduction to Dukaan Themes
  • Building your own custom theme
  • Getting the basics right
  • Making your first edit
  • Theme folder structure
  • How does it all work?
  • Nunjucks Templating Language
  • Basic code editing
    • Adding the HTML
    • Adding the CSS
    • Adding the Javascript
    • Adding Nunjucks
  • Customising Dukaan Templates
  • Dukaan Data
  • Advance code editing
    • Customising core functionality
  • Dukaan Functions
  • Integrating Dukaan Plugins
    • Wishlist plugin
    • Countdown timer plugin
    • Product scarcity plugin
  • Testing and Deploying Your Theme
  • Code Snippets
    • Changing text of Add to bag button
    • Adding shadow to product cards
    • Adding auto-scrolling text in homepage
Powered by GitBook
On this page

Was this helpful?

Basic code editing

We shall now move into learning how to make edits into our theme to change the structure, looks and functionality.

✍️ Objective - To show list of categories in a carousel in layout.html page

We will divide it into 4 parts

  1. Adding the HTML for the product card to display (If we were building a house, this step would be building the structure of the house using cement, wood, bricks)

  2. Adding the CSS i.e. color, shadow and other visual elements to make it look appealing (painting the building, adding flooring, furniture, etc.)

  3. Adding the Javascript i.e. functionality to the product card, like, what happens when someone clicks on a product, or hovers on it (Adding fans, lights, electric wiring, etc)

  4. Adding Nunjucks for fetching real data and using it to display the products (Inviting people to live in the house)

PreviousNunjucks Templating LanguageNextAdding the HTML

Last updated 2 years ago

Was this helpful?