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

In the left hand side, click on the file "layout.html" This is how it would look like
Now in the layout.html file, just inside the <body> tag, below it add the code My custom theme
Once you have added the text, click on "Save & Preview store" button
Now your changes would be deployed to a preview site which is different from your main store website
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>)
The mobile preview is visible within the code editor itself.
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!
We can also make the text bold by changing the HTML to this. My custom theme Similarly, you can continue playing around with

PreviousGetting the basics right NextTheme folder structure

Last updated 1 year ago