Making your first edit

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

PreviousGetting the basics rightNextTheme folder structure

Last updated

Was this helpful?