How to add a new product name and product description to the products page

In this tutorial we will add a new lotion to the accordion code on the products page. To add a
new soap the same exact steps apply except you highlight and select the list of soaps.
1. Log into Weebly and click the edit button
2. In Weebly click on the products page button
menu of the Euphoria Farms website.

to edit your website.

located in the navigation

3. To edit the accordion code click on the list of products as pictured below.

4. After clicking on the list of products they become highlighted in blue.

5. Right click the highlighted code and click copy.

6. Click on the start button

7. Type in the search bar Notepad as pictured below.

8. Click on the notepad program to open it.

9. With the notepad program open right click inside of the blank notepad and click paste.
10. In the picture below is the notepad program with the accordion code pasted inside of it.

11. To add a product and its corresponding description to the accordion code right click and
copy a products code as shown below.

12. Paste the copied code where you want the new product to appear in the list of products in
the accordion code. The products are in alphabetical order. As of right now all that has
been done is copying and pasting an existing product into the code where you would
prefer the new product to appear in the list. In the following steps we will edit the copied
code to show the new product and product description.
13. The code below is one product description pulled from the code in the notepad and it is
the same code as the code pictured in step 11. We will use it as an example of how to
create a new product in the accordion code.

14. Highlighted below is the Cucumber Melon Lotion product name as it appears in the code
and as it appears to the visitors of the site.

15. The highlighted portion of the code is the part of the code we will edit to resemble the
new product name. Do not edit or delete the > symbol or the </h4>symbols
located on either side of the product name.
16. Backspace to erase the name of the copied and pasted product. In its place type the new
product name. Thus far we have created a new product name in the accordion code.
17. Highlighted below is the Cucumber Melon product description as it appears in the code
and as it appears to the visitors of the site.

18. The highlighted portion of the code is the part of the code we will edit to resemble the
new product description. Do not edit or delete the <p> symbol or the
</p>symbols located on either side of the product name.
19. Backspace to erase the description of the copied and pasted product. In its place type the
new product description. Thus far we have created a new product name and a new
product description in the accordion code
20. Highlight all of the code in the notepad.
21. Right click the highlighted code and click copy.
22. Go back to the products page in Weebly.
23. Click the products just as we did in Step 3.
24. Right click the highlighted code and click paste. Doing so pastes the newly edited code
over the existing code in Weebly. As a result we have inserted the accordion code with
the new product into the products page.
25. Click the publish button
located in the upper right hand corner of
Weebly. We have created a new lotion product in the products page.