(a) The screenshot below shows you a typical Dreamweaver window that you see when you start Dreamweaver
(b) The HTML code that you see in your products section generates the "Add to Cart" button for your respective product. So in Dreamweaver, take your cursor to the location where you want to include the "Add to Cart" button for your product
(c) Next, click on the "Show Code View" button (present on the top menu bar)
(d) You will now see the "HTML Code View" of the page you are designing with your cursor blinking at a location where you put it in Step (b)
Important: Please don't change the position of your cursor at this stage
(e) Now go back to your E-Store window and copy the product HTML code as shown below.
To copy the code, either:
- Select the HTML code using your mouse, right-click on the selected portion and then click on "Copy"
OR
- Select the HTML code using your mouse, then press the Ctrl key on your keyboard and press the key "v". Release the Ctrl key after pressing "v"
(e) Now go back to the Dreamweaver code view and make sure that there is absolutely nothing in between the <p> </p> tags. Delete the term " " if it is present by the side of your cursor as shown below
(f) Right-click on the location where your cursor is blinking and then click on "Paste" to paste the code that just copied from your e-store
(g) The code should then appear in between the <p> </p> tags in "Orange" color. Dreamweaver diplays HTML code for forms in orange color. You should now verify that the code in orange starts with <form and ends with </form>
(h) Now click on "Show Design View" button present on the top menu bar to go back to the design mode
(i) You should see something similar to the screenshot shown below as a result of the steps above (inside the dashed red-bordered form). Now you are all set to test the code that you have just added for your product
