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?

Making your first edit

PreviousGetting the basics rightNextTheme folder structure

Last updated 2 years ago

Was this helpful?

Before we dive deep into folder structure, customizing components, functions and all, let's just try to make a simple change to see how it looks like.

This is how the "Code Editor" page looks like. Please ensure you are on this page before we proceed further.

✍️ Objective - To add the text "My custom theme" to the top of the page

  1. In the left hand side, click on the file "layout.html" This is how it would look like

  2. Now in the layout.html file, just inside the <body> tag, below it add the code <p>My custom theme</p>

  3. Once you have added the text, click on "Save & Preview store" button

  4. Now your changes would be deployed to a preview site which is different from your main store website

  5. Your preview store link would be .sh/<store-link> (Note - It's not yet deployed to your original store link, which is mydukaan.io/<store-link>)

  6. The mobile preview is visible within the code editor itself.

  7. If you can see, the text "My custom theme" is now visible on both mobile screen as well as desktop site. Awesome, you just edited your theme!

  8. We can also make the text bold by changing the HTML to this. <p><b>My custom theme</b></p> Similarly, you can continue playing around with