# Products

{% embed url="<https://youtu.be/TPCfk5D5b8o>" %}

Shows a list of products. Once users click on a product they see a new screen with information about the product. Each product can be linked to its own webpage. To sell products from the app add a Checkout block to this app too (coming soon).&#x20;

### **Adding the Products Block** <a href="#add" id="add"></a>

1. Click on **+ Block**.
2. Select the **Products** block and click **Add this block**.
3. Fill in the **name** of the block.<br>

   <figure><img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2FJMCqJBjPjyMKegxlBHQI%2FScreenshot%202022-12-22%20at%2013.05.39.png?alt=media&#x26;token=de04bc20-9adb-43fa-86d8-8824613af1eb" alt=""><figcaption></figcaption></figure>
4. Click on the **icon** if you want to change the image used in the menu.
5. When you’re done, click **Add this Block**.

### **Editing the contents of the Products block** <a href="#content" id="content"></a>

Edit the content in the **Data** tab of your Products block.

#### **Adding new content**

1. Select the **Products** block in your app.
2. Select the **Data** tab.<br>

   <figure><img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2F0LKWM1Ye2IYSLxjsfCBj%2FScreenshot%202022-12-22%20at%2013.16.28.png?alt=media&#x26;token=776b023b-4ebc-4d13-85b1-b9292129f7aa" alt=""><figcaption></figcaption></figure>
3. Click on the **Create New** button to add new content.
4. Enter the **product** **details** like **Product** (name), **Price**, **Image**, **Description**, and **Website**. <br>

   <figure><img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2FZuENZizL8r48BUZX5WVO%2FScreenshot%202022-12-22%20at%2013.21.50.png?alt=media&#x26;token=4bca7da7-799f-4b04-a01b-551cd91bdcc8" alt=""><figcaption></figcaption></figure>
5. **Save** your entry by clicking Save.

#### **Editing your content**

Hover the cursor over an existing entry to edit, rearrange or delete it.

* **Edit**: select the pen icon and edit the content. When you're done click on **Save**.
* **Rearrange**: grab the handle on the left side of your entry to rearrange the order it will be displayed in the app.
* **Delete**: click on the garbage can icon to delete the entry from your block.

<figure><img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2FSLlCGsmovBM6JFiSZcCj%2FScreenshot%202022-12-22%20at%2013.26.00.png?alt=media&#x26;token=79ab4c70-9f67-4fe2-9680-56cb1a24d242" alt=""><figcaption></figcaption></figure>

### **The Products building block settings** <a href="#configure" id="configure"></a>

The **Products** building block editor is composed of three editing screens: **Settings**, **Data** and **Design**.

The settings in the **Settings** editing screen determine how your block will function, **Data** allows you maintain the content of the block, and the settings in the **Design** screen determine its aesthetics.&#x20;

#### **Settings**

There are several aspects of your **Products** block that can be changed in this screen:

* The name of the block
* The icon (or image) that will be used in the app menu
* The top image for the **Products** screen
* Allow users to be able to share the events via twitter, Facebook, or email<br>

  <figure><img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2FnDT8FBXyPteZlRH0Ux0R%2FScreenshot%202022-12-22%20at%2013.54.10.png?alt=media&#x26;token=e7047ae1-0f1f-4d82-abd4-c20cb8f03e68" alt=""><figcaption></figcaption></figure>

Should the need arise to keep the users of your published app from using this portion of the app, then you can always make use of the **ON/OFF** sliding selector.

Slide the selector to **OFF** to keep users from seeing the **Products** block. Now you can continue developing your app without worrying about users coming upon areas that you haven't finished developing as of yet. Once you are satisfied with your progress, slide the selector back to **ON** to publish this portion of your app.

#### **Data**

This is where you add, edit or delete the products in your list.

#### **Design**

The **Design** screen allows your to make highly detailed changes to your building block. **Design** gives the developer a remarkable amount of freedom to adjust everything exactly as he or she would like it.&#x20;

### **Frequently Asked Questions**

#### Where can I select the currency type displayed in the Products block?

In the left menu, go to **Manage** and then to **Settings**, in the **App Details** section you can select the appropriate currency from the dropdown menu.

<figure><img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2FPVBkDSrf8BvEU97pFm4e%2FScreenshot_2022-12-22_at_13_28_57.png?alt=media&#x26;token=a4a9132e-d0bb-4c33-b6da-062501d675ef" alt=""><figcaption></figcaption></figure>

**Is it possible to select items and have them emailed to the shop owner without going through a PayPal shopping cart? (Cash On Delivery - COD)**

&#x20;Yes, this option can be selected when setting up your [**Checkout**](https://appmachine.freshdesk.com/support/solutions/articles/80000978302) block (coming soon).