# Add and edit elements

Elements are images, text, buttons, shapes, and other details that make up your page design.

## Add elements to your page 

{% hint style="success" %}
**Steps:**

1. Click **Add elements** on the left side of the Editor, or press **E**.
2. You can scroll up and down, and browse the library to view elements
3. Select an element and drag it onto the canvas to add it to your page design.
   {% endhint %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FIRHZ9RByHMcsmnuZm6Fr%2Fddsd-ezgif.com-video-to-gif-converter%20(1).gif?alt=media&#x26;token=758d4a0c-d971-4869-a392-e7cb34718f8d" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**What's next?**&#x20;

Once you have added an element, use the options and Inspector panel to edit and perfect it.
{% endhint %}

{% hint style="info" %}
To add an app block, check out [app-extensions](https://docs.foxecom.com/foxify-app/page-management/app-extensions "mention")&#x20;
{% endhint %}

## Types of elements

* **Quick add**: Quickly find and add common elements like Heading, Text, Button, Image, etc.
* **Saved assets**: View and use your saved design (both elements and sections). See [how to save a design as an asset here](https://docs.foxecom.com/foxify-app/foxstudio/page-customization/save-and-re-use-assets).

### **Basic elements**

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F5VHPCyURhBQnDm9Svi5p%2Fbasic-e-1.jpg?alt=media&#x26;token=b81c131d-93f2-46f8-91ec-73ea0d3d130b" alt="" width="509"><figcaption></figcaption></figure>

<details>

<summary>Text</summary>

&#x20;Add different text elements, including:&#x20;

* Heading
* Paragraph
* Display text
* Text with shadow

:writing\_hand: *Learn more:*[text](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/text "mention")

</details>

<details>

<summary>Buttons</summary>

Add buttons to let visitors interact with your page, including

* Solid button
* Button with border
* Rounded button
* Button with icon
* Button with underlined text

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FZuov11uhrOWKOpA2Jy8r%2FScreen%20Shot%202024-09-12%20at%2015.35.42.png?alt=media&#x26;token=cf67e117-35e2-460e-921c-e6bd083f5244" alt=""><figcaption></figcaption></figure>

:writing\_hand: *Learn more:* [button](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/button "mention")

</details>

<details>

<summary>Media</summary>

Add 3 types of visuals:

* [image](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/image "mention")
* [video](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/video "mention")
* Before/After image

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FiWzvXmuMhKdBKw2ARwgr%2FScreen%20Shot%202024-09-12%20at%2015.37.45.png?alt=media&#x26;token=cc7a99c3-f9f5-46c5-b5c4-3846fc688427" alt="" width="461"><figcaption></figcaption></figure>

</details>

<details>

<summary>Decorative</summary>

Decorate your page with ***Shapes*** and ***Dividers***.&#x20;

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F8Qk4wv0DKCZMRsjdPsUT%2FScreen%20Shot%202024-09-12%20at%2015.39.36.png?alt=media&#x26;token=f36a6e8d-308a-4e9d-accf-75a168c32021" alt="" width="462"><figcaption></figcaption></figure>

</details>

<details>

<summary>Promotions</summary>

Create and promote deals using a ***Countdown Timer*** and ***Marquee Text***.

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FFYspAIXUmGsWOQFVVTLz%2FScreen%20Shot%202024-09-12%20at%2015.40.28.png?alt=media&#x26;token=3aef8370-d3c7-4b3f-939e-548f07c8910f" alt="" width="461"><figcaption></figcaption></figure>

:writing\_hand: *Learn more:*&#x20;

[countdown-timer](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/countdown-timer "mention")

[marquee-text](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/marquee-text "mention")

</details>

<details>

<summary>Forms</summary>

Embed a ***Newsletter Subscribe Form*** or a ***Contact Form*** to collect subscriptions.

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FTDRtpBJSVaykQ48ETN5u%2FScreen%20Shot%202024-09-12%20at%2015.41.49.png?alt=media&#x26;token=209ce40b-3f5b-47df-a62f-c67093bb8f06" alt="" width="459"><figcaption></figcaption></figure>

:writing\_hand: *Learn more:*

[subscribe-form](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/subscribe-form "mention")

[contact-form](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/contact-form "mention")

</details>

<details>

<summary>List</summary>

Add ***List Items***, ***List Items with Icons***, or ***Social Links***.

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FjqUzCm7pMuBrNUNcihuV%2FScreen%20Shot%202024-09-12%20at%2015.43.04.png?alt=media&#x26;token=aac7adc5-f458-437c-a5f3-b50ec3c67457" alt="" width="465"><figcaption></figcaption></figure>

:writing\_hand: *Learn more:* [list-items](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/list-items "mention")

</details>

### Advanced elements

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F0qFtJ0aXWVP6IiWBW9Za%2Fbasic-e-2.jpg?alt=media&#x26;token=c143062f-fea4-43de-9719-3e4ddf036f0e" alt="" width="509"><figcaption></figcaption></figure>

* **Layout**: Embed a grid or a stack to organize elements more easily.

{% content-ref url="layout-and-styling/cells-and-grids" %}
[cells-and-grids](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/cells-and-grids)
{% endcontent-ref %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FT8cSTED12e2jenbxSwlQ%2FScreen%20Shot%202024-09-12%20at%2015.45.03.png?alt=media&#x26;token=41b2d1a3-a1a0-4814-a1d7-fe117855353f" alt="" width="464"><figcaption></figcaption></figure>

* **Slideshow**: Use pre-made slideshows for horizontal or vertical slides

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FWtLWv1Bi8HNwSkfjHJXO%2FScreen%20Shot%202024-09-12%20at%2015.48.51.png?alt=media&#x26;token=8f3ac4e8-424e-4b8d-9054-88c29f8814e2" alt="" width="456"><figcaption></figcaption></figure>

* **Tabs and Collapsible**: Display content in an accordion layout.

{% content-ref url="add-and-edit-elements/tabs" %}
[tabs](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/tabs)
{% endcontent-ref %}

{% content-ref url="add-and-edit-elements/collapsible-content" %}
[collapsible-content](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/collapsible-content)
{% endcontent-ref %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F0BQxjUN0Us3K2ezgIx38%2FScreen%20Shot%202024-09-12%20at%2015.50.27.png?alt=media&#x26;token=ee0500f4-6cb6-4001-8af3-28f671038af5" alt="" width="456"><figcaption></figcaption></figure>

* **Testimonials** and **Press**: Showcase social proof to build trust.

{% content-ref url="add-and-edit-elements/testimonials" %}
[testimonials](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/testimonials)
{% endcontent-ref %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FugyZYa3R5bOB8rA6PL03%2FScreen%20Shot%202024-09-12%20at%2015.51.26.png?alt=media&#x26;token=40c09133-5e18-406f-9aaa-691a36bcadf4" alt="" width="459"><figcaption></figcaption></figure>

### **Shopify elements**

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F8zJtwtU28aMuJYkXGaPc%2Fbasic-e-3.jpg?alt=media&#x26;token=b3b26486-ca93-4deb-ac61-de960cace14f" alt="" width="479"><figcaption></figcaption></figure>

* **Single product**: Add product details and other product-related elements, including:
  * ***Product details*** - *Learn more:* [product-details](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/product-details "mention")
  * ***Product media***
  * ***Quantity input***
  * ***Pries***
  * ***Variants***
  * ***Description***
  * ***Add to cart***
  * ***Dynamic checkout***
  * ***Vendor***
  * ***Type***
  * ***Product meta***

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FafiKb6g36kRKtaY7UX7B%2Fsh-e-1%20(1).jpg?alt=media&#x26;token=071dc226-7a68-40a5-927d-2341e7f4ab85" alt=""><figcaption></figcaption></figure>

* **Products**: Add a ***Product List***, ***Favourite Products***, or ***Related Products***.

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FY44KYtANNkSUu8BnkCQC%2Fsh-e-2%20(1).jpg?alt=media&#x26;token=e29f1f8d-6930-4065-8500-719f558b56b0" alt="" width="563"><figcaption></figcaption></figure>

* **Collections**: Add a collection display with featured images for ***Main Collection***, ***Collection List***, or ***Collection Tabs***.

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F9COvk47xKy4MLy4o3llg%2FScreen%20Shot%202024-09-12%20at%2016.04.01.png?alt=media&#x26;token=66c7ede6-26f0-4f8e-8cef-ca9c5837000f" alt="" width="385"><figcaption></figcaption></figure>

* **Blog posts**: Create and add a stunning blog and attract traffic.

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FKTtyF7emkzUMf8THhoT9%2FScreen%20Shot%202024-09-12%20at%2016.06.30.png?alt=media&#x26;token=5c941d09-b237-4496-92f8-048fb8bcbbb1" alt="" width="425"><figcaption></figcaption></figure>

* **Buy buttons**: Add Shopify functional buttons to your page - ***Add to cart button*** and [Dynamic checkout buttons](https://help.shopify.com/manual/online-store/dynamic-checkout).

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FGszdwj7n4cQgZeM0nwGj%2FScreen%20Shot%202024-09-12%20at%2016.06.47.png?alt=media&#x26;token=7e312cff-11d4-452e-be81-717afec49183" alt="" width="427"><figcaption></figcaption></figure>

## Delete an element from your page

You can delete an element you add to your site at any time.&#x20;

{% hint style="success" %}
**Steps:**

1. Click on the relevant element on the canvas.
2. In the Actions bar, click **Delete** or press **Delete** on your keyboard.
   {% endhint %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FH1WX2tiEPqtRMaTG3jTU%2Fdeleteelement-ezgif.com-video-to-gif-converter.gif?alt=media&#x26;token=0bd01ff4-f30b-4a7c-85b5-429a12840cc2" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Delete an element by mistake?**\
If you delete an element by mistake, you can easily undo this by clicking the **Undo** icon in the top bar of the Editor.

See more: [undo-and-redo](https://docs.foxecom.com/foxify-app/foxstudio/editor-tools/undo-and-redo "mention")
{% endhint %}